Блог Максима Войтика
Публикации о способах
заработка в интернете и SEO
Анализ сайта: Проверка Траста

Кнопки «мне нравится» Вконтакте, Facebook, Твитнуть и Google +1

27 мая 2012
Комментарии: 35

кнопка мне нравится на сайт

Привет! Социальные сети очень крепко вошли в нашу жизнь. Посмотрите сколько кругом людей целыми днями, зависают в facebook, vkontakte, twitter, google + и других сетях.

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

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

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

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

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

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

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


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

Далее выбираем формат и размер кнопки «мне нравится».

кнопка от вконтакте

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

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

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

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

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

код кнопки

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

вконтакте

Кнопка от Google +1


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

кнопка google +1

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

код кнопки google

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

<g:plusone size="medium"></g:plusone>

Далее надо вставить "2 Часть кода" в файл footer.php перед закрывающим тегом </body>

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);
})();
</script>

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

гугл +1

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


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

кнопка твитнуть

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

настройки кнопки твитнуть

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

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

твитнуть

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

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

кнопка мне нравится 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 и другие).

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

код кнопки фейсбук

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

1
2
3
4
5
6
7
8
<div id="fb-root"></div>
 <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'));</script>

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

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

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

фейсбук

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

вывод кнопок социальных сетей на сайте

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

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

(7 голос., в среднем: 4,57 из 5)
Загрузка...
С уважением, Максим Войтик
Буду рад, если нажмете на любую из кнопок:
Комментарии (35)
  1. Алексей в 18:26

    А как сделать чтобы кнопки отображались справа от текста статьи?

    Ответить
    • Максим Войтик в 21:29

      Я использовал класс «socials» (название может быть любым). И поместил код кнопок в этот класс.

      <div class="socials"> здесь располагаете код кнопок </div>

      В файле стилей style.css добавляем настройки класса.

      .socials {

      height: 22px;

      margin-bottom: 10px;

      margin-left: 60px; < --- я выставил отступ от левого края 60 пикселей,

      вы можете поставить большее значение,

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

      margin-top: 3px;

      position: relative;

      }

      Ответить
  2. Игорь в 01:27

    Здравствуйте.

    Подскажите пожалуйста, как эти кнопки выставить в одну строку?

    У меня кнопка от вконтакте уходит в новую строку куда ее не вставь.

    Ответить
    • Максим Войтик в 20:25

      Могли бы сказать какой у вас адрес сайта, тогда было бы проще помочь. А так создайте класс например как у меня «socials» (название может быть любым). И поместите туда код кнопок в этот класс.

      < div class="socials" > здесь располагаете код кнопок < /div >

      затем в настройках style.css добавляем настройки класса.

      margin-left: 60px; < --- я выставил отступ от левого края 60 пикселей вы поэкспирементируйте с этим значением, чтобы кнопки не уходили на новую строку.

      Ответить
  3. Максим Войтик в 20:29

    Пишите если что не понятно...

    Ответить
  4. Стас в 07:44

    как сделать,чтобы кнопка появилась на страницах,а не только после статьи?? *UNKNOWN*

    Ответить
    • Максим Войтик в 18:04

      Код конопок добавляем в то место, где они будут показываться. У меня под текстом, значит файл single.php. Если вы хотите в другое место например на главной странице, тогда редактируйте файл index.php.

      Ответить
  5. Маке в 01:50

    такой же вопрос: «Подскажите пожалуйста, как эти кнопки выставить в одну строку?

    У меня кнопка от вконтакте уходит в новую строку куда ее не вставь.»

    Сайт _ttp://kinohit.kz/

    сделал как вы сказали! не получается

    Ответить
    • Максим Войтик в 23:54

      Вам нужно сделать 4 класса: один общий <div class="socials"></div>

      и три на 3 кнопки

      <div class="social svkontakte"></div>

      <div class="social sgoogle"></div>

      <div class="social stwitter"></div>

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

      <div class="socials"> <div class="social svkontakte">здесь код вконтакта</div> <div class="social sgoogle">здесь код гугл</div> <div class="social stwitter">здесь код твиттера</div> </div>

      В файле стилей style.css добавляем настройки класса.

      Ответить
  6. Андрей в 14:06

    Как сделать переход на определенную ссылку, при нажатии на кнопку «Мне нравится», которая расположена на странице FaceBook?

    Суть в чем. Человек нажимает на кнопку, попадает на страницу организации, где получает подарок. ))

    Ответить
  7. Олег в 15:53

    Спасибо огромное))))))

    Ответить
  8. Игорь Алексеенко в 07:23

    Всем привет. Спасибо за информацию,все грамотно расписал. все получилось с первого раза. Удачи ;-)

    Ответить
  9. Руслан в 17:12

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

    Ответить
    • Максим Войтик в 00:13

      Нужно для каждой кнопки присвоить свой класс с помощью тегов div, после в файле style.css указать отступы от края в пикселях. А ты их в кучу слепил вот они на друг друга и позалазили.

      Ответить
  10. Nika Chick в 00:06

    Почему-то не получается. Начала с вк-кнопки.

    В single.php так и не разобралась, куда именно вставлять код. Нагуглила где-то, что нужно вставить после строчки

    , но у меня такой строчки в single.php нет.

    Полезла в content-single.php, нашла там эту строчку, добавила код — но эффекта нет, кнопка не появилась.

    Подскажите, пожалуйста, что не так и как настроить, чтобы было так. Не могу самостоятельно разобраться 😳

    Ответить
  11. Эля в 14:40

    Здравствуйте,

    я хотела бы чтобы у меня до «нравится» была ссылка с названием моей странице на facebook. У меня что то не получается 🙁

    Ответить
  12. Ольга в 07:44

    У меня при установке кнопки Фейсбук эта фраза выскакивает «Вам и 58 другим это нравится», как убрать?

    Ответить
    • Максим Войтик в 18:11

      У меня ничего не выскакивало, не могу помощь.

      Ответить
      • Ольга в 20:13

        Возможно изменение в скрипте...

        Сейчас такой код показывает. Не совсем понятно, как теперь изменить его. А только чтоб лайк был и цифра были и сбоку надписи не было «Вам и 58 другим это нравится».

        (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/r u_RU/all.js#xfbml=1»;

        fjs.parentNode.insertBefo re (js, fjs);

        }(document, 'script', 'facebook-jssdk'));

        Ответить
      • Максим Войтик в 21:14

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

        Ответить
      • Ольга в 23:50

        Я брала исходный код там, куда ведет Ваша ссылка...

        Ответить
  13. Ирина в 04:10

    ОГРОМНОЕ СПАСИБО !!! Благодаря вашему сайту у меня есть 2 кнопки, только вот вконтакт не получился=( он не отображался, может какой глюк самого вк? 😐

    Ответить
    • Максим Войтик в 15:31

      Глюки частенько бывают на ВК, сам пару раз думал что кнопка сломалась.

      Ответить
  14. Вера в 16:32

    Спасибо за статью. У меня тоже не становились в одну строку.

    Я сделала, как табличку:

    Сюда код в Твиттере

    Сюда код в Контакте

    ...

    Ответить
  15. Елена в 19:50

    А у меня не получается и не знаю в чем дело. В какое бы место single.php не вставляла код кнопок, после перезагрузки страницы с записями перестают отображаться. С чем это может быть связано?

    Ответить
  16. Елена в 17:08

    Максим, если у меня вот такой код single.php, куда ставить код кнопок?

    Помогите, пожалуйста.

    <?php

    get_header ();

    if (have_posts ())

    {

    while (have_posts ())

    {

    art_page_navi ();

    art_post ();

    comments_template ();

    }

    art_page_navi ();

    } else {

    art_not_found_msg ();

    }

    get_footer ();

    Ответить
    • Максим Войтик в 18:34

      Поставьте в любые места цифры, например 1 2 3 4 5 и сохраните страницу. Затем посмотрите в каком месте они появятся в записи. Далее вместо той цифры где устроит место выдачи и размещайте код.

      Ответить
  17. Виталий в 16:41

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

    Ответить
  18. Роман в 15:06

    Максим привет! Все делал как ты говорил, но ни чего не получается!!! Посмотри, правильно ли я разместил первый код в файле header.php ?

    wp_head ();

    ?>

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

    <body >

    Ответить
  19. Степан в 22:00

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

    Ответить
  20. Николай в 10:37

    Попробую скоро и для своего блога реализовать данные кнопки.

    Когда написаны цифры с лайками, это подстегивает лайкать новых читателей.

    У меня сейчас кнопки от share42, все хорошо, но цифр нет...

    Ответить
  21. Дима в 14:49

    вначале не мог понять как эту кнопку поставить, потом понял что оказывается надо иметь свой api. Сейчас кнопки у меня от плюсо. Кстати, кнопки мне нравится можно ещё поставить с помощью плагина Social Buttons

    Ответить
  22. Виталий в 11:32

    большое спасибо за статью, всегда хотел иметь на сайте или блоге такие кнопки, теперь благодаря статьи будут и у меня такие кнопки))

    Ответить
  23. Игорь в 21:08

    Максим,вы как всегда на высоте.Статья,хоть и написана давно,но все равно актуальна. [good]

    Очередной раз убеждаюсь,что не зря подписался на ваш блог.

    Ответить
  24. Роман в 19:17

    Вообще, очень полезно внедрение всяких социальных кнопок, актуально до сих пор

    Ответить
Оставить свой комментарий
Обязательно ознакомьтесь с правилами комментирования!!! СПАМ будет удален!
:) :-D ;-) :-| [star] [good] [present] [flower] [:-))] [:))] [:--_)] [:-|]

© 2011-2017 seoslim.ru, блог Максима Войтика

Внимание! Копирование материала строго запрещено. Соблюдайте авторские права и уважайте труд других людей!