1. Home
  2. Webデザイン
  3. html+CSS+javascript
  4. Facebookのいいね・シェア数が表示されなくなったので修正しました!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

Leawo Blu-rayコピーでブルーレイをISOファイルに簡単バックアップ!

今回紹介するのは全世界で1,000万以上のユーザーがいるBlu-rayコピーソフトであるLeawo Blu-rayコピーです。Leawo Blu-rayコピーを使用すると、簡単にBlu-rayディスクのバ...

激安特価商品情報サイトの激安ShopDDを作りました!

激安特価商品情報サイトの激安ShopDDを作りました!

激安情報についてはこのブログで度々紹介していたのですが、この度激安・特価情報を専門に取り扱う新ブログの激安ShopDD(Gekiyasu ShopDD)を作成しました。こちらのブログ...

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

LEAWO製品が最大50%オフ!Leawo新年応援スペシャルセールを実施中!

現在LEAWO製品が最大50%オフになる新年応援スペシャルキャンペーンを実施しています。キャンペーン期間は2020年2月3日(水)までとなっています。また、SNSでLeawoを応援して...

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

安物バッテリーは危険!?またまたMoto Zのバッテリーを自分で交換した話!

3,4ヶ月前のことになりますが、MOTOROLA Moto Zのバッテリーが死んでバッテリーを交換する手順の記事を書きました。当時は充電ケーブルを抜くと5分もせずに落ちるという状...

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

1/4ネジの三脚ボール ヘッドブラケットを買ってみた!

先日の記事で199円のミニ三脚についてのレビューにおいて、三脚上部の角度などが変更できればもっと自由度が上がって使いやすくなるということを書きました。そこで今回は...

無料でもらえるGoogle Nest miniが届いたのでレビュー!

無料でもらえるGoogle Nest miniが届いたのでレビュー!

先日の記事のGoogle Nest Miniが無料で手に入る!YouTube PremiumとGoogle Play Music会員が対象!でも紹介したGoogle Nest miniが届いたのでレビューを書きたいと思います...

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

スマート体組成計&体重計が792円!スマホ連動可能でソーラー充電で使える!

Bluetoothでスマホ連動可能なBeyeahスマート体組成計&体重計が792円の超激安で販売中です。スマホとBluetoothで連動させることで、体重や体水分量・BMI・筋肉量・推定骨量...

Fire TV StickでIEEE802.11acが認識されない問題!

Fire TV StickでIEEE802.11acが認識されない問題!

先日のレビューも書いたFire TV Stickですが、実は一つ気になることがあったので同じようなことで困っている人の役に立てばと思い記事で残しておきたいと思います。それはF...

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

超電磁砲・禁書目録などとあるシリーズの小説・漫画が最大80%オフのキャンペーン!

現在BOOK★WALKERでは、1月10日よりTVアニメが放映開始となる「とある科学の超電磁砲T」を記念して、とあるシリーズが最大80%オフのキャンペーンを実施しています。とある科...

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

完全防水IPX7&360度のTribit StormBox bluetoothスピーカーを使ってみた!

今回は完全防水IPX7に対応したBluetoothスピーカーであるTribit StormBox bluetoothスピーカー BTS30を紹介したいと思います。お風呂場などで使用可能なIPX7に対応しており...

NetaGear RSS News

Now Loading

Article

Facebookのいいね・シェア数が表示されなくなったので修正しました!

Webデザイン > html+CSS+javascript 
facebook_graph_api_000.png

先日から記事のFacebookのいいね数(シェア数)の自作ボタンの数が表示されなくなっていることに気がつきました。最初は一時的なサーバーの問題かと思ったのですが、数日経っても表示されないので調べてみたらなんとFacebook Graph API v2.8が2019年4月18日までだったようです。それに伴いこのAPIのバージョンを使っているブログではシェア数などが表示されなくなりました。

Facebook Graph API v2.9以降ではアクセストークンを取得しないと、シェア数の取得ができなくなっているため、今までより少し面倒になっています。というわけで、今回は最新のFacebookでのブログの記事のシェア数の取得方法について書きたいと思います。

Facebook for Developersに登録してシェア数を取得しよう!


facebook_graph_api_001.png
1 Facebook for Developersのサイトにアクセスします。



facebook_graph_api_002.png
2 右上のスタートガイドを押して、「次へ」を押します。すでにFacebookアカウントを持っていればそれを使ってFacebook for Developersに登録できます。

facebook_graph_api_003.png
3 アプリ名とメールアドレスを入力して「次へ」を押します。

facebook_graph_api_004.png
4 「自分に一番当てはまる役割は?」と聞かれるので今回の場合は「開発者」を選択します。

facebook_graph_api_005.png
5 「Add Your First Product」を押します。

facebook_graph_api_006.png
6 「製品を追加」から「Facebookログイン」を選びます。

facebook_graph_api_007.png
7 。アプリのプラットフォームを聞かれるので「ウェブ」を選択します。

facebook_graph_api_008.png
8 ウェブサイトのURLを聞かれるので、自分のサイトのURLを入力して「Save」を押します。この後ステップ5までありますが、適当に読んで飛ばしてもOKです。

facebook_graph_api_011.png
9 左にある「プロダクト」→「Facebookログイン」→「設定」を開きます。「有効なOAuthリダイレクトURI」に自分のサイトのURLを指定して「設定を保存」を押します。

facebook_graph_api_012.png
10 左上にある「設定」→「ベーシック」を開きます。「アプリドメイン」「プライバシーポリシーのURL」を指定します。カテゴリは適当に「エンターテイメント」にして「設定を保存」を押します。

facebook_graph_api_013.png
11 右上にある「ステータス:開発中」の隣りにある「オフ」を押してアプリを公開状態にします。

facebook_graph_api_014.png
12 下記URLの{アプリID}と{自分のサイトのURL}を書き換えて、ブラウザでアクセスすると上記のような表示になるのでログインします。

https://www.facebook.com/dialog/oauth?client_id={アプリID}&redirect_uri={自分のサイトのURL}

Access Token

13 続いてアクセストークンを取得するためのURLにアクセスします。{アプリID}、{app_secret}は手順10のページで確認できます。

https://graph.facebook.com/oauth/access_token?client_id={アプリID}&client_secret={app_secret}&grant_type=client_credentials
正しくアクセスできれば下記のようなjsonが返ってくるのでaccess_tokenをメモしておきます。このアクセストークンはシェア数を取得する際に使います。

{"access_token":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","token_type":"bearer"}

シェア数の取得


Share/Like

あとは取得したアクセストークンを使って、上記のようなURLで記事のシェア数を取得してきます。

https://graph.facebook.com/?id={シェア数を取得したい記事のURL}&fields=og_object{engagement},engagement&access_token={アクセストークン}
正常に取得できれば下のようなjsonが返ってきます。

{
"og_object": {
"engagement": {
"count": 128,
"social_sentence": "128 people like this."
},
"id": "118816328283759"
},
"engagement": {
"reaction_count": 63,
"comment_count": 42,
"share_count": 23,
"comment_plugin_count": 0
},
"id": "http://shopdd.jp/blog-entry-1120.html"
}

以前のFacebook Graph API v2.8の時のjson形式から少し変更されているようです。なので既存のjavascriptコードを適宜を書き換えてください。

今回の個人的感想




今回はFacebookのシェア数を取得するためのFacebook Graph APIの記事でした。私と同じようにFacebookのシェア数ボタンを自作している人は同じような影響を受けている可能性が高いですね。以前まではこんな面倒な手順を踏まなくても簡単に取得できていたのですが、Facebook Graph API v2.9以降では結構手間がかかりましたね。今までは誰でも値を取得できていたのですが、登録とOAuthでサイトを認証してアクセストークンの取得が必要となったのでだいぶ大きな変更です。とりあえずこれで今までどおりにシェア数が表示できるようになったので良かったです。

面倒とは言え、Facebookのシェア数だけ表示されてないのはおかしいので、今回もしっかり変更に対応しました。ついでに先日終了したGoogle+へのソーシャルリンクを外して、SNSボタンのデザインも変更しました。なにげにこのデザインテンプレートを作ってから5年近く経っているので、所々古いと感じる部分もあったりしていますが、こういう機会がないと変えていかないので良かったかもしれません。今までと比べてかなりスッキリした感じになりました。記事を共有したいときなどにぜひ活用してください。

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...