Share DialogでFacebookいいねをカスタマイズする

Share DialogでFacebookいいねをカスタマイズする

初めまして、開発部でWebフロント部分を作っている木村です。
D2Cソリューションズのフロント制作は、1ページのLPから、Webサービスなど幅広い種類の案件があります。

その中でもFacebookやTwitterなど外部SNSと連携させる仕組みは、ほぼ毎回必要になっています。
今回は、sharer.phpを使わない「いいね」ボタンのカスタマイズについてご紹介します。

「いいね」ボタンをカスタマイズしたい

Webページのデザインに合わせた「いいね」ボタンを置くには、Facebookのsharer.phpを使って実装するケースが多いと思います。

sharer.phpでは、ページがシェアされたときに、「◯◯のリンクがシェアされました」というメッセージがタイムラインに流れます。
この文言を、もっと気軽な「いいね!」に変えたいという要望をいただくことがあります。

この場合には、sharer.phpではなくfacebook appを使ってカスタマイズすることになります。

facebook app:Share Dialogを使った実装方法

Share Dialogを使うにはfacebook for developersからアプリの登録が必要です。

「My Apps」から新しいアプリを作成し、公開するサイトのドメインなどを登録していきます。

facebook appの管理画面
このとき、appに登録したドメインと、ボタンが押されたページのドメインが違うとエラーになってしまうので気をつけてください!
また、localhostを設定するとエラーになります。(おそらくFacebookのクローラーが到達できないため・・?)

アプリ側の設定が終わったら、sdk.jsを読み込みます。
※sdk.jsのバージョンは2016年3月現在のものです。


  window.fbAsyncInit = function() {
    FB.init({
      appId      : 任意のfacebookappID,
      xfbml      : true,
      version    : 'v2.5'
    });
  };

  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

Share DialogのAPIでページの拡散が可能となり、action_type: 'og.links';を指定することで「いいね!」の形式になります。
いいねさせたいURLは、action_propertiesのobjectに指定してください。


function likeFacebook(){
  var url = location.href;
  FB.ui({
    method: 'share_open_graph',
    action_type: 'og.likes',
    action_properties: JSON.stringify({
      object: url //ここに拡散させたいURL,
    })
  // }, function(response){
  //   コールバック処理
  });  
};

あとはこの関数を、独自に作ったいいねボタンを押したときに呼び出すようにします。


  document.getElementById("button").addEventListener("click",function(){
    likeFacebook();
  },false);

ここでファイルをサーバにアップし、ボタンを押してみると、

アプリが設定されていません: This app is still in development mode, and you don’t have access to it. Switch to a registered test user or ask an app admin for permissions.

というエラーが返ってくる場合があります。
その場合は、もう一度Facebookアプリの管理画面に戻り、「App Review」から公開設定を行ってください。

img2
赤い枠のチェックをYesにします。

ポップアップが表示されたら実装完了です!

img3

さいごに

注意することは、この方法ではすでに「いいね!」されている状態で、再びボタンを押しても「いいね!」の取り消しができません。

また、この実装でうまく動かないときは、上記にあったappのドメインと設置したページのドメインが一緒になっているか、設置したページにベーシック認証がかかっていないかを確認してみてくださいね。

外部サービスのAPIは仕様が変わり続けていくため、なかなか追いかけ続けるのが大変ですが、どうぞよいコーディングライフをお過ごし下さい!

D2Cソリューションズでは下記の職種について募集中です。
興味をもたれた方は、ぜひ下記の求人情報をご覧ください。
Webデザイナー
フロントエンドエンジニア
「radiko」開発プロジェクトマネージャー
*2016年2月現在の情報です。
*ご覧にいただいた時点で募集が終了していた場合にはご容赦ください。


*株式会社D2Cソリューションズは2016年10月1日に株式会社D2C dotへと社名を変更しました。