Home/ Questions/Q 3425692
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T06:37:28+00:00

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

  • 0

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

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 😉

    alt text

    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 😉

    • 0