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: 'https://cly7796.net/blog/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: 'https://cly7796.net/blog/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: 'https://cly7796.net/blog/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: 'https://cly7796.net/blog/sample/try-using-facebook-share-dialog/index4.html',
quote: shareText
}, function(response){});
}, false);
シェアするテキストを変更するデモページ
シェアするテキストを動的に変更することができました。
パラメータについて詳しくは公式ドキュメントをご確認ください。
【参考サイト】
- シェアダイアログ – シェア機能
- 【はてなブログ高速化3】Facebookシェアダイアログでシェアする／Facebook SDK for JavaScript – IMUZA.com
- 【完全版】これであんたもシェア名人。Facebookシェアボタンの実装方法まとめ – イソップブログ
コメントが承認されるまで時間がかかります。