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

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

2 голосов
/ 25 ноября 2010

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

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

Ответы [ 2 ]

3 голосов
/ 26 ноября 2010

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

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

Так что, когда вам это нравится, за кадром регистрируется подобное. Вы заметите, что фактическая кнопка вверху не изменится, пока вы не обновите страницу.

Кажется, что само приложение с вкладками добавляет немного CSS, чтобы затем скрыть содержимое кнопки Like и заменить его своим собственным материалом: 

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

alt text

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

0 голосов
/ 28 февраля 2011

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

...