Главная » Социальные сети » Кнопка от В Контакте “Мне нравится” на сайт WordPress
Добавляем кнопку “Мне нравится” от В Контакте

Кнопка от В Контакте “Мне нравится” на сайт WordPress

Здравствуйте уважаемые читатели блога history-of-blog.ru. Продолжая серию статей про кнопки социальных сетей сегодня мы добавим на сайт еще одну кнопку: “Мне нравится” от В Контакте. Это будет третья кнопка из четырех. Кнопку твитнуть и кнопку “Мне нравится” от facebook мы уже установили, а кнопка Гугл+1 на очереди.Добавляем кнопку “Мне нравится” от В Контакте

На каких сайтах актуальна кнопка от В Контакте.

В Контакте можно считать социальной сетью для подростков и молодежи, ведь почти 50% “В Контактовской” аудитории моложе 25 лет.

С точки зрения продвижения сайта в контакте наиболее популярной темой будет тема развлечений, например различных комиксов или красивых картинок со статусами (задолбали они чеснслово). Это объясняется гораздо просто – тематика развлечений интересна всем! Но с другой стороны в этой тематике много конкурентов и пишут как правило об одном и том же. Поэтому будет очень трудно обеспечить себе постоянную аудиторию в этой нише.

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

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

Код кнопки В Контакте для сайта.

  • Для того, чтобы сгенерировать кнопку идем на эту страницу.
  • Из выпадающего списка Сайт/приложение выбираем “Подключить новый сайт”, и заполняем остальные графы и сохраняем:подключить новый сайт к в контакте
  • Проводим настройку нашей кнопки:настройки кнопки в контакте

1 – Я выбрал пункт “кнопка с миниатюрным счетчиком” – этот вариант будет хорошо сочетаться с другими кнопками.

Можете поэкспериментировать с высотой кнопки, а так же выбрать название – все действия будут отражены в предпросмотре кнопки – 2

Добавляем кнопку В Контакте на сайт.

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

Код нужно вставить в два файла header.php и непосредственно в single.php (сохраните копии на всякий пожарный).

  • 1 часть кода. Копируем следующее:

код в шапку

  • Открываем файл header.php и вставляем в невидимую область сайта перед закрывающим тегом </head>:

код в шапку сайта

  • Теперь нужно скопировать вторую часть кода:вторая часть кода
  • Этот код нужно вставить туда, где непосредственно будет отображаться кнопка “Мне нравится” – то есть под статьей рядом с другими кнопками: кнопкой твитнуть и кнопкой facebook. Открываем файл single.php и вставляем код  после этих двух кнопок (и еще заключите код кнопки в Контакте в div блок – Вы это уже умеете. Если нет, то прочитайте статьи про кнопку твитнуть и фейсбук).
<div class="knopki-aga">
<div class="twit">Кнопка Твитнуть</div>
<div class="facebook">Кнопка Фейсбук</div>
<div class="vk">Кнопка в контакте</div>
</div>
  • Так, идем дальше, теперь нам нужно все выровнять. Для кнопки В Контакте ширину сделаем 160px. У нас уже есть некоторый код прописанный в файле style.css – его нужно изменить и дополнить. Старый код для двух кнопок:

.knopki-aga {
 width:260px; height:25px; margin:15px auto 5px;
 }
 .twit {
 float:left; width:120px;
 }
 .facebook {
 float:left; width:140px;
 }

Меняем на новый – для трех кнопок:


.knopki-aga {
 width:420px; height:25px; margin:15px auto 5px;
 }
 .twit {
 float:left; width:120px;
 }
 .facebook {
 float:left; width:140px;
 }
 .vk {
 float:left; width:160px;
 }

Как видите мы только изменили общую ширину блока кнопок (увеличили на 160px), и прописали класс для div блока кнопки В Контакте (.vk) с выравниванием по левому краю (чтобы кнопка встала за остальными) и шириной 160px.

Результат:три кнопки

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

Кстати, пришлось использовать картинку заместо кнопки в контакте для последнего скрина, так как все это делаю на Денвере.

Ну вот и все! Теперь у нас на блоге 3 кнопки, а четвертая заключительная кнопка: Гугл+1 уже на очереди. Так же, после того как она будет установлена будет написана статья, как красиво оформить эти четыре кнопки в отдельный блок с рюшечками и всей фигней :)

Вот серия статей про кнопки социальных сетей, которая поможет Вам установить 4 самых действенных кнопки к себе на блог (рекомендую читать по порядку!):

Комментировать через ВКонтакте:
Отзывов к посту "Кнопка от В Контакте “Мне нравится” на сайт WordPress" уже 48:
  • Евгений | 14.04.2012 в 13:18

    Сейчас разберемся, как раз то что нужно. Спасибо, Антон. :twisted:

  • Виталий | 06.06.2012 в 23:25

    Спасибо, добился того, чего хотел, но есть одно “но” – кнопка вконтакте разваливается – вот такой вид страшный
    vk.jpg
    как с этим бороться?
    спасибо

    • admin | 07.06.2012 в 4:11

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

      • Виталий | 07.06.2012 в 5:34

        Код кнопки стандартный

  • Виталий | 07.06.2012 в 5:25

    может быть в этой части css
    .vk {
    float:left; width:160px;
    }
    необходимо убрать отступы и границы?

    • admin | 07.06.2012 в 5:47

      Нет, здесь все в порядке (выравнивание по левому краю, ширина 160). Это общий блок под кнопку, а на скрине четко видно что прописаны классы для других дивов (более мелких, так скажем).
      Возможна причина в том, что в Вашей теме (в файле style.css например), уже есть названия контейнеров, которые использует кнопка, и для них уже прописаны свои стили. Другой вариант я и предположить не могу, здесь что бы что-то заявить нужно посмотреть на сайт и на исходный код, а так это будут рассуждения, которые сродни: “Какой смысл жизни?” :smile:
      Можете написать мне на почту через форму обратной связи, попробую помочь.

      • Виталий | 07.06.2012 в 8:56

        Антон, спасибо, всё решилось, поковырял css, убрал форматирование таблиц и и всё стало на свои места )

        • admin | 07.06.2012 в 9:02

          Да не за что. Хорошо что сами разобрались – похвально! :)

  • Виталий | 07.06.2012 в 5:26

    точнее прописать их отсутствие..

  • Виталя | 02.07.2012 в 17:46

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

    • admin | 02.07.2012 в 18:11

      Сомнения совершенно напрасны – див блок это ничто иное как контейнер. Вообще сам сайт состоит из множества контейнеров, внутри которых расположены другие контейнеры, и в них может быть сколько угодно контейнеров. Простой пример – сайдбар (это большой контейнер), внутри него находится виджет (контейнер поменьше), внутри виджета находится название виджета, которое помещено в еще один контейнер, в отдельном диве также содержание виджета, которое тоже может быть “расфасовано” по контейнерам, в зависимости от того какие требования предъявляются к дизайну виджета.
      Посмотрите внимательней, скопировали ли Вы 1 и 2 часть кода кнопки в нужные места. 1 часть – это так сказать поддержка кнопки, без нее кнопка не появится. 2 часть кода – это непосредственно код вывода кнопки в том месте, где мы хотим видеть кнопку “Мне нравится”

      • exeshnizo | 09.04.2014 в 21:15

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

    • admin | 02.07.2012 в 18:14

      Ну а вообще в статье написано в коде “Кнопка в контакте”, здесь естественно должен быть код (2 часть), а не эта надпись.
      Удачи, у Вас получится!

    • AppleFilms.ru | 26.10.2012 в 1:50

      У меня точно такая же проблема. Все сделал точно по инструкции. Нужные части кода вставил в соответствующие файлы – кнопки нет (

      Кнопки фейсбук и твиттер сделаны по другим инструкциям и отлично работают

  • Виталя | 02.07.2012 в 18:35

    Я нашёл другое решение: есть такой прекрасный плагин, называется Vkontakte API, который выполняет множество функций и избавляет от ручной работы :)
    Однако кнопка твиттера сделана своими руками по Вашей инструкции :|

    • admin | 02.07.2012 в 18:40

      Плагин – это конечно хорошо, но код гораздо удобнее. Можно и отображение настроить как угодно и ни одной лишней строчки кода не будет – то есть и нагрузка на хостинг минимальная и скорость сайта выше.
      Что касается ручной работы у меня мнение следующее – если код править нужно один раз, и больше не придется к этому возвращаться, то почему бы и нет :)
      Сейчас с кнопкой твиттера провожу эксперимент кстати))

      • exeshnizo | 09.04.2014 в 19:02

        Аналогично, другие кнопки есть, этой нету, но место как бы есть для нее

  • Алексей | 20.07.2012 в 0:53

    Сделал все по статье, кнопки выровнял, а в других браузерах, когда открываешь опять все криво :twisted:

    • admin | 20.07.2012 в 9:14

      Посмотрел кнопки на вашем сайте. Ну не по статье же – стили свои, общего блока нет

      • Алексей | 20.07.2012 в 9:42

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

        • admin | 20.07.2012 в 9:45

          Понятно. Ну на самом деле чтобы выровнять кнопки в строчку достаточно просто к стилю каждой кнопки прописать float:left, но стоит учитывать чтобы общей ширины (в нашем случае выделенной под статью) хватило на все кнопки, иначе не уместившаяся просто перейдет на следующую строчку.

  • Алексей | 20.07.2012 в 11:04

    Спасибо за совет, теперь все получилось. :smile:

    • admin | 20.07.2012 в 11:09

      Не за что. Хорошо смотрятся кнопки :|

  • Zhan | 03.09.2012 в 20:57

    Сделал, вроде все правильно как написано в статьях. Но кнопки mail и vk снизу и кнопка vk их аж две штуки )) Что не так сделал ?)

    • admin | 03.09.2012 в 21:16

      Так ну что я вижу у Вас с исходном коде:
      1. Это два блока кнопок – один после статьи, другой почти перед футером (этого делать не нужно вконтакте).
      2. В первом блоке ни одна кнопка не расположена в Диве (контейнере), а во втором с этим все нормально.
      3. Кнопка в контакте прописана в первом блоке и во втором – не нужно этого делать, выберите один блок.
      В общем удалите один блок кнопок – нижний и делайте все строго по пунктам, чтобы каждая кнопка была в отдельном диве

      • Zhan | 04.09.2012 в 11:56

        Я в этом деле новенький, не могли бы вы помочь мне разобраться со всем ?!)

        • admin | 04.09.2012 в 16:33

          Вот отличный вариант: мой бесплатный видеокурс: подробности здесь http://history-of-blog.ru/kurs/bbp/pp/blog-bez-plaginov.html – в нем как раз на видео подробно разобрано, одним из пунктов, как поставить кнопки социальных сетей и даны все коды в текстовом файле. Так что трудностей не возникнет – просто повторять. Попробуйте

  • Zhan | 06.09.2012 в 15:37

    Спасибо Вам огромное ) Все сделал как хотел ))

  • Денис | 01.11.2012 в 5:35

    Как у тебя получилось, что для каждой статьи свой счётчик лайков?
    У меня на всех страницах одинаково.
    Или это только в Вордпрессе работает?

    • admin | 01.11.2012 в 16:43

      Это зависит зависит от title страницы и ссылки – то есть каждая страница должна называться по-разному. Проверить довольно легко – открой в браузере несколько статей и посмотри на вкладки – название не должно быть одно и то же. На себе проверял – если шаблон плохо написан, то выручает плагин all in one seo (это на WP)

  • Денис | 02.11.2012 в 9:31

    Неа, не катит разный тайтл. А ссылка естественно разная

  • Виталий | 05.11.2012 в 23:55

    Делаю, как написано, в ответ – Ivalid application domain, кнопка не выводится. В чем может быть дело?

    • admin | 06.11.2012 в 6:58

      Ну что сказать в этом случае будьте более внимательны при установке. Возможные причины: проверьте apiID в коде кнопки (что идет в header.php) – там должна быть цифра, которая ответственна именно за Ваш домен (создается она когда подключаем сайт).
      Ну и конечно же сайт должен быть реальным – то есть выложенным в интернете. Эту кнопку нельзя поставить, если сайт находится на денвере (локальном сервере)

  • Вячеслав | 15.11.2012 в 19:14

    Привет, почему-то кнопка контакта не показывается, что случилось?

    • admin | 15.11.2012 в 19:19

      Сейчас открыл Ваш сайт – все работает

      • Вячеслав | 15.11.2012 в 20:46

        Точно все работает, просто исчезло на время, и у вас точно также было. Наверно этой мой браузер тормозил.

  • Андрей | 10.01.2013 в 14:23

    Не могу найти код, для выравнивания, когда обрамляю дивами
    не появляется в css нужных строк, как их правильно искать?

    • admin | 10.01.2013 в 16:46

      Не понял вопроса. Если не получаете можете воспользоваться видео из бесплатного курса в сайдбаре – там я на видео объяснил как быстро поставить кнопки.
      P.S. Код в комментах режется..

  • Алексей | 05.02.2013 в 7:28

    Смонтировал кновки по Вашей инструкции (facebook, google+, в контакте). Кнопку в контакте вместе со скриптом завернул в div контейнер, прописал css. Все работает, только кнопка в контакте вместо того чтобы оказаться третей в строке расположилась между facebook и google. Почему так могло произойти

    • admin | 05.02.2013 в 13:15

      Увидеть бы Ваш сайт, а так только одно объяснение на ум приходит. Сначала прописана кнопка ФБ, потом ВК, ну а последней G+ – в порядке вывода

  • Ромыч | 14.03.2013 в 20:52

    а как сделать несколько кнопок в один ряд? Надо стили подключать?

    • admin | 14.03.2013 в 20:58

      Последняя ссылка в статье (они же и последние слова) – как раз ведет на статью по этой теме ;-)

  • Юрий | 21.08.2013 в 16:07

    Странно, не выводиться, хотя все делаю правильно.

    • admin | 21.08.2013 в 16:20

      Кажется я давно сталкивался с таким глюком :)
      Обратите внимание у себя на сайте на эту строчку:
      VK.init({apiId: API_ID, onlyWidgets: true});
      Вместе API_ID – должен быть конкретный номер для Вашего созданного сайта (посмотрите как в статье, там номер для моего сайта 2882069), у Вас тоже должен появиться номер.
      Причина глюка – на странице генерации кнопки, код не сгенерировался.
      Решение – на странице генерации пересоздайте кнопку и убедитесь что там не API_ID, а какой-то номер.

      • Юрий | 21.08.2013 в 16:25

        Спасибо, мой косяк) не сохранил :idea:

  • Виктор | 27.11.2013 в 21:38

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

  • Татьяна | 06.03.2016 в 15:52

    Отличная статья! Искала долго как установить кнопку с лайком на своем сайте, в основном попадала на такие статьи, где не было подробного описания. А у Вас все так понятно, просто и подробно, настроила и ввела кнопку за пять минут на свой сайт. Спасибо за Ваш урок! :idea:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: