Vk мне нравится и text. Добавляем виджет «Мне нравится» (Вконтакте) и Facebook Like Button (Фейсбук) на свой блог

Убил несколько дней, пока разобрался до конца со всеми наворотами кнопок “мне нравится” от вконтакте и facebook. Как быть с динамическим контентом? Как изменять текст поста на стену?
Про фейсбук в другой статье подробно напишу, принципы там другие. Пока хочу остановиться на популярной кнопке “Мне нравится” от Вконтакте .

Сейчас она уже очень отличается от первых прототипов, который были просто ссылками на страницы-обработчики контакта, и от тех, что уже со счетчиками были.

В настоящее время кнопка “мне нравится” является частью АПИ вконтакте, просто подключается с пометкой only widgets, если не ошибаюсь, и является виджетом, использующим основное API Vkontakte.

Значит, мы можем смело использовать все возможности этого Апи, зчастую убрав ограничение “только виджеты” при подключении. Что интересно, до недавнего времени, не было информации по возможностям функции VK.Widgets.Like() , поэтому приходилось мучаться самому. Но теперь нам все поясняют на специальной странице документации по виджету-кнопке “мне нравится”.

Итак, чтобы подключить кнопку мне нравится необходимо перейти на сайте ВК “разработчикам”->”Виджеты и сторонние сайты”->”«Мне нравится»”. При необходимости подключить сайт и выбрать параметры кнопки.

VK.init({apiId: 2887573, onlyWidgets: true});

Мы подключили скрипты АПИ и инициализацию приложения для работы с самим API вконтакте и конкретно с жанном случае – виджетом “мне нравится”.
В нужном месте страницы мы вставляем код кнопки виджета:

Затем, в нужный момент, например по document ready, мы отображаем кнопку:

VK.Widgets.Like("profprogru_vk_like", {type: "button"});

Все, теперь у нас есть кнопка со счетчиком. Но нам этого мало, да?

Как сделать кнопку “мне нравится” Вконтакте для сайта с динамическим контентом , где меняется урл страницы , или просто несколько кнопок с разными ссылками? Принцип один, доработаем код:

VK.Widgets.Like("profprogru_vk_like", {type: "button", pageTitle: "Произвольный текст", pageDescription: "Всплывающий текст",pageUrl:"тут ссылка на страницу"},666);

Теперь объясняю, мы обновляем кнопку. В фигурных скобках параметры виджета “мне нравится”, тип: кнопка со счетчиком, текст поста вконтакте, текст всплывающего окошка, ссылка на страницу и 666 – это уникальный идентификатор ссылки для подсчета лайков. Т.е. мы можем установить несколько кнопок “мне нравится” с разными идентификаторами и одной ссылкой, или вообще несколько абсолютно разным кнопок “мне нравится” с разными ссылками и отображением .

Надеюсь, информация не была бесполезной.

Итак, чтобы установить себе на блог вот такую кнопочку

создаем , затем переходим по , подключаем новый сайт и выбираем нужный вариант кнопки:

Вот этот код нужно вставить внутри тега (в файле header.php):

VK.init({apiId: #######, onlyWidgets: true});

Не забудьте вместо знаков ###### вставить свои индивидуальные номера!

А вот этот код вставьте в то место, где Вы хотите разместить свою кнопку:

VK.Widgets.Like("vk_like", {type: "button"});

Как видите, я разместил эту кнопку после каждой статьи на блоге (файл single.php).

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

Переходим на , видим вот такое окно:

URL to Like – оставляем это поле пустым

Layout Style – стиль счетчика (я выбрал стандартный).

Width – ширина кнопки. Подберите её под свой дизайн (я выбрал 450рх).

Verb to display – какое слово будет отображаться на кнопке: Like (Нравится) или Recommend (Рекомендовать). Я остановился на первом варианте.

Font (шрифт) и Color Scheme (Цветовая схема) выбирайте на свой вкус.

После того, как Вы сделали нужные настройки, нажимаем на кнопку Get Code:

Появится вот такое окно:

Нас интересует код из верхнего поля iframe . Копируем этот код в то место, где Вы хотите видеть кнопку «I like».

Теперь очень важный момент! Если у Вас блог на WordPress, то после

http://www.facebook.com/plugins/like.php?href=

нужно вставить

У меня этот код выглядит вот так:

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