Site icon Tips Note by TAM

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

「いいね!」ボタンは、読者からの反応が直接反映されるので
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の公式発表に十分ご注意ください。