Facebookのシェアボタンをブログに設置する方法

2013/07/10 　カテゴリー：アプリ開発　　タグ：

いいね！ボタンより拡散効果の高いシェアボタン。気軽に記事にシェアしてもらえるようにShareButtonの設定方法を調べてみた。

「いいね」「シェア」の違い

分かっているようでよく分かっていない「いいね」「シェア」ボタン。
一応整理してみる。

「いいね」

シンプルに「良い！」「共感した！」という意思表示をするのが、
「いいね！」ボタンです。
ただ、いいね！は押した人のタイムラインに出るとは限らず、その押した人の友だちのタイムラインにはなかなか出ません。

「シェア」

リンクや画像付きの情報で、
「この情報、自分の知り合いにも広めたい（共有したい）！！」
と思ったときに使用するのが、「シェア」ボタンです。
ご自身のコメントを付けて、知り合いに情報を送ることができます。
（友達全員はもちろん、情報を広める相手を自分で選択することも可能です）
押した人のタイムラインはもちろん、その友達のタイムラインにも表示され、
宣伝効果抜群です。

だから出来れば「シェア」して欲しい

それにはいい記事を書くのが一番！
はもちろんですが、その結果
「いいな、教えてあげよう」と思ってくれた時に
すぐできる用意をしておいたほうが絶対いいと思いました。

そこでシェアボタン！

ところが、このシェアボタン、以前はFacebookの公式ページで設定可能だったのですが、
現在は「いいね！」ボタンと統合され、公式ページでは設定できなくなりました。

そこで、いろいろ調べたところようやくありました。

シェアボタンが無い！？でも大丈夫！Facebook公式のshareボタンが終了しても使えるコピペ用コードを公開

シェアボタン！の設置方法

１．以下のコードをコピー

&amp;lt;a href=&amp;quot;#&amp;quot; onclick=&amp;quot;window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(document.URL)+'&amp;amp;t='+encodeURIComponent(document.title),null,'width=550px,height=350px');return false;&amp;quot;&amp;gt;
&amp;lt;img src=&amp;quot;https://lh5.googleusercontent.com/-zd4kuBiPuLE/UAZG8leQEUI/AAAAAAAAAwQ/JoxNuaa7ygQ/s50/share.jpg&amp;quot; alt=&amp;quot;Share (facebook)&amp;quot; /&amp;gt;&amp;lt;/a&amp;gt;

２．ページ内のHTMLソースで貼り付けたい場所にペースト

そんだけ

するとこのようなボタンが配置されます。