Пятница, 1 июля, 2011 года

Установка кнопки Like от ВКонтакте и кнопки «Твитнуть», до кучи кнопка Google +1




 

Выполняю обещание! Приступим к описанию установки кнопки «Мне нравится» от социальной сети ВКонтакте без лишних плагинов (плагин тоже существует). Как ставить кнопку от Facebook я писал здесь. Итак, заходим в свой профиль в VC (это важно т.к. нам нужно будет создать приложение). Затем идем на страницу — Виджета «Мне нравится» и наблюдаем такую форму:

Виджет Мне Нравится от ВКонтакте

Виджет Мне Нравится от ВКонтакте

Первое поле «Сайт/приложение» – здесь можно сразу же создать приложение без лишних телодвижений, но я пожамкал на кнопки и оно создается как-то через одно место или браузер не тот или еще чего, пошел другим путем.

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

Пойдем более сложным путем, труднист я, топаем на страницу создания приложения, вписываем произвольное название в соответствующее поле, потом выбираем тип: «Веб-сайт», заполняем поле с описанием, что не обязательно. Далее жамкаем на «Перейти к загрузке приложения» и вводим номер телефона и получаем на него СМС с кодом, который вводим в всплывающем окне. Далее жмем согласен с правилами.

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

Настраиваем созданное приложение

Настраиваем созданное приложение

Первая вкладка «Настройка», она у Вас сейчас активна, можете загрузить иконку для приложения, вписать данные, выбрать группу, «Защищенный ключ» (его не трогайте).

Ниже ID номер Вашего приложения (он и будет коннектить Вашу кнопку).

Далее «Open API», вот тут аккуратно, вводите адрес сайта точно так же, как это показано на примере (см. картинку выше):

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

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

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

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

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

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

Кнопка с текстовым счётчиком

Кнопка с миниатюрным счётчиком

Миниатюрная кнопка

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

 

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

Мне нравится

Это интересно

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

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

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?20"></script>
<script type="text/javascript">
  VK.init({apiId: ID__ВАШЕГО_ПРИЛОЖЕНИЯ, onlyWidgets: true});
</script>
нужно вставить внутри тега <head></head>

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

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

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

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

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

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

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

сlear: both;

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

<div id="vk_like"></div>

на

<div id="vk_like" style="clear:none !important;"></div>

Вот теперь будет красиво! Результат смотрим ниже 🙂

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

Оригинальную кнопку твиттера можете найти на странице ее установки на официальном сайте тут. Вообще-то можно настроить отправку статей в twitter и через установку кнопки tweetmeme. В первом варианте публикация идет только в твиттер, а во втором варианте также публикуется на сайте tweetmeme. Какую кнопку ставить дело вкуса. Собственно настраивать оригинальную кнопку твиттера проще простого.

Страничка кнопки Твитнуть

Страничка кнопки «Твитнуть»

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

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="ваш аккаунт" data-lang="ru">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

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

Добавляем кнопку Google +1

Компания запустила кнопку «+1" для сторонних сайтов. Ранее эта кнопка была только в результатах поиска на google.com. Кнопка позволяет одобрять страницы в поиске, таким образом для ваших друзей, пользующихся гуглом, эта страница будет выше в выдаче.

Теперь кнопку можно нажимать не только в результатах поиска, но и на сайтах, которые ее установили. Как установить кнопку +1 на сайт я сейчас покажу.

Получить код кнопки можно на специальной странице. Там же можно настроить внешний вид.

Часть кода необходимо вставить в заголовок сайта, для wordpress это файл темы header.php

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'ru'}
</script>

Параметр lang влияет на язык.

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

<g:plusone size="medium" href="url" callback="function"></g:plusone>

У этого кусочка кода есть необязательные параметры:

Size

Размер кнопки. Может быть:

small – 15 пикселей

medium – 20 пикселей

tall – 60 пикселей

Если параметра нет, то берется стандартное значение 24 пикселя.

Href

Адресс страницы, которая получит +1.

Если не задано, то используется rel=»canonical».

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

Callback

Вызвать указанную функцию function при нажатии.

Отслеживание голосов

Если у вас установлен код Google Analytics, то добавляем на страницу такой скрипт.

<script type="text/javascript">
  function plusone_vote( obj ) {
    _gaq.push(['_trackEvent','plusone',obj.state]);
  }
</script>

При этом в параметрах кнопки должен быть код callback=»plusone_vote». Каждое нажатие на кнопку вызывает событие, добавляющее в отчет состояние кнопки: on или off.

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

Географические данные посетителей

Демографические данные посетителей

URL плюсованых страниц

Влияние на поисковую выдачу

Начинайте собирать данные уже сейчас!



 
 

10 комментариев на “Установка кнопки Like от ВКонтакте и кнопки «Твитнуть», до кучи кнопка Google +1”

  1. Марина Пишет:
    12 декабря, 2011 в 15:26

    Спасибо, что так подробно все описали!

  2. you too Пишет:
    13 декабря, 2011 в 00:40

    🙂

  3. Адлан Пишет:
    1 мая, 2012 в 23:18

    Спасибо за статью! Сейчас буду устанавливать на сайт!

  4. Андрей Пишет:
    12 ноября, 2012 в 12:31

    Как вы сделали так,чтобы по нажатию на кнопку LIKE (facebook) не вылазило сообщение отправить???

  5. you too Пишет:
    12 ноября, 2012 в 21:57

    Андрей, так вы, видимо, просто не разлогинились в FB. Вы разлогиньтесь, нажмите кнопку и появится всплывающее окно. Или вы про другое?

  6. Андрей Пишет:
    12 ноября, 2012 в 23:48

    you too, нет, вы не про то подумали. Когда залогиненый на кнопку жмешь, должно под кнопкой выскакивать сообщение «Поделиться» типо. Но у вас оно не выскакивает это окно. Мне нужно,чтобы тоже оно не появлялось, как вы делали это. Или покажите код,который вставляли.

  7. you too Пишет:
    14 ноября, 2012 в 22:15

    Андрей, пожалуйста:

    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=tahoma&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="clear:none !important; border:none; overflow:hidden; width:450px; height:35px; float:left;" allowTransparency="true"></iframe>
  8. Андрей Пишет:
    15 ноября, 2012 в 15:21

    Блин, если вставлять,как iframe, то да, всплывающее окошко не появляется, а если использовать метод вставки html5, то не знаю как от него избавиться. Проблема в том, что для iframe нужно использовать url определенный, но не всегда его можно получить. В html5 url подставляется автоматом, но это всплывающее окошко «Поделиться» просто бесит. Если знаете способ как избавиться от окна «Поделиться», напишите пожалуйста.

  9. Николай Пишет:
    15 января, 2013 в 15:07

    Вот ещё вариант: www.likebtn.com

  10. Вебстар Пишет:
    31 мая, 2013 в 22:02

    А как избавится от тега <a тоесть ссылки на твиттер? Не очень хочется наставлять на каждой странице ссылку на один и тот же сайт. Это ведь сквозная ссылка и их лучше избегать.

Оставьте комментарий!

Записи в RSS и Комментарии в RSS.