サイト制作に関するメモ書き

HOME > JavaScript > Facebookのシェアダイアログを使ってみる

Facebookのシェアダイアログを使ってみる

Facebookのシェアダイアログを使って、シェアボタンのカスタマイズを行ってみます。

Facebookアプリの作成

シェアダイアログを使ってシェアボタンを設置する際、FacebookのアプリIDが必要になるので、まずはアプリIDを取得してみます。
Facebook Developersのアカウントにログイン後、Facebook Developerの右上から「新しいアプリを追加」を選択します。

表示名を入力して、「アプリIDを作成してください」をクリックします。

Facebookアプリの管理画面が表示されるので、左メニューの設定を選択して、設定画面下部にあるプラットフォームを追加をクリックします。

今回はサイトで使用するのでウェブサイトを選択します。

ウェブサイト項目が追加されるので、シェアボタンを設置するサイトのURLを入力します。
入力後、右下の変更を保存をクリックします。

これで設定が完了しました。
アプリIDはシェアボタン設置時に使用するので、どこかにメモしておいてください。

次にアプリの公開を行っておきます。
この設定を行わないと自分以外のアカウントでアプリが使用できませんが、実際にはアプリの開発が完了してから公開にしてください。

左メニューのアプリレビューを選択して、公開の設定を切り替えます。

アプリを公開する前にカテゴリの設定が必要になるので、アプリに合ったカテゴリを選択します。
選択後、確認ボタンをクリックします。

公開設定が完了しました。

これでFacebook Developersでの設定は一通り完了です。
 

シェアボタンの設置

シェアダイアログを使って、実際にシェアボタンを設置してみます。

<body>の直後に以下を記述します。

HTML

<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'アプリID',
      xfbml      : true,
      version    : 'v2.10'
    });
    FB.AppEvents.logPageView();
  };

  (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/ja_JP/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

アプリIDには先ほどのアプリIDを入れてください。

次にシェアボタンで使用するボタンを設置します。

HTML

<a href="#" id="fb-btn">シェアボタン</a>

最後に今設置したボタンにクリックイベントを追加します。

JavaScript

document.getElementById('fb-btn').addEventListener('click', function(e) {
	e.preventDefault();
	FB.ui({
		method: 'share',
		href: 'http://cly7796.net/wp/sample/try-using-facebook-share-dialog/'
	}, function(response){});
}, false);

これでシェアダイアログを使ったシェアボタンの設定ができました。
シェアダイアログを使ったシェアボタンのデモページ

シェアボタンをクリックすると、以下のように表示されます。

実際に投稿してみると、以下のようにアプリ名が表示されます。

 

シェアボタンのカスタマイズ

シェア時の設定にパラメータを追加することで、表示する値を追加したりすることができます。
ハッシュタグを追加する場合、hashtagを使用します。

JavaScript

document.getElementById('fb-btn').addEventListener('click', function(e) {
	e.preventDefault();
	FB.ui({
		method: 'share',
		href: 'http://cly7796.net/wp/sample/try-using-facebook-share-dialog/index2.html',
		hashtag: '#cly7796'
	}, function(response){});
}, false);

ハッシュタグを追加するデモページ
以下のようにハッシュタグが追加されました。

quoteを使用すると、シェアするテキストを追加できます。

JavaScript

document.getElementById('fb-btn').addEventListener('click', function(e) {
	e.preventDefault();
	FB.ui({
		method: 'share',
		href: 'http://cly7796.net/wp/sample/try-using-facebook-share-dialog/index3.html',
		quote: 'シェアするテキスト'
	}, function(response){});
}, false);

シェアするテキスト追加するデモページ
ユーザーが入力する内容とは別に、シェアするテキストが追加されました。

シェアボタンの設定をJavaScriptで行っているので、シェアするテキストなどを動的に変更することもできます。
例として、入力した値をシェアするテキストにしてみます。

HTML

<input type="text" id="shareText" />
<a href="#" id="fb-btn">シェアボタン</a>

JavaScript

document.getElementById('fb-btn').addEventListener('click', function(e) {
	e.preventDefault();

	var shareText = document.getElementById('shareText').value;
	FB.ui({
		method: 'share',
		href: 'http://cly7796.net/wp/sample/try-using-facebook-share-dialog/index4.html',
		quote: shareText
	}, function(response){});
}, false);

シェアするテキストを変更するデモページ
シェアするテキストを動的に変更することができました。

パラメータについて詳しくは公式ドキュメントをご確認ください。
 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP