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

Monday May 20 2019

4413 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}まで指定して記述しなければ内容を取得できない）