Настройка и установка кнопки "Мне нравится" от ВКонтакте
С пятницей, господа! Завтра у обычных людей начинаются заслуженные выходные. А я, как всегда, буду занят: в этот раз надо поприсутствовать на собственном Дне Рождения. Ну а вчера появился повод вспомнить про кнопку Мне нравится от ВКонтакте. Она сейчас почти также популярна как Tweet от Twitter, так что встретить её можно почти на каждом сайте или блоге. В том числе и на моём, сразу после статьи, жмите - мне будет очень приятно.
Что касается причин побудивших меня о ней заговорить - кнопка "Мне нравится" получила обновление, небольшое, но приятное. Заодно напомню, как её настроить и установить на свой сайт.
В новости, пришедшей из ВКонтакте, говорится, что был слегка изменён дизайн кнопки "Мне нравится", счётчик нажатий стал кликабельным, то есть частью кнопки, а, главное, появилась возможность задавать кнопке "Мне нравится" высоту.
Это на самом деле было проблемой, представьте: вам надо выстроить в ряд несколько кнопок от различных социальных сетей - распространённая задача, ведь кроме Мне нравится от ВКонтакте популярны аналогичная кнопка от Facebook, Tweet от Twitter и +1 от Google. Это самый костяк, который в полной красе представлен на моём блоге, нажимайте - не стесняйтесь:) А есть ещё кнпка Поделиться от Яндекса, Класс! от Одноклассников, и, да минёт чаша сия моего блога, кнопки Мне нравится и Поделиться от Mail.ru.
Установка кнопки "Мне нравится"
Так вот, из всех перечисленных кнопок вариант от ВКонтакте отличался самой большой высотой, из-за чего в один ряд с прочими никак не вписывался. Теперь высоту можно указать на странице настроек кнопки, где мы и получаем её код для своего блога. Для этого нужно выполнить В Контакте вход и перейти на страницу виджета "Мне нравится". Это можно сделать, кликнув по пункту "Разработчикам" в самом низу страницы, затем "Виджеты и сторонние сайты" и, наконец, "Виджет "Мне нравится"". Можно сразу по этой ссылке перейти - Мне нравится.
Самое интересное тут - код для вставки. Часть кода до слов <!-- Put this div tag to the place, where the Like block will be --> надо вставить между тегами <head> и </head> вашего сайта. Если у вас блог, сделанный на CMS WordPress, то эти теги находятся в файле header.php. А вторую часть кода вставляем туда, где вы хотите видеть кнопку "Мне нравится".
Настройка кнопки "Мне нравится"
Кроме указанных явно в настройках у кнопки есть ещё несколько интересных параметров. Это width - ширина кнопки, pageTitle - название страницы для отображения на стене ВКонтакте, pageDescription - для отображения там же на стене, pageImage - адрес картинки-миниатюры для отображения на стене, и, наконец, новый параметр text - задаёт текст, который появится не при наведении мышки на ссылку, как с предыдущими параметрами, а прямо в записи на стене. Соответственно, может быть не длиннее 140 символов, по умолчанию выводится название страницы.
Как эти параметры задать
Они уазываются в строчке VK.Widgets.Like("vk_like", {type: "full"}); через запятую после атрибута type:"full" или на том месте, где он есть в моём примере (в зависимости от настроек кнопки там могут быть и пустые кнопки). Вот как может выглядеть результат:
VK.Widgets.Like("vk_like", {type: "full", width: 100, height: 20, pageTitle: 'Мне нравится ВКонтакте', pageDescription: 'Об установке и настройке кнопки на своём блоге', text: 'Очень полезный материал!'});
Ну вот и всё на сегодня. Теперь я тут всплыву только через несколько дней. Не забывайте, до новых встреч!
хорошая статья, автору спасибо
[Ответить]
09.01.2013
Добрый день!
У Вас что-то с социальными кнопками не то... вылазят за div, по высоте и по горизонтали не отрегулированы или так задумано? Смотрю Хромом. И кстати, кнопку ВК Вы уменьшали? Мне пришлось свою рисовать...
[Ответить]
15.01.2013
Кнопка ВК вроде нескольких размеров изначально есть - можно выбрать. Ах, я знаю, что они вразнобой, и в любом браузере - совсем нет времени родным блогом заниматься:(
[Ответить]
04.06.2012
Хочу вставить эти лайки, после записи «Далее», то есть, чтобы на главной странице уже было видны кнопки, и чтобы кликая на них они лайкали именно ту новость, ниже которой расположены, а у меня получается, что лайкают главную страницу!
[Ответить]
12.06.2012
Это надо уже в самом скрипте кнопки копаться, потому что по умолчанию кнопка лайкает именно ту страницу, на которой находится. Документация ВКонтакте вам в помощь - там немного инфы о работе с кодом есть.
[Ответить]
Скажите плиз куда вставлять pageImage и как должна выглядеть ссылка на картинку? покажите плиз пример
[Ответить]
Подскажите пож-та, как корректно настроить работу нескольких кнопок?
Дело в том, что если нажимаешь на одну кнопку "Мне нравиться", плюсом ставяться и к другим кнопкам голос....как можно решить данную проблему?
Заранее спасибо!
[Ответить]
10.04.2012
Если несколько кнопок, вы имеете ввиду, на разных страницах, то по инструкции выше всё должно работать. У меня работает: к каждой статье по кнопке с независимым счётчиком. Если у вас как-то иначе кнопки расположены, то уточните проблему, можно и ссылку на проблемный сайт дать.
[Ответить]
Попробовал использовать параметры: pageTitle, pageDescription, pageImage и text
Скрипт всё равно выводит на стену вконтакте информацию, которую первой находит на странице, а не информацию из этих параметров.
Если вывожу кнопку на чистом листе то всё нормально работает.. Не сталкивались?
использую тип "button"
[Ответить]
04.01.2012
Не сталкивался. Я просто не стал настраивать все эти параметры - меня и так работа кнопки устраивает.
[Ответить]
Но если просто так поставить без параметров - у меня выводит чёрти чё вконтакт :)
[Ответить]
20.11.2011
Спасибо!
[Ответить]
22.11.2011
Пригодилось?)
[Ответить]
22.11.2011
а как же, слушай, а как делать плюс один гугловский, видела где-то, не понмю
[Ответить]
22.11.2011
Тут есть: desiter.ru/novye-knopki-1-ot-google-i-follow-ot-twiiter/
[Ответить]
22.11.2011
спасибо большое
[Ответить]