ライブドアブログにFacebookのシェアボタン（日本語）を設置・追加する方法

投稿日 2015-02-05
著者 xiaolong
カテゴリーブログ運営テクニック

前書き：ライブドアブログはデフォルトでFacebookのシェアボタンが追加できない

当ブログで使用しているのはライブドアブログ（Livedoor Blog）サービス。独自ドメインを使って入るが、ブログサービス自体はライブドアのを利用させてもらっているというわけだ。

あのホリエモンこと堀江貴文さんが始めた会社だが、正直あの人がいなくなって今はサービスがガタガタ。全然トレンドについていけていない感じだし、特に今やアクセスの半分か半分以上を占めるスマホ版のカスタマイズ度の低さといったら泣けてくるほどだ。

さて、そんなダメダメなサービスの中で気に入らなかったのが、今やブログには欠かせないソーシャルボタンの中で、ライブドアブログのデフォルトのソーシャルボタンにFacebook（フェイスブック）の”シェア”ボタンがないことだ。”いいね”ボタンはあるのに。。

基本的に、記事を読んで感心したら何らかのコメントを付けてシェアしたいのが人情なのに、それがデフォルトでできないのは。。単にライブドアブログの怠慢でしかないと思う。

そんなわけでいくかのサイトを参考に、PC版限定だが自分で設置に成功したので（この記事の上下、タイトル下部分と商品紹介の下あたりをご覧いただければわかると思う）、方法をご紹介したい。

参考にさせてもらったサイト

この2サイトに感謝！
・無無無庵さん「facebookのシェアボタン」
Livedoorブログに追加する方法を大いに参考にさせてもらった。ただ、コードが古かったりちょっと違いがあったので私の方で修正させてもらった。
・WebMemoさん「Facebookのshare(シェア)ボタンをサイトやブログに設置する方法」
仕組みについてこのサイトが大いに参考になった。

ライブドアブログにFacebookシェアボタンを追加するステップ

※最新のタグについてはFacebookデベロッパページ（Facebook Developers）のいいねボタンまたはシェアボタンを参照していただきたい。

■Step 1
ライブドアブログ管理画面＞ブログ設定＞デザイン・ブログパーツ設定のPC＞カスタマイズタブ＞トップページで、タグの直下に、以下のHTMLコードを挿入して一回トップページをリロードする。その後は消してもいいらしい（私は全部のタブに入れてそのままにしているが）。

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=216213308440544&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

■Step 2
以下のFacebookシェアボタンHTMLコードを、ソーシャルボタンを表示したい場所に追加する。
基本的には、<$ArticleToolBox$>のソーシャルボタン用タグが書かれているところの前か後ろあたりに設置することになるだろうが、ご自由に。。