20190723更新
Twitterの仕様変更のため、エゴサボタンのコードを修正しました。
Facebookのシェア数取得用API v2.8の使用期限が切れた
なんか最近Facebookのシェア数がぐるぐるしてるなと思ったら、Graph API v2.8のAvailable Until（使用期限）がApril 18, 2019 になっていました。
https://developers.facebook.com/docs/graph-api/changelog
はてなブログのカスタマイズ紹介記事でFacebookのシェア数取得に使われているAPIの多くはv.2.8の手法のようです。
手っ取り早い対処法はFacebookのシェア数表示の廃止
これまでのGETでidだけ渡す手法ではFacebookのシェア数を取得できなくなったため、私のシェアボタン設置記事ではFacebookのシェア数表示を廃止にしました。
はてなブログ用シェアボタン設置記事
「スチームパンク」テーマ向けシェアボタン設置記事
どうしてもFacebookのシェア数をはてなブログで表示させたいなら、Facebookデベロッパーのサイトでアクセストークンを取得する必要があります。
解決法：Facebookでアクセストークンを取得して設定
準備
Facebookのアカウント必須。無ければ作成しておく。
Facebook for Developersのサイトにアクセス
右上の「スタートガイド」を押す（既にアプリ作成履歴がある場合は「マイアプリ」→「新しいアプリを追加する」を押す）。
開発者ニュースは不要…「次へ」
アプリ名を思いつくまま適当につけて「Next」
私はロボットではありません！
コードを読解…これで合ってるのかな
合ってた。自分に一番当てはまる役割を問われ…まあ「開発者」でいいのかな。
ダッシュボードに到達。「Add Your First Product」を押す。
製品を追加のメニューが色々あって引くけどここは実はどれでも無く…
左のメニューから「設定」→「ベーシック」を選択。
ここの【アプリID】と【app_secret】が重要。コピーしてローカルのメモ帳に保存しておく。
app secretの表示はログインパスワードが必要。
アクセストークンを取得
https://graph.facebook.com/oauth/access_token?client_id=【アプリID】&client_secret=【app_secret】&grant_type=client_credentials
上記のURLに、先ほど取得した【アプリID】と【app_secret】に書き換えてからブラウザでアクセス。
（【】は不要、念のため）
これで下記のような画面が表示されたら成功。
コピーしてローカルのメモ帳に保存しておく。
はてなブログにシェアボタンを設置（Facebookのシェア数付）
以上、アクセストークンを取得した上で、はてなブログのダッシュボード「デザイン→カスタマイズ→記事」記事下に下記コードを追加して保存するとFacebookのシェア数付シェアボタンを設置可能になります。
「//Facebookのアクセストークンを設定」の箇所だけ、先ほど取得した access_token の値を設定してください。
<!--シェア数の取得-->
<script>
//Facebookのシェア数を取得
var FB_access_token = "●●●●●●●|●●●●●●●●●●●●●●●";//Facebookのアクセストークンを設定
function get_social_count_facebook(url, selcter) {
var FB_graph_URL = "https://graph.facebook.com/?id="+url+"&fields=og_object{engagement},engagement&access_token="+FB_access_token;
jQuery.ajax({
url:FB_graph_URL,dataType:'jsonp',
success:function(res){jQuery( selcter ).text( res.engagement.reaction_count || 0 );},
error:function(){jQuery( selcter ).text('Facebook');}
});
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
jQuery.ajax({
url:'https://b.hatena.ne.jp/entry.count?callback=?',dataType:'jsonp',data:{url:url},
success:function(res){jQuery( selcter ).text( res || 0 );},
error:function(){jQuery( selcter ).text('0');}
});
}
$(function(){
get_social_count_facebook('{Permalink}', '.facebook-count');
get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>
記事にシェアボタンの設置
下記コードをカスタマイズ→記事の記事上や記事下、あるいは両方に設定
<!--シェアボタン--> <div class="share-flat"> <p>＼この記事をシェア／</p> <div class="share-flat-inner"> <!--はてブ--> <a href="https://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-cog fa-spin"></i></span></a> <!--Facebook--> <a href="https://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-cog fa-spin"></i></span></a> <!--Twitter--> <a href="https://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a> <!--Pocket--> <a href="https://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fab fa-get-pocket"></i><br><span class="small-text">Pocket</span></a> <!--LINE--> <a href="https://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button" target="_blank"><i class="fab fa-line"></i><br><span class="small-text">LINE</span></a> </div> <!--Twitterエゴサボタン--> <a href="https://twitter.com/search?q={URLEncodedPermalink}&f=live" class="twitter-search" target="_blank"><i class="blogicon-twitter lg"></i><span class="share-text">この記事に関するツイート</span></a> </div>
headにjQueryとFont Awesomeを設置
ダッシュボードの設定→詳細→「headに要素を追加」に下記コードをペースト
<script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?version=1.12.3"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
「スチームパンク」テーマを使用しているなら以上で完了です。
「スチームパンク」テーマ以外を使用しているならcssを追加
「スチームパンク」テーマ以外を使用しているなら、
ダッシュボードの設定→カスタマイズ→デザインcss
に貼りつけてください。
.share-flat { margin-bottom: 10px; text-align: center; font-size: 8px } .share-flat p{ margin-bottom:0; } .share-flat a:hover { opacity: 0.6; } .share-flat-inner{ max-width: 600px; margin:4px auto; padding-bottom:6px; border-bottom:#ccc solid 1px; display: flex; justify-content: space-between; } .share-flat-inner a { padding: 2px 0px; display: inline-block; width: 19%; height: 40px; line-height: 20px; border-radius: 4px; font-size: 16px; text-align: center; color: #fff; text-decoration: none; } .share-flat .small-text { font-size: 10px; } .share-flat .hatena-bookmark-button { background: #00a4de; } .share-flat .twitter-button { background: #1DA1F2; } .share-flat .facebook-button { background: #4267b2; } .share-flat .pocket-button { background: #ec4359; } .share-flat .line-button { background: #00C300; } /*エゴサボタン*/ .share-flat .twitter-search { background: #1DA1F2; max-width: 600px; display: block; height: auto; border-radius: 4px; font-size: 12px; margin:6px auto 0; padding: 4px 0; line-height: 0; color: #fff; text-decoration: none; }
シェア数はどれを採用する？（参考）
Facebookのシェア数として取得できる値には様々あります。
下記のURLをブラウザで見ると・・・
https://graph.facebook.com/?id=【シェア数を取得したい記事のURL】&fields=og_object{engagement},engagement&access_token=【アクセストークン】下記のようなコードが表示されます。
{
"og_object": {
"engagement": {
"count": 52,
"social_sentence": "52 people like this."
},
"id": "○○○○○○○○○"
},
"engagement": {
"reaction_count": 42,
"comment_count": 3,
"share_count": 7,
"comment_plugin_count": 0
},
"id": "https://○○○○○○○○○"
}つまりFacebookのシェア数として
- count
- reaction_count
- comment_count
- share_count
を取得できることになります。
それぞれに意味があり、どれを採用するかは微妙なとこですが、WordPressの有名テーマCocoonでは・・・
Cocoonでは「リアクションカウント」をシェア数として採用しています。
とのことなので、ここでも揃えて reaction_count をシェア数として採用することにします。
まとめ
Facebook純正のシェアボタンを除き、アクセストークン取得の手続きしていない場合はFacebookのシェア数は正しく表示できていません。
数字表示を諦めるか、アクセストークン付きのカスタムシェアボタンに変更を。
参考にしたページ
https://shopdd.jp/blog-entry-1410.html
http://program-designer.xyz/graph-api/
https://wp-cocoon.com/facebook-share-count/
それではまた・・・さよならいち！・∀・)ノ
