Виджеты «Like» / "Мне нравиться" от facebook и vkontakte

04.01.2012 16:06:16

Начну с простого:
Подключение виджета «Мне нравится» от вконтакте.

Нужно воспользоваться формой и разместить полученный код на Вашем сайте, советую воспользоваться полной документацией для более точной настройки виджета .

Теперь поговорим о том, что есть в ассортименте фейсбука.

У этой соцсети целый арсенал всевозможных виджетов, я ограничусь только «Like Button» - это и «I like» и «Recommend» в одном флаконе.
Для начала стоит воспользоваться первой формой http://developers.facebook.com/docs/reference/plugins/like/, но особое внимание нужно обратить на то, как facebook определяет, что нужно отправить на стену пользователя, которому понравилась страница.

Фейсбук автоматически анализирует переданную ему, через параметр data-href, страницу и ищет на ней специальные «Open Graph Tags».

Хотя для их генерации можно воспользоваться второй формой (по приведенной выше ссылке), но тогда придется прописать их для всех страниц и периодически подправлять их, как только информация на странице измениться. Советую доработать свой сайт, чтобы эти метатеги генерировались на основе содержимого страницы.

Иногда информация, отправляемая на стену, «зависает» т.е. все метаданные на странице уже изменились, но на стену добавляются старые данные.

Для проверки глюк это или кеш можно воспользоваться утилитой:
http://developers.facebook.com/tools/debug

Если дэбагер показывает верные данные, то примерно через сутки кэш обновиться и все заработает само, а если нет, то нужно искать ошибку в скриптах или метаданных.

Есть еще способ добавления виджетов через iframe, но тогда они становятся менее управляемыми.
Напоследок пример добавления «Likebox» через iframe, не путать с просто «Like»:

1
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F
_Адрес_Страницы_
&amp;layout=standard&amp;width=450&amp;connections=0&amp;stream=false&amp;header=false&amp;height=55"

scrolling="no" frameborder="0" allowTransparency="true"
style="border:none;overflow:hidden;width:450px;height:55px;">

</iframe>

Яндекс.Метрика