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

  • ブックマーク
  • Feedly
  • -
    コピー

Facebook_share_button_シェアボタン

前書き:ライブドアブログはデフォルトで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$>のソーシャルボタン用タグが書かれているところの前か後ろあたりに設置することになるだろうが、ご自由に。。

【日本語シェアボタン+カウント数】

<div class="fb-share-button" data-href="<$ArticlePermalink$>" data-layout="button_count"></div>

→表示結果

→表示結果

43

からくり解説

実は非常に簡単。

FacebookのシェアボタンコードのシェアするリンクURLを、ライブドアブログ特有のパーマリンクURLパラメータの<$ArticlePermalink$>に置き換えただけだったりする(URLの前後のダブルクオーテーションは省かないこと)。

他のボタンのデザインでも上記を部分を置き換えるだけで応用が可能なので、あとはお好みで改造していただければと思う(もちろんFacebookの規約に合致する範囲内で!)

画蛇添足

HTMLで構成されているブログ本文内で上記のようにHTMLコードの記述を紹介する場合は、”正規表現”への変換が必要となる。そんな時は、以下のテキスト⇔HTML変換ツールが便利だ。
同人サイトの運営さん「【ツール】テキスト⇔HTML変換」

ここに記述したいHTMLを入力し、”テキスト→HTML”ボタンを押せば、下に正規表現が出てくるので、それをコピペすればOK。

※一行だけのコードの場合、コピペしてもなぜか正規表現が適用されずコピペされてしまうことがあるが、その場合前後の行に日本語文字(例えば”テスト”)を入れた後に変換をして、コピペをするとうまく貼り付けることができた。ご参考まで。

記事は以上。

Visited 61 times, 1 visit(s) today
  • ブックマーク
  • Feedly
  • -
    コピー

この記事を書いた人