今日は一つのページに複数の「いいね！」ボタンを配置する方法について書きたいと思います。
いいねボタンを複数配置できれば投票サイトや写真評価サイト、商品紹介サイトなどが作れますね。基本的に「いいね！」ボタンは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&send=false&layout=standard&width=450&show_faces=true&font&colorscheme=light&action=like&height=80&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&send=false&layout=standard&width=450&show_faces=true&font&colorscheme=light&action=like&height=80&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を使って対応してます。その方法についてもまた次回書こうと思います。
では!!
