facebook - ファンページのいいねボタン。彼らはどうやってこれをしたのですか？

Question

ポルシェはどのようにして Facebook の「いいね」ボタンをファン ページに追加したのですか?

色も変えましたhttp://www.facebook.com/porsche?v=app_172346812791398

Answer 1

うわー、それは本当に紛らわしく、非常に卑劣です。iframe を使用してアプリケーションを作成したようです。これにより、fb:like ボタンを作成できます。次に、FBML をレンダリングするだけの iframe アプリをタブ アプリケーションに指定しました。

http://apps.facebook.com/porscheevent/tab.php

だから、好きなときに、裏で、好きが登録されます。ページを更新するまで、実際の一番上にあるボタンは変更されないことに注意してください。

タブ アプリケーション自体は、いくつかの CSS を追加して、[いいね!] ボタンのコンテンツを非表示にし、それを独自のものに置き換えているようです。

<style type="text/css">
.app_content_172346812791398 div.comment_body { display: none; }
.app_content_172346812791398 span.liketext { display: none; }
.app_content_172346812791398 span.piece { display: none; }
.app_content_172346812791398 span.corner_mask { display: none; }
.app_content_172346812791398 a.like_button_no_like { border: 0px none #ffffff; margin: 0px ! important; padding: 0px; background: transparent none no-repeat scroll 0% 0%; left: 0px ! important; top: 0px ! important; width: 124px; height: 25px; text-indent: -99999px; }
.app_content_172346812791398 div.connect_widget_sample_connections { display: none; }
.app_content_172346812791398 div.connect_confirmation_cell_like { display: none; }
.app_content_172346812791398 div.connect_confirmation_cell_no_like { display: none; }
.app_content_172346812791398 div.bgpage { border: 0px none #ffffff; margin: 0px; padding: 0px; background-repeat: no-repeat; width: 520px; height: 525px; }
.app_content_172346812791398 div.button { border: 0px none #ffffff; margin: 0px; padding: 0px; background-repeat: no-repeat; background-position: center bottom; cursor: pointer; }
.app_content_172346812791398 div.button:hover { background-position: 0pt 0pt; }
.app_content_172346812791398 a.like_button_no_like { display: block; background-image: url("http://platform.ak.fbcdn.net/www/app_full_proxy.php?app=172346812791398&v=1&size=o&cksum=b66bf4a27297d44a6672defc61932d66&src=http%3A%2F%2Ffacebook.porsche.com%2Fevent%2Fimages%2Flike.png%3F6"); background-position: center bottom; }
.app_content_172346812791398 a.like_button_no_like:hover { background-position: 0pt 0pt; }
</style>

iframe アプリでは、fb:comments プラグイン (Like ボタンが付いています) を使用し、returnurl を Facebook ページに設定しています。彼らはすべてのコメントを隠し、コメントを無効にします。そのスタイル ノードを検査して削除した場合は、何が表示されるかを確認してください ;)

したがって、基本的には、Facebook がタブ アプリケーションで fb:like を許可しないように、iframe でfbml を使用し、レンダリング後にその上にいくつかのカスタム スタイルをスローすることを回避しています。おそらく Facebook の TOS に反対していますが、彼らは皆、ポルシェを利用していると確信しています ;)

Answer 2

アプリケーションを構築し、fbiframe のように、好きなものを表示できます。次に、php などの任意の言語を使用して、いくつかの動的なことも実行できます。