2013年12月9日月曜日

facebook シェアボタン 設置まとめ 2013 12月



1.<html>に以下のコードを入れる。

(html5バージョン、何故入れるかは忘れました。)


2.ogpを設定する。
(※アプリIDが無くても動きますがアプリIDを取得するとfacebookアプリのインサイトで情報が見れるようになります。アナリティクス的に調べることが出来る。)


3.facebook開発者ツールでサイトURLを入れて以下の2つのコードを
取得する。
https://developers.facebook.com/docs/plugins/share-button/

・facebook SDK※アプリIDなしバージョン(<body>直下に置く)

・facebookボタンのリンク(ボタンを置きたい好きな場所に置く)


4.htmlに<ul><li>などで並べる。無理な時は<table>レイアウトにする。

5.IE8以下対策、現在のシェアボタンのコードはhtml5用でIE8に対応していないので
条件分岐させてIE8以下用のコードを用意する。


6.シェアした時の画像はpngでないと荒れる。
画像の大きさは公式では1500×1500とか
みたいですが、スマホ用でシェアした時の最大サイズが500いくつだったので600px×600pxで用意すればバッチリなはず。


<参考URL>