フェイスブックのいいね！をサイトに追加するならこれはやるべき

以前、フェイスブックの「いいね！」ボタンをとにかく簡単にサイトに追加する方法のエントリを書いたんですが、
できれば、あともうひと手間、もうちょっとだけやった方がいいことがあります。

実はこれをやるとやらないとではいいね！をクリックした後の結果が全然違います。

ただ、、、実際ここまでやっているサイトは日本ではまだあまりなく、
それほど知られていないようなのでもったいないないなということで簡単にご紹介。

1.どう違うの？

もうひと手間をやるとやらないとでは全然違うわけですが、ではどう違うのか？

それは、、、

いいね！をしたことが、フェイスブック友達（自分）のニュースフィードに流れる

ってことです。

逆を言えば、やらないと友達（自分）のニュースフィードには流れません。
自分のウォールに流れるだけです。

いいね！しても自分のウォールにしか流れないんかよ、、、いまいちじゃん！
と思っていた方（もしかするとこう思っている方多いのかも。）
そんなことはありませんよ！！

やらないとこう。

自分のウォールにしか流れないと、はっきり言って友達は気づきません。
いいね！したひとがせっかくいいね！で友達に紹介してくれて（紹介したつもりで）いるのにぜんぜん伝わってないのです。

やるとこうなる。

これでいいね！するだけで友達にも伝えてあげられます！！

2.なにやればいいの？

ズバリ、Open Graph protocolのタグを入れればOKです！

Open Graph protocolってなに？ってひとは
Open Graph Protocolのサイトとかfacebookページ
とかid:amachangさんの
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
などを確認すれば分かると思います。

3.具体的に教えてよ！

では具体的にどうすればよいか？
実はこのコードをコピペでOK!というところまで簡単にはできませんw

なのでtmixを例にして説明します。
３ステップあります。

a.htmlタグを変える

以下のように変更します。

↓

b.meta propertyタグを追加する

以下の項目は基本必要ですのですべて追加します。

※contentの中身はtmixでの例です。必ず自分のサイトの中身に書き換えて利用しましょう。
< meta property="og:type" content="product" />
< meta property="og:title" content="HELPオリジナルラグラン長袖Tシャツ(ID: 146647)d" />
< meta property="og:image" content="http://tmix.jp/api/design/getThumbnail?item_id=146647" />
< meta property="og:url" content="http://tmix.jp/cart/detail?item_id=146647" />
< meta property="og:site_name" content="オリジナルTシャツ作るならtmix" />

og:typeだけちょっとわかりずらいですが、これはこのページがどんなタイプのページなのかを
カテゴリ分けするものです。カテゴリはfacebookのページを参照して自分のサイトに合ったものを選びます。
tmixはオリジナルTシャツを販売しているのでproductを選んでます。