ブログネタ
livedoor Blogを使いこなす設定・活用術教えて! に参加中!
livedoorブログでは、「外部サービス」 として色々なソシャールボタンが設置できる。
Facebookでは 「いいね」 ボタンが設置でき、小生サイトでも利用している。

過去には、Facebookで 「いいね」 以外にも 「シェア」 が利用できていたのだが、Facebook側の仕様変更の為か(?) 、巷のサイトでも 「いいね」 しか見かけなくなった。
しかし、この最近では朝日デシダル等で、それまで設置していた 「いいね」 を 「シェア」 に変更してきたようだ。

儂としては、「いいね」 よりも 「シェア」 の方が好みの為、「シェア」ボタンの設置を目論んでいる。

Facebookの「シェアする」ボタンを自分のサイトに入れる方法 | nanapi」 を見れば、ブログ全体として 「シェア」 ボタンを設置することはすぐにできると考えた。 しかし、ブログ内の個別記事に設置するカスタマイズが判らない。
個別記事毎に 「シェア」 ボタンを設置する為には、個別記事のURLを指定しなければならないのだろう。
というわけで、「独自タグ一覧(変数) - livedoor Blog ヘルプセンター」 から 「ArticlePermalink」 タグを利用すれば とまでは辿り着いた(?) のだが、そこから先に進めない。


livedoorブログの開発者より御知恵拝借したいと考え、本キャンペーンに投稿する次第である。
関連過去記事:livedoorブログの機能付加
-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-・-
追記:2014/10/13 ※伴って、上記記事の一部に抹消線を付加した。
「シェア」ボタンを設置できた

1. 「Facebookのshare(シェア)ボタンをサイトやブログに設置する方法 : Web Memo.SE」を参考にして、以下のスクリプトを管理画面の「デザイン設定(PC)」⇒「カスタマイズ」により各ページのデザインに書き足した。
【元になったスクリプト】 ※儂の好みで、カウントを表示するタイプのボタンを選んだ。
<a name="fb_share" data-type="button_count" share_url="[記事のURL]"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
【変更後のスクリプト】
<a name="fb_share" data-type="button_count" share_url=<$ArticlePermalink$>></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
これでも「シェア」ボタンが表示され機能するが、ボタン内の文字が英語表示となる為、カタカナにする方法を模索した。


2. facebook公式サイトの「Share Button」ページにて正規(?) のボタンのスクリプトを入れてみた。
スクリプトの取得方法は、「Facebookの「シェアする」ボタンを自分のサイトに入れる方法 | nanapi [ナナピ]」を参考にした。
【Include the JavaScript SDK on your page once, ideally right after the opening <body> tag. 】として表示されるスクリプトは、そのとおりに
<!-- ............... facebook ............... -->  ←儂が追加した
<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&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
【プラグインを表示したい場所にプラグインのコードを配置します。】として表示されるスクリプトは
<<元になったスクリプト>>
<div class="fb-like" data-href="http://nonn634.blog.jp/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
<<変更後のスクリプト>>
<div class="fb-like" data-href="<$ArticlePermalink$>" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
書く位置は、<$ArticleToolBox$>のソーシャルボタン用タグが書かれている所になる。
また、管理画面の「外部サービス」⇒「ソシャールボタン」から【Facebook いいね】を外したほうが良い。
これにより、「シェア」ボタン内の文字がカタカナになった。ボタンが機能することは言うまでも無い。

Like Box設置関係
【Wordpress】FacebookのLikeboxが表示されない原因と対処法 | 静かな法律家のブログ
==・==・==・==・==・==・==・==・==・==・==・==・==・==・==・==・==・==・==
【追記】2015/04/05
次の記事を発見したので、最新版はそれを見た方が良いかも?
小龍茶館| ライブドアブログにFacebookのシェアボタン(日本語)を設置・追加する方法


シェアボタン - ソーシャルプラグイン
20/06/13、これにより設置した。個別記事ページ:20たけを修正している。
  <!-- Load Facebook SDK for JavaScript -->
  <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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

以前
<div class="fb-like" data-href="<$ArticlePermalink$>" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
200613o

手直し
  <!-- Your share button code -->
  <div class="fb-share-button" data-href="<$ArticlePermalink$>" data-layout="button_count"></div>
200613n

関連記事:facebookシェアボタン設置 ※facebookのシェアボタン
関連記事(「新デフォルト(3カラム)」の真似をした)
CSS:20 / トップページ:20 / 個別記事ページ:20 / カテゴリアーカイブ:20 / 月別アーカイブ:20 / カスタムJS head内:20