読者です 読者をやめる 読者になる 読者になる

新ECおもろ

ECのちょっと先の未来を妄想してます。

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

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

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


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

1.どう違うの?

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

それは、、、

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

ってことです。

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

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


やらないとこう。


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


やるとこうなる。

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


2.なにやればいいの?

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


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


3.具体的に教えてよ!

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


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

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を選んでます。

c.fb:adminsタグを追加する

facebookのUserIDもしくはUserNameのタグを追加します。
これがないと動きません(もしくは正常に動作しない)。

※contentの中身はtmixでの例です。必ず自分のサイトの中身に書き換えて利用しましょう。
< meta property="fb:admins" content="yasuo.yoshikawa"/>

ちなみに、fb:admins の代わりに fb:app_id を使うほうが場合によって(例えば何千ページもあるサイトで対応する場合など)はベターなんですが
こちらはちょい手間が増えるので今回は割愛します。
こちら知りたい方はfacebookページの真ん中あたりを確認してみてください。


以上の変更を加えると、ニュースフィードにいいね!の情報が流れるようになります。

ぜひいいね!ボタンだけでなく、もうひと手間、Open Graph protocolのタグ入れもしてみるといいと思います!


最後に今回のエントリを書くのに参考にさせていただいた記事もご紹介します。
分かりやすく書かれているのでもっと知りたい方は必見です。

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
OGPの事例について〜coobooの場合〜 - id:HolyGrailとid:HoryGrailの区別がつかない日記
【Facebook】Open Graph Protocol 説明:プロジェクトマネジメント10.0:ITmedia オルタナティブ・ブログ



ではでは。