Facebookの「いいね！」ボタンにget処理を埋め込み複数配置する方法

コーディング
2013.07.25
by

Facebook ogp コーディングシステムソーシャルボタン

こんにちは、先日「いいね！」ボタンを複数配置する方法をご紹介致しました。

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

今回さらに複数の「いいね！」ボタン(100個)などを配置する方法をご紹介致します。

前回の方法だとOGPを記述する為のダミーファイルを生成する必要があるため

どうしても作業に時間がかかってしまいます。

そこで、「いいね！」ボタンのソース内にGET処理を施す事でOGPの内容を自動で切える方法をご紹介致します。

[ファイル構成]

index.php 写真一覧ページ　←こちらに「いいね！」ボタンを配置

dummy1.php ダミーページ　　 ←OGP情報を記述します。

[ファイル記述内容]

#index.php

<?php
$content = array("投稿1","投稿2","投稿3", ... ,"投稿100");

for($i=1;$i<10; $i++){
echo '<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fsample.com%2Fdummy.html%2F?id='.$i.'&content='.$content[$id].'&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>';
}

?>

#dummy.php

<?php
$id = $_GET[id];
$content = $_GET[content];
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta property="og:title" content="sample" />
<meta property="og:type" content="article" />
<?php echo "<meta property='og:description' content='{$content}' />"; ?>
<?php echo "<meta property='og:image' content='https://sample.com/img{$id}.jpg' />"; ?>
<?php echo "<meta property='og:url' content='https://sample.com/dummy.html?id={$id}' />"; ?>
<meta property="fb:app_id" content="xxxxxxxxxxxxxx" />
<title></title>
</head>
<body>
</body>
</html>

上記のように、FBの「イイネ」ボタン内に、OGPにデータを引き渡すGET処理を記述してください。
この実装により、OGP画像の読み込みもとも指定する事ができます。
キャンペーンサイトなどで複数の商品に対してイイネボタンを配置したい場合はこの方法をお試し下さいませ。