うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

リニューアルをしたWebSiteにfacebookのいいねボタンの設置を忘れていたので設置をすることにしました。最後にfacebook Developersにアクセスしたときと比べてインターフェースが完全に変わってしまい、操作方法もかなり変わっていました。
ネットで調べたのですが、検索結果の上位に表示される情報ページは、どれもこれもわたしが導入した当時のインターフェースを元にした解説ばかりなので役立ちません。
以下、試行錯誤しながらしたfacebook bottonの設置の方法です。

わたしの備忘録として記録しているので、初めてのアプリ製作に必要なアカウントの取得等は省きます。
これがリニューアルをしたWebSite 高尾山登山携帯の電波です。

facebookのいいねボタンを作る

developersにログインします。

ヘッダーメニューのMyAppをプルダウンして、一番下の「Add a New App」を選択します。

ポップアップ画面のメニューが表示されるので、使用する環境に応じて選択します。
今回はWWWウェブサイトを選びました。

「Create New FAcebook App ID」に新しいアプリの名称を登録します。
分かりやすく、使用するドメインかその略号を冒頭に書き、半角スペースで区切ってどの様な動作をするアプリかを書くと、後々アプリがふえたときに混乱しないですみます。
「Is this a test version of another app?」はデフォルトのいいえを選択のママいじらず、下のカテゴリを選択します。
選択を済ませたら、下の「Create App ID」ボタンをクリックします。

製作の開始

画面が「Quick Start for Website」に移動します。

「Facebook SDK for JavaScriptの設定」が表示されるので、テキストエディタにJavaScritpとしてコピペして保存しておきますが、今回のイイネボタンの作成には直接には使用しません。

次にサイトURLモバイルサイトURLを入力します。
今回、利用するWebSiteはどちらもレスポンシブルWEBデザインなので同じURLを入力します。
このページの下に「Test your Facebook Integration」があり、このJavaScriptと上記のSDKと共に書き込むと、そのページにfacebookの「いいね」「シェア」の二つのボタンが表示されますが、これも今回は無視します。

その下に、「シェア」「ログイン」「ソーシャルプラグイン」「広告」の4つのステップが表示されるので、目的に応じた選択をします。
ここではいいねボタンを作るのが目的なので、ソーシャルをクリックします。

Docs > Sharing on the Webに移動します。
メニューのSocial Pluginsをクリックして移動します。
あるいは、ヘッダーメニューのDocsをクリックし、次にソーシャルプラグイン/Social Pluginsをクリックします。
様々なボタン作成のリンクが出てくるので、「いいね!ボタン」を選択します。

いいねボタンのカスタマイズ

日本語文を表示させたくなかったので「Layout」プルダウンメニューのbutton_countを選択しました。
ボタンが押された数字だけが表示されるタイプです。せっかくボタンを設置したのだから、どのくらいのユーザーが支持をしてくれているか気になるので、数字だけ表示させています。
設定を終えたら、下の「Get Code」をクリックしてコードを取得します。

facebook buttonのコードの取得

ポップアップ画面が表示され、上下二段のテキストエリアにソースが表示されます。

上段のソース。your IDにこのアプリのIDが自動で挿入されます。
facebookにはこう書かれています。
「Include the JavaScript SDK on your page once, ideally right after the opening tag.」


<div id="fb-root"></div>
<script>(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#xfbml=1&appId=your ID&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

下段のソース。
facebookにはこう書かれています。
「プラグインを表示したい場所にプラグインのコードを配置します。」
your URLに、該当のページのURLを書き込みます。


<div class="fb-like" data-href="your URL" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

facebook buttonのコードの書き込み

上段の<div id=”fb-root”></div>で始まるJavaScriptのコードは、bodyタグの直下に書き込みます。

下段の<div class=”fb-like”で始まるコードは、「いいね」ボタンを配置したいページ上の任意の位置に書き込みます。
ボタンはデザインや表示法を選べるだけで無く、表示する場所も選べるので、より訪問してくれたユーザーに訴求する位置に配置できます。

以上で作業は終了です。

3月 5th, 2015

Posted In: Facebook