Настройка и установка кнопки "мне нравится" от вконтакте. Виджет ВКонтакте «Мне нравится» кэширует параметры Настраиваем кнопку мне нравится от вконтакте

Убил несколько дней, пока разобрался до конца со всеми наворотами кнопок “мне нравится” от вконтакте и 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 – это уникальный идентификатор ссылки для подсчета лайков. Т.е. мы можем установить несколько кнопок “мне нравится” с разными идентификаторами и одной ссылкой, или вообще несколько абсолютно разным кнопок “мне нравится” с разными ссылками и отображением .

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

Привет! Сегодня я расскажу Вам, как быстро создать приложение и вставить кнопку "Мне нравится " от социальной сети без лишних плагинов.

Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к API ВКонтакте, в результате чего я получал надпись "Open API security breach " и бесконечно бегающий прогресс-бар. Как оказалось, все дело было в банальном написании адреса сайта в настройках "Open API " в самом ВКонтакте (об этом я напишу чуть ниже).

Итак, давайте прикрутим кнопку "Мне нравится ".

Для начала зайдем через свой профиль в ВК (обязательно через свой, так как нам нужно будет создавать приложение). Далее переходим на страничку создания виджета и видим подобную форму:

Первое поле "Сайт/приложение " - здесь мы сразу же сможем создать приложение без лишних телодвижений, но Вы знаете, я так поклацал и оно создается как-то через *опу криво.

Создание и настройка приложения

Так что лучше сделаем лишние телодвижения и идем на страницу создания приложения , вписываем любое название в соответствующее поле, далее выбираем тип: "Веб-сайт ", и заполняем поле с описанием, но это не обязательно. Далее жмем "Перейти к загрузке приложения " и вводим каптчу.

Все! Приложение создано и перед нами форма с его настройкой:

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

Следующая вкладка "Настройки ", она самая важная ! Обратите внимание, в самом верху жирным выделен ID номер Вашего приложения (он и будет коннектить Вашу кнопку), далее идет "Защищенный ключ ", его не трогайте.

Адрес сайта: http://yoursite.com/ (адрес к которому Вы подключаете Open API. Если использовать это приложение на другом сайте или на локалхосте, работать не будет. Приложение полностью привязывается к адресу сайта, который тут указан.)

Лишний слэш в настройках адресов и Ваша кнопка не законнектится, будет выводить ошибку "Open API security breach ".

Все, сохраняете изменения, остальные вкладки можете не настраивать.

Настройка и вставка кнопки

Возвращаемся к форме создания кнопки и вот тут уже в поле "Сайт/приложение " в выпадающем списке должно появится Ваше приложение, выбираем его.

Следующий пункт "Варианты кнопки " - выбираем, какая Вам больше подходит под дизайн, внизу под формой сразу приводится наглядный пример кнопки. На данный момент существует 4 вида кнопки:

• Кнопка с текстовым счётчиком
• Кнопка с миниатюрным счётчиком
• Миниатюрная кнопка
• Миниатюрная кнопка, счётчик сверху

Тип кнопки выбрали, теперь пункт "Название кнопки ", пока что есть 2 варианта (выбирайте любой понравившийся):

• Мне нравится
• Это интересно

Ну и, наконец-то, мы пришли к полю "Код для вставки ". Когда Вы выбрали в первом поле свое приложение, его ID автоматически вставляется в код. Этот код нужно вставить в двух местах Вашего сайта, разработчики специально его прокомментировали, но я на всякий случай также объясню.

Первый кусок кода:

VK.init({apiId: ID__ВАШЕГО_ПРИЛОЖЕНИЯ, onlyWidgets: true});

нужно вставить внутри тега:

А второй кусок:

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

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

Мой код не вставляйте, я его привел, как пример, тем более у меня не те настройки кнопки и не указан ID.

А так все, Ваша кнопка готова!

Обтекание кнопки

Как Вы заметили, кнопка помещается в div с айдишиником "vk_like ", где прописан стиль её отображения. И в этом стиле разработчики втулили правило:

Clear: both;

Как мы знаем, это правило отменяет обтекание элемента с правого и левого краев, т.е., если Вы хотите, чтобы Ваша кнопочка была в ряд с остальными кнопками соц. сетей, можете и не мечтать, она будет гордо стоять на новой строке. Чтобы этого избежать и все-таки вернуть кнопку в ряд, замените:

Так мы отменяем отмену (:-D) обтекания элемента, а "!important " повышает приоритет вашего стиля, т.е., Ваше правило в глазах браузера будет главным.

Ну, вроде бы все сказал, что хотел)))) Надеюсь, что Вы все поняли и у Вас получилось вставить кнопку!

А если Вам до вставки кнопки еще долго, так как своего сайта, пока что, нету, то, может быть, создание сайтов Чебоксары Вам в этом поможет.

Всем привет! Сегодня речь пойдёт о таких фишках, как кнопка «мне нравится » от вконтакте и фейсбук. Расскажу, как установить на сайт кнопку мне нравится . Как настроить кнопку мне нравится от вконтакте .

Вот посетители читают статьи на вашем блоге или сайте, вы написали классный материал, «молодцы» - говорят ваши читатели, но комментировать лень… Это ж нужно либо авторизироваться, либо заполнять поля формы: своё имя, писать комментарий, да ещё и капчу вводить, где символы то не всегда разобрать можно… Вот тут то и будет полезна кнопка мне нравится ! Нажмёт на неё человек и всё!

А через некоторое время вы, зайдя в свою статью, наведёте курсор мышки на кнопку «мне нравится » - появится окошко, где будут показаны все люди, кому ваша статья действительно понравилась с их аватарками, кликнув по которым можно перейти в профиль человека на сайте vkontakte или facebook. И, если хотите, можете с ним познакомиться, а может даже сотрудничать в будущем!

Давайте перейдём к установке кнопки мне нравится от vkontakte.ru

Как установить кнопку мне нравится на сайт или блог?

Переходим на страничку виджета «мне нравится» вот по этой ссылке . Перед вами появится форма настройки кнопки мне нравится от vkontakte .

Тут думаю всё просто - заполняем поля формы, название, адрес сайта, основной домен для сайта, выбираем вариант кнопки мне нравится от вконтакте . Выбираем высоту кнопки (данная опция появилась недавно). Обратите внимание на код для вставки, первую часть кода до слов вставьте между тегами своего сайта. Если ваш блог сделан на CMS WordPress, то теги находятся в файле header.php. Вторую часть этого кода вставьте в нужное место своего сайта, там, где вы бы хотели видеть кнопку мне нравится от vkontakte . Опять же, если у вас блог сделан на WordPress, то вставляйте код в файл single.php вашей темы.

Настраиваем кнопку мне нравится от вконтакте.

У кнопки «мне нравится » vkontakte есть ещё несколько интересных параметров настройки, кроме указанных явно в самой форме. Давайте их разберём:

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: "Интересная, полезная статья!"});

На этом с кнопкой мне нравится от вконтакте я закончу. Ещё пару слов про кнопку facebook , тут всё гораздо проще! Ниже приведён код кнопочки, скачайте его в конце этой статьи, и вставьте себе на страницу, туда, где хотите видеть эту кнопочку.

В коде ничего менять не нужно.

На сегодня всё! Теперь и вы знаете, как установить кнопку мне нравится от vkontakte и facebook на свой сайт или блог. Как настроить кнопку мне нравится от вконтакте . Надеюсь, эта статья была вам полезна. Советую получать новые статьи на e-mail , впереди много новой интересной информации, бесплатных видеокурсов, скриптов и конкурсов моего сайта.

Думаю, все знают что делает виджет «Мне нравится». Для числа несведущих поясню – виджет добавляет на HTML страницу одноименную кнопку, при нажатии на которую увеличивается счетчик. Пользователь также может рассказать о странице на своей стене ВКонтакте. Многие используют этот виджет, но нет ни одного упоминания в свободном интернете о серьезном подводном валуне. Дело в том, что после первого использования, параметры виджета навсегда кэшируются на серверах ВКонтакте и нет возможности их поменять не сбрасывая счетчика.

Чтобы продемонстрировать проблему, возьмем стандартный скрипт для виджета с официальной страницы для разработчиков ВКонтакте:

VK.init({apiId: YOUR_APP_ID, onlyWidgets: true}); VK.Widgets.Like("vk_like", {type: "full", pageTitle: "TEST_TITLE", pageDescription: "TEST_DESC"});

Нужно вставить этот код в страницу, которая будет в домене приложения ВК. Например, для приложения выбран базовый домен example.com, тогда страницу нужно разместить в этом домене или одном из его поддоменов: example.com/vktest.html, local.example.com/vktest.html, и пр.

После нажатия на кнопку, авторизации и нажатия на «Рассказать друзьям», на вашей стене ВКонтакте появится соотвествующая запись. Теперь вернемся на нашу страницу и снова нажмем на «Мне нравится» – счетчик обнулится, запись со стены пропадет. Проблема решена? Можно проверить, меняем параметры виджета на другие.

VK.Widgets.Like("vk_like", {type: "full", pageTitle: "REAL_TITLE", pageDescription: "REAL_DESC"});

Обновляем страницу, снова жмем на «Мне нравится» и «Рассказать друзьям». Во всех моих тестах я видел старые TEST_TITLE и TEST_DESC.

Этот пример, конечно, не слишком точен. Возможно, достаточно подождать какое-то время и кэш для виджета с нулем использований сбросится сам. Однако это отличная демонстрация проблемы. Если вы настроили виджет с тестовыми данными и счетчик больше нуля, вы уже не сможете поменять параметры виджета. К параметрам виджета относятся заголовок, описание, изображение.

Единственный способ обновить эти параметры – сбросить счетчик. Об этом мне сообщили в тех. поддержке ВК:

Сбросить счетчик можно либо указав третьим параметром page_id, или поменяв URL страницы. Очевидно, это не подходит для страницы, где уже больше 500 «лайков».

Я разрабатывал интеграцию для нескольких социальных сетей. Должен сказать, с подобной неприятностью сталкиваюсь впервые. Да уже и не помню когда в последний раз видел что нельзя сбросить кэш в системе. Более того, об этой особенности в документации ВКонтакте не сказано ни слова.

Разработчикам интеграций совет – тестируйте виджет на фальшивых URL, например example.com/fake.html. Или же меняйте page_id перед релизом страницы.

Документация к виджету

Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу поговорить на довольно интересную тему добавления и установки на свой сайт кнопок от социальных сетей , и («Мне нравится» или другими словами «like button»), а так же добавление новой кнопочки «Google +1».

Думаю, что лайки от Вконтакте и Facebook стоят уже у многих, но все же в конце данной публикации скажу по поводу них пару слов. Но в основном хотелось бы сегодня поговорить про актуальность добавления на сайт счетчика «Гугл+1» (google plus one) и влияние его показаний на в этой поисковой системе.

Кстати, не так давно на популярном буржуйском ресурсе Seomoz было проведено исследование о влиянии на продвижение сайта добавления анонсов статей в и Фейсбука. Судя по результатам данного исследования, использование кнопки «Мне нравится и ретвита имеет под собой основание.

Вообще, эти кнопочки добавить на свой сайт совсем не трудно, обладая хотя бы базовыми познания в Html и CSS (). Причем, не стоит беспокоиться об их кроссбраузерности, ибо во всех все будет выглядеть чики-пуки.

Да и в случае полного вашего нежелания лезть в код сайта можно воспользоваться соответствующими или . Но проблема состоит как раз в другом.

Все эти лишние кнопки, как правило, представляют из себя скрипт, который подгружается с серверов Вконтакте, Facebook или Google. Т.е. по любому они будут уменьшать вашего сайта, а этот критерий уже довольно давно учитывается при в поисковой выдаче, по крайней мере Google. Ну, а если сервер, с которого подгружается скрипт, будет временно недоступен, то это может существенно подтупить работу вашего ресурса.

Отсюда следует вывод, что их добавление должно быть обосновано их целесообразностью. Если про „Лайк“ можно сказать, что скорее всего она будет полезна (лично я предпочитаю использовать не отдельный скрипт кнопок „Мне нравится“ от Вконтакте и Facebook, а единый скрипт ), то про „Google +1“ все еще не совсем ясно и прозрачно.

Во-первых, ее использование только началось и по отдаче от ее добавления на сайт пока еще нет объективных данных, а во-вторых, в поисковой выдаче Google она доступна только для общемирового поиска Google.com и то, если вы зайдете как авторизованный пользователь:

Т.е., если сейчас брать в расчет только выдачу Google.com, то пользователи получили возможность рекомендовать понравившийся ему ресурс простым нажатием по кнопке „Гугл +1“ (при повторном щелчке можно будет забрать обратно свой отданный голос).

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

Ну, а для рунета вероятность такой лояльности будет не очень высокой. Поэтому Гугл и агитирует всех вебмастеров добавить на свой ресурс их кнопку „+1“. Ведь в этом случае пользователю не нужно будет возвращаться обратно в поисковую выдачу (которая к этому времени уже может быть в его браузере закрыта или погребена под ворохом открытых поверх страниц или вкладок), ибо он сможет отдать свой голос прямо на странице сайта с понравившейся ему публикацией.

Зачем это нужно поисковику мирового масштаба? Ответ очевиден — для повышения релевантности своей выдачи (у них появится куча бесплатных оценщиков качества сайтов) и для привлечения таким образом как можно большего количества пользователей (за счет качественных результатов поиска) и, соответственно, для увеличения в следствии этого своих заработков на контекстной рекламе.

Мне, кстати, Гоогл предложил установить кнопку „+1“ именно в моем аккаунте :

Вопрос, как всегда, шкурный, а значит стоит серьезно отнестись к влиянию кнопки „Google +1“ на продвижение вашего сайта — это может оказаться реально работающим инструментом. Но посмотрим как оно получится на самом деле. Если щелчки по ней реально являются одним из факторов ранжирования в региональных выдачах этого поиска, то ставим „гугл плюс“ обязательно, ну, а если нет, то ставим для эксперимента, чтобы убедиться в этом.

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

Щелкнув по надписи „Расширенные настройки“, получите доступ еще и к возможности отключить счетчик количества кликнувших по „Google plus one“ простым снятием галочки в первом пункте:

В назначении остальных настроек будущей кнопки я не уверен. Собственно, теперь остается только, следуя рекомендациям разработчиков, скопировать два фрагмента кода „Google +1“ и вставить их в требуемые места каких-либо файлов шаблона движка вашего сайта (cms).

Т.е. нам нужно вставить код вызова скрипта либо в голову веб страниц между тегами Head, либо в самый конец видимой части Html кода сразу перед закрывающим тегом Body:

{lang: "ru"}

А второй фрагмент кода нужно вставлять уже непосредственно в то место шаблона сайта (читайте про , а так же про то, как устроены ), где вы хотите видеть симпатичную кнопочку „Гугл плюс один“.

Самом собой разумеется, что с помощью CSS свойств можно четко позиционировать ее относительно других элементов. В общем-то сделать для WordPress это будет очень просто и я об этом сейчас расскажу.

Для тех вебмастеров, которые еще не подружились с , а так же с CSS, расскажу как вставить кнопку „Google +1“ (да и заодно „Мне нравится“ от Вконтакте и Facebook) в WordPress с помощью специально для этого заточенных плагинов, а в Joomla — с помощью универсального плагина MultiAds, предназначенного для вставки нужных вам элементов в начало или конец всех страниц сайта.

Итак, если вы не боитесь влезать в код темы оформления вашего блога на WordPress (предварительно сделав ), то давайте приступим. Первую часть кода я вставил в файл footer.php, который вы сможете найти по следующему пути, подключившись к хостингу по FTP с помощью программы FileZilla, о которой можно почитать:

/wp-content/themes/папка с вашей темой оформления

В самом низу файла footer.php вы сможете найти закрывающий тег Body и сразу же перед ним вставить код вызова скрипта:

Сохраняете произведенные изменения и открываете теперь на редактирование в простейшем Html и PHP редакторе Notepad++ (описанном ) файл single.php из все той же папки с используемой вами темой. Тут немного сложнее, но путем экспериментов вы сможете найти нужное место для вставки кнопки „Гугл+1“, заключив ее предварительно в контейнер из Html тегов Div.

В контейнере Div я прописал класс class=»google", для которого в файле с таблицами каскадных стилей моей темы оформления (/wp-content/themes/папка с вашей темой/style.css) добавил :

Google {float: right; margin: 10px 10px 0 0;}

Если вам нужно будет вставить кнопку по быстрому, без прописывания CSS свойств в style.css, то можете воспользоваться :

Хотя, конечно же, лучше будет все CSS стили выносить из кода в отдельный файл. С помощью свойства «float: right» вы задаете прижатие вправо и обтекание вашей кнопки «Google+1» текстом, а второе — задает внешние отступы слева и сверху от нее.

Если вы захотите добавить счетчик «+1» еще и на главную страницу WordPress, то описанный чуть выше Div контейнер нужно вставить еще и в файл index.php из папки с используемой вами темой. Подходящее место для нее, думаю, вы и без меня найдете, хотя бы методом тыка.

Почему я так долго рассказываю про самостоятельную вставку кнопку в WordPress, а не начну разговор сразу с плагина? Ведь там и объяснять особо ничего не надо. Просто если есть возможность обойтись без плагина , то обязательно это сделайте — сервер вашего хостера скажет вам за это спасибо, а поисковики, возможно, положительно отреагируют на хорошую скорость загрузки вашего блога.

Но если все это вам не совсем подходит, то можете воспользоваться одноименным плагином для WordPress «Google +1» . проходит обычным способом. Его настройки будут находиться в меню «Параметры» — «Кнопка +1».

Как видите, настройки на русском не только очень простые, но и понятные. Повторюсь, что любой дополнительный плагин в WordPress — это зло и с ним нужно бороться. О том, как вставить Google+1 в Joomla, читайте в конце статьи. Собственно, с помощью описанного там плагина можно будет вставить в статьи совершенно любые вещи, например, блоки или Adsense.

В принципе, при самостоятельной установки кнопок «Лайк» от соцсетей Вконтакте и Facebook на WordPress, без использования предназначенных для этого плагинов, все будет аналогично описанному чуть выше процессу, разве только что место под них вы может быть выберите другое.

Код «Мне нравится» (like button) от Facebook можно сгенерировать на этой странице . Если в поле URL вы вставите адрес вашей главной страницы, то нравиться будет именно она, а если это поле оставить не заполненным, то нравиться будет та страница, на которой установлена кнопка от Фейсбука. О как!

Остальные настройки на ваш вкус, а то, что при этом получится, вы сможете увидеть в правом верхнем углу. Для получения кода жмете на «Get code». Там вам предложат два вариант кода. Использовать можно тот, который будет лучше работать.

Вставлять код кнопки «Мне нравится» в WordPress следует именно в то место, где вы хотите чтобы она отображалась, а для ее позиционирования заключите код в Div контейнер и пропишите в нем CSS свойства напрямую (через атрибут Style) или же через (по аналогии с описанной чуть выше «Гугл +1»)

Теперь перейдем к Вконтакте и его варианту «Лайка». Получить код можно будет на этой странице . Можете выбрать внешний вид и надпись на кнопке, а затем скопировать ее код.

По полной аналогии с описанной чуть выше «Google+1», код «Мне нравится» от Вконтакте тоже состоит из двух частей, которые вставлять нужно абсолютно так же, как и Гугловский шедевр. Думаю разберетесь.

А если все это для вас полная ахинея, то можете воспользоваться любым плагином . Мне понравился полностью заточенный под социалки рунета плагин Social Share Buttons . Там, кроме «Мне нравится» от Вконтакте и Facebook, вы сможете добавить на свой блог еще и другие социалки, популярные именно у нас.

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

Скачиваете этот плагин и устанавливаете точно так же, как и любое другое расширение для Джумлы. Затем выбираете в верхнем меню админки «Расширения» — «Менеджер плагинов» и щелкаете по названию «Content — MultiAds». Собственно, настроек у плагина не очень много.

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

Таким образом вы сможете добавить на свой сайт любые кнопки социалок, включая и те, что мы рассмотрели в этой статье «Google +1» и «Мне нравится» от В контакте и Фэйсбука. Вы можете настроить выравнивание для них, выбрав нужный вариант из выпадающего списка, а так же задать нужные отступы.

Два верхних поля позволят вставить кнопки в верхнюю часть статьи, а два нижних, соответственно, в нижнюю. Какой именно вариант использовать, можно сказать только попробовав. Кроме описанных выше социалок так же советую обратить внимание на серьезно набирающие популярность . По ссылке вы найдете способы установки их кнопочек на свой сайт.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно