Вставляем кнопку “Мне нравится” от ВКонтакте. Вставляем кнопку “Мне нравится” от ВКонтакте Кнопка вконтакте мне нравится

Если у вас есть сайт или блог, почему тогда не использовать данные социальные сети, чтобы , наращивать , делая проект все популярнее и популярнее.

В этом нам помогут кнопки «мне нравится» от Вконтакте, Facebook, а также кнопки Твитнуть и Google +1, которые будут расположены в конце статьи.

Работают они очень просто! Когда посетитель вашего сайта прочитал статью и она ему понравилась, тогда скорее всего он захочет высказать свое мнение о ней.

Но многих затрудняет оставлять комментарий, это надо ввести «Имя», «Почту», «Сайт» и «Антикапчу», а тут они видят кнопку «мне нравится» нажимают на нее и дело сделано, ссылка на ваш пост отобразится в социальной ленте посетителя и ее смогут увидеть все его подписчики и друзья.

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

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

Кнопка «мне нравится» от Вконтакте

Для того, чтобы добавить кнопку «мне нравится» на сайт, первым дело переходим на страницу регистрации кнопки vkontakte и заполняем поля с названием вашего сайта.

Теперь необходимо скопировать "1 Часть кода " и добавить ее в файл header.php перед закрывающим тегом .

1 2 3 4

< script type= "text/javascript" src= "http://userapi.com/js/api/openapi.js?49" > < script type= "text/javascript" > VK. init({ apiId: 2970045 , onlyWidgets: true } ) ;

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

Так как я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .

1 2 3 4

< div id= "vk_like" > < script type= "text/javascript" > VK. Widgets. Like("vk_like" , { type: "button" , height: 18 } ) ;

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

Перезагружаем страницу и смотрим результат.

Кнопка от Google +1

Для того, чтобы добавить кнопку «google +1» на сайт или блог переходите по этой ссылке и попадает на страницу простого конструктора.

Выбираете размер кнопки (маленькая, средняя, большая). Не забудьте выбрать русский язык.

Затем вставляете "1 Часть кода " в то место, где планируете установить кнопку «google +1». Я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .

< g: plusone size = "medium">

1 2 3 4 5 6 7 8 9

< script type= "text/javascript" > window. ___gcfg = { lang: "ru" } ; (function () { var po = document. createElement("script" ) ; po. type = "text/javascript" ; po. async = true ; po. src = "https://apis.google.com/js/plusone.js" ; var s = document. getElementsByTagName("script" ) [ 0 ] ; s. parentNode. insertBefore(po, s) ; } ) () ;

window.___gcfg = {lang: "ru"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script"); s.parentNode.insertBefore(po, s); })();

Перезагружаем страницу и смотрим полученный результат. Если кнопка не нравится можно поменять настройки ее в конструкторе.

Кнопка «Твитнуть»

Если вы хотите установить кнопку «твитнуть» от соц сети микроблогов twitter переходите по этой ссылке и попадаете на страницу конструктора.

Выбираете из предложенных кнопочек самую подходящую для вас. Мне понравился вариант «Отправить ссылку» .

Выбираете в настройках русский язык и копируете код в то место, где планируете сделать показ кнопки «твитнуть». В моем варианте это файл single.php .

Перезагружаете страницу и наслаждаетесь полученным результатом.

Кнопка «мне нравится» от Facebook

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

URL to Like – данное поле не заполняем.

Send Button (XFBML Only) — я убрал галочку Send Button, чтобы не было дополнительной кнопки «Отправить» .

Layout Style – формат кнопки. Мне понравился botton_count, но на вкус и цвет сами знаете, как бывает с приятелями.

Show Faces – ставим галочку, чтобы видеть аватарки тех, кому понравилась статья.

WIdth – указывает ширину. Я оставил все без изменений.

Verb to display – выбираете, какая надпись будет расположена на кнопке facebook. Здесь только два варианта: «like» – мне нравится или «recommend» – я рекомендую.

Color Scheme — выбираете цветовую схему оформления. Для темного (dark ) или светлого (light ) сайта.

Font – можете указать определенный шрифт названия кнопки (arial , verdana и другие).

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

1 2 3 4 5 6 7 8

< div id= "fb-root" > < script> (function (d, s, id) { var js, fjs = d. getElementsByTagName(s) [ 0 ] ; if (d. getElementById(id) ) return ; js = d. createElement(s) ; js. id = id; js. src = "//connect.facebook.net/ru_RU/all.js#xfbml=1" ; fjs. parentNode. insertBefore(js, fjs) ; } (document, "script" , "facebook-jssdk" ) ) ;

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Вторую часть кода кнопки «мне нравится» facebook добавляем в то место, где будет показываться кнопка. У меня под текстом, значит файл single.php .

< div data- send= "false" data- layout= "button_count" data- width= "450" data- show- faces= "true" >

Перезагружаем и смотрим полученный результат.

После некоторой настройки расположения кнопок «мне нравится» Вконтакте, Facebook, а также «Твитнуть» и «Google+» у меня получился вот такой результат.

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

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

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

Может Вы заметили, я на днях, наконец-то, прикрутил данную кнопочку у себя после постов. "Наконец-то" я написал не даром, так как были проблемы с подключением данной кнопки к 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 , впереди много новой интересной информации, бесплатных видеокурсов, скриптов и конкурсов моего сайта.

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

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



Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для share чем для like, но плагин отличный), но если все же требуется установить стандартные лайки, тогда накидаю небольшую инструкцию (в первую очередь для себя;)).

Виджет “Мне нравится” – Лайки ВКонтакте для сайта

Для создания лайков Вконтакте заходим на эту страницу http://vk.com/dev/Like, далее настраиваем внешний вид самой кнопки, вводим Название, Адрес, Основной домен и Тематику, или же выбираем нужный сайт из выпадающего списка. Выбираем вариант кнопки, при выборе внизу будет показан пример будущей кнопки, выбираем высоту кнопки и ее название.

Нажимаем сохранить и получаем код для размещения на сайте такого вида:

Затем код, который выглядит примерно так:

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

вставляем в код своего сайта перед закрывающимся тегом , для сайтов на CMS WordPress этот код нужно добавить в файл header.php .

Важно! Если вы до этого добавляли на сайт комментарии Вконтакте или какие-то другие виджеты Вконтакте, то этот код у Вас уже будет размещен на сайте, дважды его добавлять не нужно.

Вторую часть кода, которая выглядит примерно так:

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

вставляем в код своего сайта в то место, в котором кнопка “Мне нравится” должна выводиться, для сайтов на CMS WordPress этот код чаще всего добавляется в файл single.php .

Like Button для Facebook

Нажимаем “Get Code” – и в всплывающем окне получаем код для размещения на сайте:

Первая часть кода, которая выглядит примерно так:

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=492073974146494&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Размещаем в код своего сайта после открывающегося тега .

Важно! Если вы до этого уже размещали на сайте виджет комментариев Facebook или другие виджеты Facebook, тогда этот код у вас уже размещен на сайте и дважды его ставить не нужно.

Вторую часть кода, которая имеет примерно такой вид:

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

Важный момент! При копировании кода в файлы какой-либо CMS – нужно заменить параметр data-href во втором блоке (адрес сайта):

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