Like button on fan page. How did they do this?

Question

How did Porche add Facebook like button to their fan page?

They also changed the colour http://www.facebook.com/porsche?v=app_172346812791398

Answer 1

Wow, that's really confusing, and very sneaky. Looks like they created an application using an iframe, which would allow them to create a fb:like button in it. Then they pointed the tab application to that iframe app which just renders some FBML:

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

So when you like it, behind the scenes, the like is registered. You'll note that the actual button up top doesn't change until you refresh the page.

The tab application itself seems to add some CSS to then hide the Like button content and replace it with their own stuff:

<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>

In the iframe app they are using a fb:comments plugin (which has a Like button on it) and setting the returnurl to their facebook page. They hide all the commenting stuff and disable comments. If you inspect that style node and deleted it, look what shows up ;)

So basically they are circumventing Facebook not allowing fb:like in tab applications by using fbml in an iframe and then throwing some custom styles on top of that after it's rendered. Probably against Facebook's TOS, but I'm sure they are all getting Porsches out of it ;)

Answer 2

You can build an aplication and show what ever you whant on it , like in an fbiframe, then you can use any language on it like php and do some dinamic stuff too.