facebookOGPをV2.9以降に対応させる

549 0

先日、クライアント様より「以前納品したwebページのソーシャルカウントが0になった」との連絡を受け対応した時のお話。
最近facebookOGP APIが強制的に2.9xへ引き上げられたのですが、2.9以前の形式を使用しているとシェアカウントが取れなくなっています。(以前から何度かこういったことがありましたね…)

弊社では『ソーシャルボタンもサイトやページのデザインに合わせたい』という理由から、いつもオリジナルのボタンを作成しています。その為、APIからカウント数を取得してページへ出力するという方式を取っています。

facebookはいいね・シェアのカウントを外部からも取得できるようにAPIを公開していますが、そのデータ形式が度々変更されます。 今回もそれによって数が取得できなくなっていました。

以前までの方法

function getSocialCounts(url){
    var pageURL = url;
    url = null;
    $.ajax({
        url:'https://graph.facebook.com/',
        dataType:'jsonp',
        data:{
            id: pageURL,
        }
    }).done(function(response){
        var count_f = (response !== 0 ) ? response.share.share_count : 0;
        $(selector).text( count_f ); // 数を出力
    }
}

11行目のshareオブジェクトはv2.9以降では廃止になっており、エラーになります。

その為、変更になった新しいオブジェクトへ指定し直す必要があります。

新しい方法

function getSocialCounts(url){
    var pageURL = url;
    url = null;
    $.ajax({
        url:'https://graph.facebook.com/',
        dataType:'jsonp',
        data:{
            id: pageURL,
            fields: 'og_object{engagement}'
         }
     }).done(function(response){
         var count_f = (response !== 0 ) ? response.og_object.engagement.count : 0;
         $(selector).text( count_f ); // 数を出力
     }
}

ポイントは9行目と12行目。

v2.9では実はいいね・シェアカウントの数を直接取得できなくなっています。 以前までの方式でAPIへアクセスするとカウント数に関連するオブジェクトが取得できません。 そのため、fieldsを指定し、カウント数が格納されているog_objectオブジェクトを取得できるようにします。
(※engagementはog_object内のプロパティで、ここにシェアカウントが格納されています。ただし、og_object{engagement}まで指定して記述しなければ内容を取得できない

facebook Graph API「ネストされたリクエスト」 https://developers.facebook.com/docs/graph-api/advanced#fieldexpansion

このように指定することでまたカウント数を表示できるようになりました。

所感

現在のwebサイトでは何かしら外部APIからデータを取得するのが一般的になっています。
当然その外部APIは、提供元が定期的に更新しているため、度々仕様変更があります。 その為、現在ではサイトのメンテナンスも定期的に行うことが必須となっていますね。

AjaxJSONAPI

Comments

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

認証コード * Time limit is exhausted. Please reload CAPTCHA.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください