シェアボタンの設置

facebook、twitter、LINEのシェアするボタンを設置する際のメモ。

facebookの「いいね!」ボタン

OGタグを記述。

「いいね!」ボタン横のカウンタは、[シェアURL]を元にカウントする点に注意。
ページ内に複数設置する場合は、それぞれのボタンが指すシェアURLは必ず存在しなければならない。
OGタグを書き換えてもすぐには反映されないので、facebookの Object Debugger でキャッシュをクリアする。

fb-root要素とJavaScriptを記述。
記述する場所はBODYタグ内が良いらしい。

ページ内に複数設置する場合でも、一つだけ記述しておけばOK。
[アプリケーションID]は facebook developers で取得したものを記述する。

ボタンを設置

twitterの「ツイート」ボタン

JavaScriptを記述。

ページ内に複数設置する場合でも、一つだけ記述しておけばOK。
記述する場所はBODYタグ直後が良いらしい。

ボタンを設置

投稿URLとシェアURLの違いは、前者が単に投稿に追懐されるURLで、後者はツイートボタン横に表示されるカウンタの対象となるURLを指す。ボタンを設置しているURLがシェアしたいURLと同じ場合は、シェアURLは必要ない。

LINEの「ラインで送る」ボタン

JavaScriptを記述。

ボタンを設置。

詳しくは 公式ページ を見たほうが早い。

ただ上記設置方法は、ボタン画像が公式のものだったり、設置したページのURLがそのまま使われるので、ページ内に複数設置したい場合や、ボタン画像をオリジナルにしたい場合は以下の書式で記述する。この場合、JavaScriptの記述は必要ない。

[投稿テキスト]はURLエンコードが必要。
公式画像は ココ の一番下にある 「ボタン画像をダウンロード」 から。