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

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

В этом нам помогут кнопки «мне нравится» от Вконтакте, 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) ; } ) () ;

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

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

Если вы хотите установить кнопку «твитнуть» от соц сети микроблогов 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+» у меня получился вот такой результат.

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

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

Сервис SendPulse – это маркетинговый инструмент для создания подписной базы и перевода случайных посетителей вашего сайта в разряд постоянных. SendPulse объединяет на одной платформе важнейшие функции для привлечения и удержания клиентов:
● e-mail-рассылки,
● web-push,
● SMS рассылки,
● SMTP,
● рассылки в Viber,
● отправка сообщений в facebook messenger.

Рассылки email Вы можете воспользоваться различными тарифами для ведения e-mail-рассылки, в том числе и бесплатным. Бесплатный тариф имеет ограничения: подписная база не более 2500.
Первое, с чего нужно начать, при работе с сервисом e-mail рассыл ок , – это создать свою адресную книгу . Задайте заголовок и загрузите список e-mail адресов.

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

При создании форм подписки обязательно использование e-mail с корпоративным доменом. Читайте, как .
Шаблоны сообщений помогут красиво оформить ваши письма подписчикам. Собственный шаблон писем вы можете создать в специальном конструкторе.

Авторассылки . Контент-менеджеры активно используют автоматическую рассылку . Это помогает автоматизировать процесс работы с клиентами. Создать авторассылку можно несколькими способами:
● Последовательная серия писем . Это самый простой вариант, когда вне зависимости от условий пишутся несколько писем, которые будут разосланы получателям в определенном порядке. Здесь могут быть свои варианты – серия сообщений (простая цепочка сообщений), особая дата (письма приурочены к определенным датам), триггерное письмо – письмо отправляется в зависимости от действий подписчика (открытия сообщения и пр).
● Automation360 – рассылка с определенными фильтрами и условиями, а также с учетом конверсий.
● Готовые цепочки по шаблону. Вы можете создать серию писем по заданному шаблону или видоизменить шаблон и подстроить его под свои нужды.
А/B тестирование поможет провести эксперимент по различным вариантам отправки серии писем и определить наилучший вариант по открытиям или переходам. Отправка Push уведомлений Push-рассылки – это подписка в окне браузера, это своего рода замена rss-подпискам. Технологии web-push стремительно вошли в нашу жизнь, и уже сложно найти сайт, который не использует для привлечения и удержания клиентов пуш-рассылки. Скрипт запроса на , вы можете отправлять письма, как вручную, так и создать авторассылки, создав серию писем или собрав данные с RSS. Второй вариант подразумевает, что после появления новой статьи на вашем сайте, автоматически будет рассылаться уведомление об этом вашим подписчикам с кратким анонсом.

Новинка от Send Pulse – теперь вы можете монетизировать сайт с помощью Push-уведомлений, встраивая в них рекламные объявления. По достижении 10$ каждый понедельник осуществляются выплаты на одну из платежных систем – Visa/mastercard, PayPal или Webmoney.
Push -сообщения на сервисе абсолютно бесплатны. Оплата берется только за White Label – рассылки без упоминания сервиса SendPulse, но если вам не мешает логотип сервиса, то вы можете пользоваться пушами бесплатно без ограничений. SMTP Функция SMTP защищает вашу рассылку от попадания в черный список за счет использования белых IP адресов. Технологии криптографической подписи DKIM и SPF, которые используются в рассылках SendPulse, повышают доверие к рассылаемым письмам, благодаря чему ваши письма реже будут попадать в спам или блэк-лист.Боты Facebook Messenger Facebook чат-бот находится на этапе бета-тестирования. Вы можете подключить его к своей странице и рассылать сообщения подписчикам.Отправка SMS Через сервис SendPulse легко отправлять-рассылки по базе телефонных номеров. Вначале вам нужно создать адресную книгу с перечнем телефонных номеров. Для этого выберите раздел “Адресная книга”, создайте новую адресную книгу, загрузите номера телефонов. Теперь вы можете создать СМС-рассылку по данной базе. Цена СМС рассылки варьирует в зависимости от операторов связи получателей и составляют в среднем от 1,26 рубля до 2,55 рублей за 1 отправленное СМС.Партнерская программа SendPulse реализует партнерскую программу, в рамках которой зарегистрированный пользователь по вашей ссылке, который оплатил тариф принесет вам 4000 рублей. Приглашенный же пользователь получает скидку 4000 рублей на первые 5 месяцев использования сервиса.

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

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

А через некоторое время вы, зайдя в свою статью, наведёте курсор мышки на кнопку «мне нравится » - появится окошко, где будут показаны все люди, кому ваша статья действительно понравилась с их аватарками, кликнув по которым можно перейти в профиль человека на сайте 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 , впереди много новой интересной информации, бесплатных видеокурсов, скриптов и конкурсов моего сайта.

Здравствуйте, дорогие читатели блога. Сегодня мы будем учиться вставлять на наш сайт кнопки со счётчиками от популярных социальных сетей таких как Google+, Facebook, вКонтакте и Twitter.

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

Ну а теперь поехали.

Кнопка на сайт Google+

С самого начала нам нужно перейти вот на эту страницу . Затем откроется страница на которой мы сможем выбрать ту кнопку которая больше всего понравится и соответственно взять код к ней.

Так как мы делаем по примеру мы выбрали стандартную кнопку от Google+ с счётчиком. В аннотации выбрали bubble, и язык, соответственно русский. Таким образом у нас получился вот такой код, который далее мы будем вставлять на свой сайт:

Кнопка для сайта «Мне нравится» от вКонтакте.

Переходим вот сюда . Теперь для начала нужно подключить новый сайт. Таким образом создаётся отдельный id номер именно для Вашего сайта. Для того чтобы подключить сайт Вам всего нужно заполнить три поля — это «Название сайта», «Адрес сайта» и «Основной домен сайта».

После всех этих не сложных шагов можно выбрать сам вид нашей кнопки вКонтакте. В нашем случае мы выбираем стандартную кнопку с текстовым счётчиком.

Как видите, что высота кнопки равна 22 пикселя. А название кнопки — мне нравится. Все эти значения Вы можете изменить под себя.

И теперь самое главное — это код для вставки кнопки на сайт. Для каждого сайта он будет не много изменяться из-за id номера о котором я говорил выше.

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

Код в шапке сайта между и :

VK.init({apiId: Ваш id номер, onlyWidgets: true});

Код для отображения кнопки вКонтакте:

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

Кнопка для сайта «Мне нравится» от Facebook.

Чтобы добавить это кнопку к себе на сайт, для начала нужно перейти вот на эту страницу . Затем мы увидим следующее:

Теперь давайте рассмотрим что значат некоторые поля на странице настройки.

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

Width — здесь выставляется ширина кнопки.

Show Faces — тут мы можем выбрать отображать или не отображать аватарки пользователей.

Verb to display — здесь мы можем выбрать текст в кнопке «Мне нравится» или «Я рекомендую».

Color Scheme — Тут можно выбрать оформление кнопки для светлых или же тёмных сайтов.

Font — выбираем шрифт надписей в кнопке.

После того как мы выбрали настройки находим кнопку «Get Code» и нажимаем на неё. Далее высветится окно с кодом, его тоже нужно вставлять в два этапа:

Вставляем код сразу после тега

Код для отображения кнопки

Вставляем этот код туда где должна отображаться кнопка от facebook:

Кнопка на сайт от Twitter

Заходим . И вот открылось вот это окно;-)

Здесь нам можно выбрать несколько различных кнопок, но в данном случае мы выбираем первую — Отправить ссылку.

Справа будем находится поле с кодом который нужно скопировать и вставить на сайт куда Вам нужно. Вот как этот код выглядит:

Твитнуть

Вот и всё мы научились добавлять кнопки. Теперь нам нужно их выровнять и немного украсить..

Выравнивание кнопок как на сайт.

Для начала я придумал простой класс для стилей CSS — «sochknop». А вот как выглядят сами стили CSS с этим классом:

#sochknop { opacity: 0.7; margin-bottom:20px; margin-left:55px; margin-top:45px; -moz-transition: opacity 0.3s 0.05s ease; -o-transition: opacity 0.3s 0.05s ease; -webkit-transition: opacity 0.3s 0.05s ease; } #sochknop:hover { margin-top:45px; opacity: 1; } #sochknop span { -o-margin-top:40px; padding:0px 0px; line-height:10px; float:left; }

Как видите, что для переменной sochknop я добавил : и . Это добавляет плавную прозрачность для кнопок. Если Вам этот не нравится просто удалите строчку opacity:

Теперь давайте посмотрим как это будет выглядеть в HTML.

Пример кода без кодов кнопок (чтобы было понятнее)

Кнопка от Гугл+ Кнопка от вКонтакте Кнопка от Твиттера Кнопка от Фейсбука

Пример кода с кодами кнопок:

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); })(); VK.Widgets.Like("vk_like", {type: "button"}); Твитнуть !function(d,s,id){var js,fjs=d.getElementsByTagName(s);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

Друзья расположение кнопок Вы можете менять как Вам удобно.

Несколько лет назад были очень популярны сервисы закладок. Сейчас их практически полностью заменили "лайки " социальных сетей. Я долгое время не хотел устанавливать эти кнопки на свой сайт, но, в конце концов, сдался и поставил – сейчас эти кнопки чуть ли не единственный способ получить "социальный" трафик, так как сервисы закладок уже давно никому не интересны. Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 4 сервиса. По понятной причине – Вконтакте мало кому известен за пределами России и его поддержку игнорируют. Впрочем, оно и к лучшему – зачем грузить WordPress лишними плагинами, когда установку этих кнопок можно легко сделать вручную?

1 Установка кнопки Вконтакте

Виджет "Мне нравится " от Вконтакте можно получить .

Будьте внимательны! Кнопка Вконтакте единственная кнопка, в коде которой указывается ID подключаемого сайта. На приведенном скриншоте код будет нерабочим до тех пор, пока вы не нажмете на кнопку "Сохранить" – только тогда в коде API_ID будет заменен на ID вашего сайта и код станет рабочим.

Устанавливать кнопку надо в 2 этапа, сначала откройте файл header.php вашего шаблона и вставьте вызов скриптов в head секцию. Примерно так:

... ...

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

Понятное дело, что вместо API_ID у вас должен будет указан ID вашего сайта.

Саму кнопку надо устанавливать кодом:

Не удивляйтесь, если на локальном сервере вместо кнопки вы увидите надпись "Please specify correct base domain name in app":

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

2 Установка кнопки Facebook

Виджет "Мне нравится " от Facebook можно получить .
Вы увидите вот такую страницу:

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

3 Установка кнопки Twitter

Кнопку "Твитнуть " от Twitter можно получить .
Вы увидите вот такую страницу:

Здесь вообще все просто – выбирайте опции и копируйте указанный код туда, где вы хотите вывести кнопку.

4 Установка кнопки G+

Кнопку "G+ " от Google можно получить .
Вы увидите вот такую страницу:

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

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

Как, собственно, выстроить их в ряд? Это не так сложно, как может показаться. Надо обернуть все кнопки в какой-нибудь див и определить его в styles.css вашего шаблона. Вот, например, код моих кнопок:

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

VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20}); Твитнуть !function(d,s,id){var js,fjs=d.getElementsByTagName(s);if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); 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); })();

То есть вызов кнопок у меня обернут дивом post-meta-social , который определен в styles.css таким образом:

.post-meta-social{ padding : 0px ; margin : 0px ; margin-top : 10px ; margin-bottom : 10px ; display : inline ; } .post-meta-social #vk_like { float : left ; width : 170px !important; } .post-meta-social .fb-like{ float : left ; width : 150px !important; } .post-meta-social #tweet_like { float : left ; width : 120px !important; } .post-meta-social .g-plusone{ float : left ; }

Post-meta-social{ padding: 0px; margin: 0px; margin-top: 10px; margin-bottom: 10px; display: inline; } .post-meta-social #vk_like{ float:left; width:170px!important; } .post-meta-social .fb-like{ float:left; width:150px!important; } .post-meta-social #tweet_like{ float:left; width:120px!important; } .post-meta-social .g-plusone{ float:left; }