• コーディング ファクトリーHOME
  • Coding Methodology
  • 第35回 Facebookソーシャルプラグイン「いいね!」ボタンの設置

コーディングメソドロジー

第35回 Facebookソーシャルプラグイン「いいね!」ボタンの設置

Facebookの「いいね!」ボタンを使うと、Facebook以外のWebサイトの情報をFacebook内の自分のウォール、友達や知人のニュースフィードに表示させることができるため、幅広い情報発信の手段として活用されています。今回は効果的な「いいね!」ボタンの設置方法をご紹介します。

1.「いいね!」ボタン設置用のコードの入手。

1.「いいね!」ボタン設置用のコードの入手。

Facebook開発者サイト(http://developers.facebook.com/docs/reference/plugins/like/
の【Step 1 - Get Like Button Code】で各項目を設定し「Get Code」を押すと「Like Buttonのプラグインコード」が表示される(図1)。
これをページ内の「いいね!」ボタンを表示したい場所に貼り付ける。
ボタンに表示される言語の設定箇所は図1-②の部分になる。
英 語「Like」はen_US 、日本語「いいね!」はja_JPを設定する。

  • ■ソーシャルプラグインの設置用コードには3つの種類『html5』『iframe』『XFBML』があるので、
    目的により使い分ける(図1-①)。
    XFBMLを使う場合は「JavaScript SDK」の利用が必要となる。
  • ■JavaScript SDKの詳細については以下のサイトを参照。
    URL:http://developers.facebook.com/docs/reference/javascript/

2.OGP(Open Graph Protocol)タグの追加がポイント。

2.OGP(Open Graph Protocol)タグの追加がポイント。

OGPタグを設定すると「いいね!」を押した人のウォールと友達のニュースフィードにもサイト情報が表示されるようになる。ここで重要なのが、サイト管理者がウォールでの表示のされかた(タイトルやサムネイル画像など)も指定できるということ。【Step 2 - Get Open Graph Tags】で各項目に、表示させたい内容を設定する(図2)。このタグをページのメタ情報に追加する。また、ここで生成したタグには下記の記述がないため、次の2つのタグも追記する。

<meta property="fb:app_id" content="アプリケーションID" />

<meta property="og:description" content="ページの紹介文" />

OGPタグを使用するページには、html要素のxmlns属性の追加設定が必要である。具体的には、ページの先頭に次のコードを記入すればよい。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"xmlns:og="http://ogp.me/ns#">

※図2-①、Adminに入れる管理者アカウントは、自分のFacebookプロフィールページURLの最後の部分(id=に続く15桁の数字)で確認できる。

■OGPがどのように設定されているか確認するには「URLリンター」を使う。
http://developers.facebook.com/tools/lint/
上記URLで「いいね!」ボタンを実装したページのURLを入力すると、OGPのタグが不足している場合は画面上に注意メッセージが表示される。

3.アプリケーションIDを登録する。

3.アプリケーションIDを登録する。

Create an App ページ(http://developers.facebook.com/setup)に「いいね!」ボタンを設置したいページのサイト名とサイトURLを入力すると、15桁のアプリケーションIDが発行される(左図)。
このアプリケーションIDは、「いいね!」ボタン設置用コード(図1-③)とOGPタグに必要となる。

■Facebookソーシャルプラグインを初めて使う場合"Facebook開発者アプリ"の許可を求められる。
開発者登録URL:https://www.facebook.com/developers/で画面の指示にしたがって、許可をしておく。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム