ajike switch

Facebookの「いいね!」ボタンを複数配置する方法

今日は一つのページに複数の「いいね!」ボタンを配置する方法について書きたいと思います。

いいねボタンを複数配置できれば投票サイト写真評価サイト商品紹介サイトなどが作れますね。基本的に「いいね!」ボタンは1URLにつき、1つのボタン発行できます。
しかし、ダミーページを作ることで複数作成する事は可能です。
仮に選挙投票サイト(http://senkyo-sample.com)をつくるとしましょう。

[ファイル構成]

index.html   選挙員一覧ページ ←こちらに投票用の「いいね!」ボタンをたくさん配置。

dummy1.html ダミーページ①   ←選挙員1に対するOGP情報を記述します。

dummy2.html ダミーページ② ←選挙員2に対するOGP情報を記述します。

dummy3.html, dummy4.html …

[流れ]
①投票者が選挙一覧ページで選挙員2に「いいね!」する。
②選挙員2の「いいね!」ボタンはdummy2.htmlに記述しているOGP情報を読み取り、それをウォールに流す。
③押される「いいね!」ボタンによって、ウォールへの投稿内容が切り替えられる。

[ファイル記述内容]
index.html

<!--dummy1.htmlに対応するボタン-->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fsenkyo-sample.com%2Fdummy1.html&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=451203864949735" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

<!--dummy2.htmlに対応するボタン-->
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fsenkyo-sample.com%2Fdummy2.html&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=light&amp;action=like&amp;height=80&amp;appId=451203864949735" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

dummy1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:title" content="選挙サンプル.com" />
<meta property="og:type" content="website" />
<meta property="og:description" content="このたび○○に立候補した橋本です" />
<meta property="og:image" content="http://senkyo-sample.com/img/dummy1.jpg" />
<meta property="og:url" content="http://senkyo-sample.com/dummy1.html" />
<!--下記コードでトップページにリダイレクトするように設定-->
<meta http-equiv="refresh" content="0; url=http://senkyo-sample.com/" />
<title></title>
</head>
<body>
</body>
</html>

dummy2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:title" content="選挙サンプル.com" />
<meta property="og:type" content="website" />
<meta property="og:description" content="こんにちは!岩崎です!!" />
<meta property="og:image" content="http://senkyo-sample.com/img/dummy1.jpg" />
<meta property="og:url" content="http://senkyo-sample.com/dummy2.html" />
<!--下記コードでトップページにリダイレクトするように設定-->
<meta http-equiv="refresh" content="0; url=http://senkyo-sample.com/" />
<title></title>
</head>
<body>
</body>
</html>

dummy3.html, dummy4.html …..とウォールに流したい内容を書いていきます。

しかし、このままでは他のユーザーがウォール上のリンクをクリックするとダミーページに飛んでしまいますね。

従って以下の行を忘れないで記述して下さい。

<meta http-equiv="refresh" content="0; url=http://senkyo-sample.com/" />

ダミーページにアクセスした場合、リフレッシュをかけてトップページに飛ばすように設定します。

これで完了です。

しかし、「いいね!」ボタンが100個とかになってくるとダミーページを作るのも一苦労ですね。わたし肩凝ります。
わたしはその場合PHPを使って対応してます。その方法についてもまた次回書こうと思います。

では!!

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×