自社サイトやブログに簡単にFacebook関連のボタンを配置できるFacebookソーシャルプラグイン機能。プロデューサーの久保田です。オウンドメディアをソーシャル化できるFacebookの「ソーシャルプラグイン」機能。以前の記事で、この「ソーシャルプラグイン」は全11種類あり、導入の際は5つの基本ステップを押さえましょうとご紹介しました。Button」と「コメントプラグイン」を例に挙げながら、ソーシャルプラグインのより具体的な導入方法を徹底解説します。導入する人でも、ポイントさえ押さえておけば難しいことはありません。自社サイトやブログからFacebookページへの導線として、サイトに一度訪れてくれたユーザーとの関係性継続のため、また情報の拡散ツールとしても大変便利に活用できるソーシャルプラグイン機能。導入方法まずは、最も利用頻度の高い「いいね!ボタン」の導入方法をご説明します。Buttonを表示させるコードを手に入れられます。・Width:Likeボタンの幅を設定。LayoutStyleをまとめると以下のようになります。Code」をクリックします。コードはHTML5版、XFBML版、IFRAME版、URL版の4種類あり、各プラグインでどのようなカスタマイズを選択するかによって、使用できる種類が異なります。ソーシャルプラグインを貼り付けたい場所のコード形式に合わせて適切なコードを選択しましょう。2.コードを貼りつけるコードを取得したら、次は実際に表示させる作業に入ります。ここでは「HTML5」の記述について紹介しますが、基本的な方法はHTML5版、XFBML版、IFRAME版、URL版でも同様です。下記を<body>のすぐ後に配置します(上記1.の最後に、GetCodeボタンを押して取得したコードを挿入します)。'facebook-jssdk'));</script>※アプリIDについては後述そして表示させたい場所に下記を記述します(上記1.の最後に、GetCodeボタンを押して取得したコードを挿入します)。data-colorscheme="dark"></div>以上で貼り付け作業としては終了です。Button」を利用するにあたって必須の記載事項ではありません。ページの解析ができるようになるドメインインサイトを利用するため設定することをお奨めします。Facebookの管理ツール、ドメインインサイト(https://www.facebook.com/insights/)は、Facebookページのインサイトとは異なり、サイトごとに「いいね!」などのアクションを見ることができるツールです。これを利用することで、期間中にどのくらいの「いいね!」がサイトにあったか、またFacebook上でどの程度インプレッションがあったか、さらにその中から自サイトにページビューをもたらしたかということを把握できます。これを見るためにはアプリIDが必要になるのです。技術的な話になりますが、具体的な設定手順を見ていきましょう。Facebook開発者のアプリページにいきます。https://developers.facebook.com/apps右上にある「新しいアプリを作成」をクリックすると下記が表示されます。Name:登録の際には必須ではありませんが、「いいね!」された時に表示される名称となりますので、サイトの印象が伝わる言葉を選びましょう。Namespace:アプリ一意の文字列です。IDが表示されますのでこちらをコピーし、先ほどのHTML5記述内の、「アプリID」の箇所に貼りつければ完了です。ここで表示されるアイコンについてはロゴなどを設定することをおすすめします。これにより、「いいね!」された時の下に表示されるアイコンが変わります。4.ドメインインサイトを設定するアプリIDを取得したら、ドメインインサイトを忘れずに設定しましょう。サイトのトップページに下記を記述します。/>そして、インサイト(https://www.facebook.com/insights/)ページの右上にある緑色のボタンで「ウェブサイトのインサイト」をクリック。すると、「ドメインとリンク先」という入力欄が出てきますので、自サイトのものを選択し、インサイトを取得すれば設定完了です。インサイトの閲覧権限は、ユーザー単位で追加が可能です。Users」がありますので、ここに閲覧権限を付与したいユーザー名を追加すればOKです。ドメインインサイトにつきましては、以前のこちらの記事もあわせてご参照ください。「ドメインインサイト」で自社サイトのソーシャルプラグインを解析http://smmlab.jp/?p=82665.OGPを設定する最後に、いいね!ボタンが押されたときの「表示のされ方」を最適化するためのOGPを設定します。Protocol)とは、FacebookをはじめmixiなどのSNSで使われている共通の仕様のことで、ページの内容を説明するものです。いいね!ボタンにきちんとOGPを設定しておくことで、タイムライン上の表示の調整が可能になります。Facebookのタイムライン上で表示される印象に大きく影響するものですので、きちんと設定しましょう。具体的な設定手順につきましては、以下の記事をご参照ください。次に、コメントプラグインの導入方法をご紹介します。コメントプラグインを導入すると、コメントシステムを新たに開発することなく、Facebookによる実名コメントが可能になります。1.コードを取得するまずは、コメントプラグインのページに行きます。Buttonと同じように上から順に入力していきます。Code」をクリックすると、貼り付けるプラグインコードが表示されます。2.コードを貼りつけるコードを取得したら、次は実際に表示させる作業に入ります。「HTML5」での記述についてご紹介します。下記を<body>のすぐ後に配置します(上記1.の最後に、GetCodeボタンを押して取得したコードを挿入します)。'facebook-jssdk'));</script>そして表示したい場所に以下を記述します(上記1.の最後に、GetCodeボタンを押して取得したコードを挿入します)。data-width="470"></div>以上で貼り付け作業としては終了、コメントボックスは有効になりました。※data-hrefに記述するURLは設置するページごとに変更ください。3.コメントモデレーションツールを設定するソーシャルプラグインの「コメントボックス」には、管理人がコメントを管理できるためのツール「コメントモデレーションツール」が提供されています。コメントモデレーションツールを利用することで、アプリID(*)が含まれているサイト全ページを横断してコメントの把握、返信、いいね、非表示などすべてが一元管理できるようになるため、管理がとても楽になります。(*)アプリIDを設定することで、ドメインインサイトならびに後述するコメントモデレーションに適用されるようになります。アプリIDの設定方法は、先ほどいいね!ボタンの箇所でご説明した方法で取得可能です。取得している場合は、アプリIDが表示されますので、選択してください。コメントがあった時にFacebookを開いていると、左下にダイアログが出てくるため、早い返信が可能です。(Facebookのお知らせにも「1」と表示されますので、見逃すことはありません。)ぜひ設定しましょう。コメントモデレーションツールにアクセスし、このページの右上にある設定を選択します。・禁止されているフレーズ:制限なし、Facebookの標準的制限、カスタムリストから選択。カスタムリストの場合は、カンマ区切りで禁止フレーズを指定できる。Comments:コメントの表示順を指定可能。Button」と「コメントプラグイン」を例に挙げながら、ソーシャルプラグインのより具体的な導入方法を徹底解説しました。Button」「コメントプラグイン」を含めて全11種類のソーシャルプラグインが存在します(2012年10月現在)。残りの9種類について、ここでの説明は省略しましたが、いずれも同様の手順で設置可能です。Lab.)人気記事D2Cは原価度外視の初期投資がカギ。【ジャパンダをファンとの架け橋に】損保ジャパン日本興亜が実践する、Instagramを通じた新たな顧客コミュニケーション戦略とは?最新記事UGCとは?~今知っておきたい!要注目のマーケティング・キーワード~サブスクは「顧客との継続的なつながり」が最重要。イベントレポート】D2Cは原価度外視の初期投資がカギ。TOPソーシャルメディアマーケティングラボでは、Facebookを中心に、ソーシャルメディアマーケティングに関する国内外のニュースや、弊社が実際に手がけた事例の具体的なデータ・運用のヒント、業界のオピニオンリーダーや企業マーケターへのインタビューなどをご紹介します。用語解説データ集インタビューレポートソーシャルネットの力をすべての人と企業に。ひとりひとりが個性をいかして輝いた人生を送る。そんな世界の実現に貢献します。WP-Copyprotect.。