[HTML] facebook、Twitter 共有ボタン設置のまとめ

[html] facebook、Twitter シェアボタン設置のまとめ

本日は、htmlに設置するfacebookとTwitterのシェアボタンについてまとめてみました。

ボタンを作成

以下のページよりボタンの種類や、共有するURLを設定します。

カスタマイズ

上記で作成したボタンは作成後更にカスタマイズすることも可能です。

twitter

aタグ部分

scriptタグ部分

facebook

scriptタグ部分

OGP(Open Graph Protocol)にとは

OGPとはSNS向けにコンテンツの情報をhtml内に付加する仕様です。 facebookの他に、MixiやグリーでもOGPを使用しているようです。

OGPの設定方法

以下のmetaタグをhtmlの
へ記述します。

OGPの内容確認 or OGPで設定した内容が反映されない場合

以下のデバッグツールで実際に共有される内容を確認することができます。
また、OGPの内容を変更したのに反映されない場合も、デバッガーにURLを入力することによりキャッシュを作り直します。

facebook デバッガー

機会があれば、次回はボタンのレイアウト方法や、画像の変更方法についてなど書こうと思います。

onishi
About onishi (10 Articles)
主にjavascript(jQuery),iOSを担当しています。

Leave a comment

Your email address will not be published.

*



Top