らいちのヒミツ基地

公然のひみつ基地です

MENU

はてなブログのシェアボタンでFacebookのシェア数を表示【2019年5月版】

2019年4月下旬以降、はてなブログに設置しているシェアボタンのうち、Facebookのシェア数表示がぐるぐるしてたり全部のページで0になっている事例が多く見られます。調査したところ、これはFacebookのAPI使用期限が切れたことに起因していました。調査内容と解決策を解説します。

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のシェア数表示を廃止にしました。

はてなブログ用シェアボタン設置記事

www.secret-base.org

「スチームパンク」テーマ向けシェアボタン設置記事

steam-punk.hatenablog.jp

どうしてもFacebookのシェア数をはてなブログで表示させたいなら、Facebookデベロッパーのサイトでアクセストークンを取得する必要があります。

解決法:Facebookでアクセストークンを取得して設定

準備

Facebookのアカウント必須。無ければ作成しておく。

Facebook for Developersのサイトにアクセス

developers.facebook.com

右上の「スタートガイド」を押す(既にアプリ作成履歴がある場合は「マイアプリ」→「新しいアプリを追加する」を押す)。

f:id:AzuLitchi:20190503004921j:plain


開発者ニュースは不要…「次へ」

f:id:AzuLitchi:20190503004953j:plain


アプリ名を思いつくまま適当につけて「Next」

f:id:AzuLitchi:20190503005033j:plain


私はロボットではありません!
コードを読解…これで合ってるのかな

f:id:AzuLitchi:20190503005059j:plain


合ってた。自分に一番当てはまる役割を問われ…まあ「開発者」でいいのかな。

f:id:AzuLitchi:20190503005121j:plain


ダッシュボードに到達。「Add Your First Product」を押す。

f:id:AzuLitchi:20190503005138j:plain


製品を追加のメニューが色々あって引くけどここは実はどれでも無く…

f:id:AzuLitchi:20190503005203j:plain


左のメニューから「設定」→「ベーシック」を選択。

f:id:AzuLitchi:20190503005225j:plain


ここの【アプリID】と【app_secret】が重要。コピーしてローカルのメモ帳に保存しておく。
app secretの表示はログインパスワードが必要。

f:id:AzuLitchi:20190503005254p:plain

アクセストークンを取得

https://graph.facebook.com/oauth/access_token?client_id=【アプリID】&client_secret=【app_secret】&grant_type=client_credentials

上記のURLに、先ほど取得した【アプリID】と【app_secret】に書き換えてからブラウザでアクセス。
(【】は不要、念のため)

これで下記のような画面が表示されたら成功。

f:id:AzuLitchi:20190503005624p:plain

コピーしてローカルのメモ帳に保存しておく。


はてなブログにシェアボタンを設置(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?f=tweets&vertical=default&q={URLEncodedPermalink}" 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">

「スチームパンク」テーマを使用しているなら以上で完了です。

blog.hatena.ne.jp

「スチームパンク」テーマ以外を使用しているなら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では・・・

wp-cocoon.com

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/

f:id:AzuLitchi:20190503014542j:plain

それではまた・・・さよならいち!・∀・)ノ