Facebookページに複数の「いいね！」ボタンを設置したい！

JavaScript

「いいね！」ボタンは、読者からの反応が直接反映されるので
1つだけではなく複数設置したい場面があると思います。
（人気商品を知りたい、ランキングを作りたいなど）

（例）プラザ/PLAZA（ルミネ有楽町店） ※公開終了 →
※赤で囲んだ部分が「いいね！」ボタン。
　

　

ところが、 Facebookページ 1ページに対し、
「いいね！」ボタンは 1つしか置くことができません。

それでもやっぱり複数の「いいね！」ボタンを置きたかったので、
独自に考えたてみた複数の「いいね！」ボタンを設置する
2つの設置例をご紹介いたします。

※非常に無理矢理感のある方法ですので、推奨はいたしません。
　Facebookの仕様変更等にも十分ご注意ください。
　

●言及している商品ページなどへ直接リンク

（例）
・ASCII.jp Web Professional 「書籍紹介」　※公開終了

「いいね！」ボタンから、
各書籍の詳細情報のページへリンクしています。

▼「いいね！」ボタンのソース

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.test.co.jp%2F&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=250243191670917" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

※「http%3A%2F%2Fwww.test.co.jp」を、URLエンコードをしたリンク先のURLに書き替える。
※OGPはリンク先のページで設定してください。
　

●言及している商品ページなどがない場合、リンク専用のリダイレクトページを作成する。

（例）リンク専用のリダイレクトページを作成
・ベルメゾン（bellemaison）「CM公開中」　※公開終了

　

▼「いいね！」ボタンのソース

<iframe src="//www.facebook.com/plugins/like.php?href=【リダイレクトページのURL】%2F&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=250243191670917" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>

▼リダイレクトページ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="000000000000000" />
<meta property="og:url" content="このリダイレクトページのURL" />
<meta property="og:image" content="OGP用サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="説明文">
<title>ページタイトル</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function next(){
location.replace("リンク元のFacebookページのURL");
}
//end -->
</SCRIPT>
</head>

<body onLoad="setTimeout('next()',0000)">
</body>
</html>

※このページのOGPがウォールに反映されます。
※『000000000000000』はアプリIDに書き替えてださい。
　

＜注意＞
複数の「いいね！」ボタンを設定する場合、『リンク元のFacebookページのURL』が同じだと、うまく動作しないことがまれにありました。
その場合は、『リンク元のFacebookページのURL#1』など、連番を付けてください。
（これは URLをユニークにするための措置で、アンカーリンクではありません。）

【おまけ】失敗例

●「いいね！」を押された際、jQueryでMETAタグを書き替える。
→反映されない。

動作確認をしてみましたが、METAタグを書き替えることはできるのですが、OGPは反映されませんでした。
　

　

こちらでご紹介しました情報は、2011年11月21日現在のものです。仕様変更によりサイズ等が変わることも考えられますので、今後のFacebookの公式発表に十分ご注意ください。