Facebookの「Like」ボタンをサイトに加える方法

無料で資料をダウンロード

SEOサービスのご案内
専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。

無料ダウンロードする　＞＞

先月、フェイスブックはコンテンツをフェイスブックにもたらし、さらに細かいレベルでフェイスブックがウェブに進出する役目を持つ「オープングラフ」（新しいフェイスブックプラットフォーム）の告知を行った。告知が行われて以来、次の2つの疑問が頻繁に問われている:

1. この機能をウェブサイトで利用するべきか？
2. このプラットフォームをウェブサイトに掲載するにはどうすればいいのだろうか？

幸い、このエントリを読めば上述の2つの疑問の答えが分かる。質問1: 興味深く、ソーシャルなコンテンツを持っているなら、もしくはプライバシーに関する懸念を持っていないなら、この新しい機能をオリジナルのコンテンツに加えてもらいたい。

しかし、すべてのページに手当たり次第にこの機能を導入することは勧められない。興味を持ってもらえそうなコンテンツを選ぼう。問い合わせページにも導入するべきだろうか？その必要はない。週に一度投稿するユニークでクリエイティブなエントリに掲載するべきだろうか？掲載するべきだ。疑問2に対する答えはとても単純だ。次に、フェイスブックの“いいね！”コードを個別のページ/エントリに実装する各種の方法を紹介していく。

「単発」用の実装

「いいね！」ボタンを単一のエントリまたはページに掲載したい場合は、この方法を利用しよう。ページ/エントリのHTMLに簡単にコードスニペットを挿入することが可能であり、するとすぐに“いいね！”ボタンが表示される。この標準的なコードはフェイスブック・フォー・ウェブサイトページに掲載されている。

しかし ? これだけではない。標準的なボタンを設置するだけでなく、ドロップダウンボタンのフォント、プロフィールのイメージ、言い回し、幅と配色を調整することも可能だ。カスタマイズ用の選択肢の中で最も面白いのは、動詞だ。大半のユーザーは“いいね！”ボタンと呼んでいるが、このボタンはユーザーが何かを“好き”または“勧める”と言っているのだ。

記事にオリジナリティを少し与えたいなら、追加のメタデータを加えて、ユーザーの掲示板に表示される内容をカスタマイズしよう。以下の属性をカスタマイズし、適切なサイトの名前および付随するイメージを選びつつ、ユーザーが好むアイテムの名前を定めることが出来る。注記: この作業を実施するためには、サイトをフェイスブック・オープングラフ・プロトコルに加える必要がある。このページに実装することが可能なサンプルのコードを以下に掲載する:

og:title – これは記事の名前がフェイスブックに表示される際のタイトルタグを上書きする。

og:site_name – これは“いいね！”された記事と併せて表示されるサイトの名前である。

og:image – これはユーザーが“いいね！”するページに対して適切なイメージを示す。

このエントリのページのメタデータは以下のようになる:

<meta property=”og:title” content=”How To Add Facebook Like Button”/>

<meta property=”og:site_name” content=”Search Engine Land”/>

<meta property=”og:image” content=”https://searchengineland.com/images/20/logo.png”/>

すると以下のように表示される（註：この記事では英語になっていますが日本語でも表示されます）:

Facebook user likes “How To Add Facebook Like Button” from Search Engine Land （ロゴつき）

この機能は導入されてからまだ日が浅く、様々なバグや問題が発生しているが、困ったらフェイスブックのディベロッパーフォーラムを参考にしよう。きっと役に立つだろう。

サイトワイドなプラットフォームの実装

ブログプラットフォームのすべてのページにコードを挿入したいなら、時間と労力を節約することが可能な様々なプラグインが開発されているので利用しよう。利用しているブログソフトウェアに用意されているツールを選び、ユーザーが“いいね！”することが出来るように、手順に従うか、プラグインを加えよう。

ワードプレス

現在、最も評価が高いプラグインはfblikebuttonだ。このプラグインは、ページおよびホームページに加えるだけでなく、コンテンツの上/下等、表示する位置に対する便利な実装オプションを用意している。また、ワードプレスのプラグインマーケットでは、様々なlikeボタンが開発されている。

タイプパッド

シックスアパートは簡単に“いいね！”ウィジェットをタイプパッドのテンプレートに加える方法を編み出している。エントリごとに表示する選択肢も用意されており、また上級者向けのテンプレート用のサポートも提供されている。

ブロガー

フェイスブックの“いいね！”ボタンがグーグルのブロガープラットフォームでも開発されている。このエントリには、実装およびカスタマイゼーションを行う手順が詳しく掲載されている。

自分（そしてオーディエンス）に合う方法を探し出し、上述の情報をフェイスブックでの存在感を高めるために役立てよう。

この記事の中で述べられている意見はゲストライターの意見であり、必ずしもサーチ・エンジン・ランドを代表しているわけではない。

この記事は、Search Engine Landに掲載された「How To Put The Facebook “Like” Button On A Site」を翻訳した内容です。

This article on Columns: Let’s Get Social first appeared on Search Engine Land.
c Copyright Third Door Media, Inc. Republished with Permission.

ワードプレスのプラグインまで出ているのは知りませんでした。SEO Japanでも近日中に入れてみたいと思います。しかし米国での驚異的な導入数（確か一週間で5万サイトが入れたとか）や、既存のリンクベースのランキングアルゴリズムの効果が疑問視されつつある現状を考えると、このボタンの影響力というのは色々な意味で計り知れない可能性を占めているといえるのではないでしょうか。Googleはイヤでしょうが。。。登録ユーザーが対象な分、スパムの心配も最小限でしょうしGoogleには同じことできないですしね。1年後の導入＆利用状況に注目です。日本でFacebookが流行らなかった場合、というか流行ったとしてもMixiにも同じことやってほしい気もします。パクリといわれようが良いことだと思いますし。 — SEO Japan