Кнопка Нравится на фан-странице. Как они это сделали?

Как Porche добавили кнопку «Нравится» на Facebook на свою фан-страницу?

Они также изменили цвет http://www.facebook.com/porsche?v=app_172346812791398


person Pasta    schedule 25.11.2010    source источник


Ответы (2)


Ничего себе, это действительно сбивает с толку и очень подло. Похоже, они создали приложение с использованием iframe, что позволило бы им создать в нем кнопку fb:like. Затем они указали приложению вкладки на это приложение iframe, которое просто отображает FBML:

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 (на котором есть кнопка «Мне нравится») и устанавливают returnurl на свою страницу в Facebook. Они скрывают все комментарии и отключают комментарии. Если вы проверите этот узел стиля и удалите его, посмотрите, что появится;)

альтернативный текст

Таким образом, в основном они обходят Facebook, не разрешая fb:like в приложениях вкладок, используя fbml in iframe, а затем добавляя некоторые пользовательские стили поверх этого после его рендеринга. Вероятно, против TOS Facebook, но я уверен, что они все получают от этого Porsche;)

person typeoneerror    schedule 26.11.2010

Вы можете создать приложение и показать на нем все, что хотите, например, в fbiframe, затем вы можете использовать на нем любой язык, например php, а также делать некоторые динамические вещи.

person Agent_x    schedule 28.02.2011