SNSボタンの設置方法まとめ

nakajima

11年 ago

初歩的な内容とはなりますが、毎回調べるのも労力を要すため、
今回はいろいろなSNSボタンの設置方法をまとめてみました。

（2013年9月18日時点での情報です。）

Facebook

いいね！ボタン

https://developers.facebook.com/docs/reference/plugins/like/

HTML5の設置コードを使用した際、IE等の古いブラウザでは動かない場合があるので注意が必要です。
その場合はiframeを使いましょう。

またHTML5版のコードを使用していて、いいね！ボタンがエラー表示になっている際は、
data-href内がURLエンコードになっていないかどうかを確認してください。

仕様変更でURLエンコードしたものを使用するとエラー表示となってしまいます。
　

Twitter

Twitterボタン

https://twitter.com/about/resources/buttons#tweet

■ボックス型のツイートボタンを設置する

ボックス型のツイートボタンを設置することも可能です。
ソース内に「data-count="vertical"」を追加します。

<a class="twitter-share-button" href="https://twitter.com/share"
 data-lang="ja" data-count="vertical">ツイート</a>

■ボックスタイプの幅を修正する

何も指定をしてあげないとデフォルトの幅が広いため以下のような見た目となります。
そちらを修正するために次のCSSを利用します。

iframe.twitter-share-button {
    width: 65px !important;
}

■水平タイプの幅を修正する

水平タイプのデフォルトの幅も広めに設定がされており、
右側に無駄な空白が作られてしまうため、こちらも調整しましょう。

iframe.twitter-share-button {
    width: 105px !important;
}

■ボックスタイプと水平タイプを両方使っている場合

サイト内でボックスタイプと水平タイプを両方使っている場合、個別にスタイルを調整する必要があります。

ボックスタイプはclass属性に「twitter-count-vertical」
水平タイプは「twitter-count-horizontal」としてセレクタを指定します。

iframe.twitter-count-vertical {
    width: 65px !important;
}
iframe.twitter-count-horizontal {
    width: 105px !important;
}

Google+

+1 ボタン

https://developers.google.com/+/web/+1button/?hl=ja
　

はてなブックマーク

http://b.hatena.ne.jp/guide/bbutton
　

LINE

LINEで送るボタン

http://media.line.naver.jp/howto/ja/

このボタンは「iOS、Android用のWebページまたはアプリ」用に設置可能の機能なため、
PCサイトで実装しても確認および、LINEで送ることは出来ません。

またボタン画像は公式に提供している画像以外の使用を禁止されているので、こちらも注意が必要です。
　

mixi

mixiのソーシャルボタンの設置は、mixiに登録する必要があります。

登録後、「mixi Developer Center」から「Partner Dashboard」にログインします。
ログインしたら「mixi Plugin」から「新規サービスを追加」して登録を行ってください。

「mixiチェック」は「チェックボタン用HTML発行フォーム」でサービス登録で入手した「識別キー」を入力して発行します。

■mixi Developer Center
http://developer.mixi.co.jp/
　
イイネ！ボタン

http://developer.mixi.co.jp/connect/mixi_plugin/favorite_button/get_html_code/
　
mixiチェック

http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/publish/
　

OGPの設定

「いいね！」をクリックした際、自分のウォールに掲載される情報もOGPを設定してカスタマイズしましょう。

■【facebook】OGPで「いいね！」情報をカスタマイズ | Tips Note
https://www.tam-tam.co.jp/tipsnote/html_css/post256.html
　

全てに関わる注意点

htmlタグにOGP用の属性を追記することが大切です。
記述がないため、まともに動かないこともあるため注意が必要です。
　
また、Google+ではOGPとMicrodataが同時に指定されている場合、Microdataが優先されるようです。

■Google+ は OGP より Microdata を優先するみたい | WWW WATCH
http://hyper-text.org/archives/2013/04/google_ogp_or_microdata.shtml
　

ogタグ用

<html xmlns:og="http://ogp.me/ns#">

facebookいいね！用

<html xmlns:fb="http://www.facebook.com/2008/fbml">

Google+用

<h1 itemprop="name">TAM</h1>
  <img itemprop="image" src="{image-url}" />
  <p itemprop="description">description text</p>
</body>

mixiチェック用

<html xmlns:mixi="http://mixi-platform.com/ns#">

参考ページ

■ソーシャルボタンの設置まとめとボタンの幅や吹き出しの直し方、コーディング方法など | Cappee Design
http://cappee.net/coding/social-button-matome

■Facebookの仕様変更に立ち向かう！Likeboxの最小幅とURL指定について。 | 株式会社LIG
http://liginc.co.jp/web/service/facebook/34908

■新しくなった公式Twitterボタン（ツイートボタン）のデザインを修正する: 小粋空間
 http://www.koikikukan.com/archives/2011/12/10-025555.php

■「LINEで送る」ボタンを実装する方法 | たねっぱ！
http://taneppa.net/send-by-line/

■ソーシャルボタンの設置の仕方 : 初心者によるブログの勉強のためのブログ
 http://blog.livedoor.jp/kamikaze_cyclone/archives/14641840.html

■ソーシャルボタン注意点 | BANTOASA
http://asatoban.jp/blog/?p=73