アメブロにfacebook「いいね!」を押した方の顔を表示


内藤です。

アメブロの共有ボタンでの標準装備となった「いいね!」ボタン。



こんな風に「いいね!」を押した方の顔を表示させるやり方を、僕のやっているやり方ですが紹介します

1.まずは、facebookにログインした状態で、アプリ設定をします。

アプリ設定画面はこちら

facebook DEVELOPERSページに切り替わりますので、「新しいアプリケーションを作成」をクリックします


アプリケーションの名前をつけ、画像認証を入力します。

2.次にいいねボタンの設定を行います

こちらから「いいね!」ボタンの設定をします。





取得した2つのコードを使って、アメブロに設置します。

3.アメブロへ設置

アメブロのフリープラグインに次のコードを入れていきます。

記事の中に『いいね!』を入れるために、まずはこちらをフリープラグインの最初に追加します

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

次に先ほどの1つ目のコードを追加します。

<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/all.js#xfbml=1&appId=アプリID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

アプリIDは、ご自分のアプリIDになります。
先ほどコード取得したものをコピーすればOKです。

さらに、今回は各記事の文頭に設置するために次を入れます。

<script type="text/javascript">
$(document).ready(function(){
var page_url = location.href;
var entries=$(".skinArticleHeader h1 a");
for(i=0;i<entries.length;i++){
var url=entries&#91;i&#93;;
title = entries.eq(i).text();
$("div.articleText").eq(i).before('<div class="fb-like" data-href="'+url+'" data-send="true" data-width="410" data-show-faces="true"></div>');
}});
</script>

※上記のうち次の部分に、コード取得で表示された2つめのコードが含まれています。( data-href=”‘+url+'” を付け足した状態になっています)

$("div.articleText").eq(i).before('<div class="fb-like" data-href="'+url+'" data-send="true" data-width="410" data-show-faces="true"></div>');

※アメブロではmetaタグにOGP情報を書き込むことができませんので、OGP設定はスルーしています

これで保存し、フリープラグインを使用する機能に設置すると、アメブロの記事上部に顔つきのいいね!が表示されるようになります。



顔写真が付くとどんな方が「いいね!」してくれたか分かっていいですね^^

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください