Facebookの「シェア」ボタンを設置する方法を調べたので、まとめておきます。
ここでは必要要素のみ簡潔に書き示します。詳細は「Facebookシェア – Facebook開発者」を参照して下さい。
「シェア」ボタンは現在非推奨となっています。今後あらたに設置される場合は、「いいね(Like)」ボタンの設置が推奨されています。
「シェア」ボタンの設置方法
facebookのシェアボタンを最小要素で実現させるには、以下のコードを追加すればよい。
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
これだけで、該当ページの該当URLを指定したシェアボタンが生成される。
ボタン形状
aタグにtype属性を付与するとボタン形状を指定できる。
<a name="fb_share" type="box_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
typeには、”box_count”、”button_count”、”button”、”icon_link”、”icon”が指定可能。実例は以下の通り。
シェアボタン形状例
| type | example |
|---|---|
| box_count | |
| button_count | |
| button | |
| icon_link | |
| icon |
URL指定
aタグにshare_url属性を付与すると、シェアするURLを指定できる。
<a name="fb_share" share_url="YOUR_URL"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
インデックスページなどで、複数の「シェア」ボタンを設置し、個別にURLを指定したい場合などに使うと良い。
名称変更
シェアボタンの名称を変更したい場合は、aタグの内容を変更する。
<a name="fb_share">シェアする</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
上記の例では「シェアする」と言う名称のシェアボタンになる。
メタプロパティ
HTMLヘッダに を指定することにより、より具体的にシェアボタンを制御できる。
基本要素は以下の通り。
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
その他拡張方式は、公式ドキュメントである「Facebookシェア – Facebook開発者」を参照のこと。
JavaScriptを使わないシェアボタン
JavaScriptを使いたくない場合、以下のようなURLを使用することにより、任意のシェアボタンを作成することが可能である。
http://www.facebook.com/sharer.php?u=<url to share>&t=<title of content>
問題点
実際に設置するに辺り、以下のような問題に遭遇した。
HTML5でvalidにならない
XHTML 1.1以降ではa要素のname属性は廃止される。
またa要素のtype属性はファイルのMIMEタイプを指定するために使われている。勝手に「box_count」などを使ってはダメ。
重ねてmetaタグのpropertyは定義されていない。
現状は解決方法が分からず、HTML5 validにならない。
シェア数がカウントされない
box_countやbutton_countを指定しても、シェア数が表示されない場合があった。
これは http://static.ak.fbcdn.net/connect.php/js/FB.Share のソースを読んで原因が分かった。以下、ソースより一部抜粋。
a.fb_count=this.results[b].total_count;this.displayBox(a,3);
上記のdisplayBox(a,3)が表示呼び出し部分だが、引数に3を指定しており、3人以上が「シェア・いいね」しないと、カウント数が表示されないようになっている。
これを修正するには、http://static.ak.fbcdn.net/connect.php/js/FB.Share をダウンロードし、displayBox(a,3)をdisplayBox(a,0)に変更してサーバローカルに保存し、変更したJavaScriptを呼び出すようにすれば良い。
但し、ローカル保存したJavaScriptを使用する場合、facebook側で変更があった場合に追従できない可能性が高いので、自己責任で試して頂きたい。
box_countの表示位置がおかしい
box_countを指定した場合の表示位置がおかしい。
調べたところ、facebookが被せているCSSで、floatさせてleftに振っている。
importantで否定することも考えたが、面倒なので他要素と被らない場所に設置することにした。
豆知識
「シェア」と「いいね」は基本は一緒。コメント・画像があるのが「シェア」、無いのが「いいね」。だからcountは共通して上がる。
「シェア」が先にあって、あとから「いいね」が出来たらしいよ。
ブログ「Hinemosu」では、以下のようなFacebook関連記事も書いています。
facebook : 「いいね」ボタンでシェアする | Hinemosu
