Кнопка Вконтакте. Как установить кнопку на движке WordPress

Дата:
|
Автор:

Кнопка Вконтакте. Как установить кнопку на сайт "Мне нравится"  на Wordpress.

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

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

Ну пускай не совсем я умный, но лучше с мельчайшими подробностями объяснить, как и что. Что бы любой новичек, только создавший свой сайт смог с первого раза и без проблем вставить кнопку вконтакте. Сразу замечу, что буду рассказывать именно о кнопке для движка WordPress.

Эту кнопку и другие подобные можно установить с помощью плагина Share Buttons, так проще. Но плагины притормаживают работу и скорость сайта, что не очень хорошо. И если по началу лучше использовать именно плагин, то в будущем желательно переходить на обычное редактирование документа, как в данном случае.  Если пользуетесь другим движком, вам нужно искать информацию на других сайтах.

картинка 1

И так, как установить кнопку мне нравится?  Первое, что сразу нужно сделать, это зайти на сеть Вконтакте, что бы сервис определил вас под вашим профилем, если конечно вы уже там зарегистрированы. Если ещё не успели зарегистрироваться, то сделайте
это прямо сейчас здесь.
Регистрация понятная, так что объяснять не буду.

После того. как под своим профилем зашли на сервис, идем на эту страницу создания приложения. Откроется окно (смотрите на первой картинке). Теперь заполняем поля,- "Название"- можете вписать любое, это не так важно. Далее, в разделе "Тип" выбираем (или будет уже выбрано),- "веб сайт".  В нижнем разделе "Описание" можете ничего не указывать и нажимаем внизу "Перейти к загрузке приложения", смотрите ниже, кнопка в темных тонах.

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

Картинка 2

регистрации номер вашего телефона, то обязательно сделайте это. Смотрите в настройках профиля. И так, вставили полученный код, нажали "отправить". Через пару секунд всплывет вот такое окошко (смотрите третью картинку).

Картинка 3

Заполняем поля в ней. В самом верху, где название, которые вы уже оказали и описание, ничего можете не делать. Обращаем внимание только на "Защищенный ключ",  скопировав вы можете вставить к примеру в полезный плагин кнопок для сайта Share Buttons, если он у вас есть. А также немного внимания на "ID приложения", запоминать и копировать это не надо, просто я к тому, что именно этот номер и будет определяющим для вашей кнопки, именно для вашего сайта. На картинке эти поля выделены желтым.

Картинка 4

Теперь самое главное о том, как вставить кнопку на сайт.

Внизу окна  видим Open API (выделено красным), в поле "Адрес сайта" вставляем ваш адрес.  Обратите внимание, как выглядит адрес: http://nachnivsesnachalo.ru -не правильно, http://nachnivsesnachalo.ru/- правильно. Все отличие в значке "/" в конце названия. В поле "Базовый домен" вставляем ваш домен, как пример,- nachnivsesnachalo.ru, без http://. Сохраняем настройки.  Пример на картинке 4

Настройка и вставка кнопки на сайт

Все необходимые данные зарегистрированы, теперь заходим на страницу "подключения виджета к Вашему сайту. В панели Сайт/приложение, уже будет указан адрес вашего сайта, либо нажмите стрелку на против (справа) и выберите в ручную. Далее выбираем из предложенного дизайн кнопки. Это по своему вкусу. Я выбрал первый вариант "Кнопка с текстовым счетчиком". "Высота кнопки" - я не трогал, и название по вашему желанию "Мне нравится" либо "Это интересно". Ниже видим сам код кнопки, код состоит из двух частей, и вставляться будет тоже в двух местах. Сразу замечу. делайте резервную копию нетронутого документа, в которые будем вставлять код, на всякий случай.

 

Картинка 5

 Первая часть кода,-  (не копируйте у меня- это пример) 

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?45"></script>

<script type="text/javascript">
 VK.init({apiId: 2638339, onlyWidgets: true});
</script>

 

Картинка 6

Теперь, скопировав вставляем на сайт. Смотрим картинку 6, изображающую панель инструментов, (колонка слева). Находим "Дизайн" и в нем меню "Редактор". Это редактор настроек вашей темы. Смотрим в правой колонке и находим "Заголовок", файл называется (header.php). Открываем его и видим следующее окно ( смотрите картинку). Документ выглядит в виде набора символов и значков, но не пугайтесь, разбираться во всем вам не надо, просто сделайте то, что я напишу.

Картинка 7

И так, сначала сразу скажу, первую часть кода будем вставлять между вот этих тегов..<head>( открывающий) </head>( закрывающий). Один из этих тегов  будет в верху, второй, только со значком "/"  внизу документа. Между ними будут другие символы. но не обращаем на это внимания, сейчас главное правильно вставить нашу первую часть кода. Все внимание на нижний тег </head>, не спеша просматриваем документ и внизу находим этот символ (тег будет отдельно в строке). Я подчеркнул его красным на картинке 7.  Зеленым- вставленную часть кода.

Скопированную часть кода вставляем выше этого тега </head> . Проще это сделать так, поднимаемся чуть выше < /head>, нажимаем "ентер" и получаем "пробел". Теперь вставляем часть кода. "Пробел" для того, что бы вам потом было легче найти эту "часть кода", если вы захотите удалить, либо внести какие то изменения.

Далее, идем назад на страницу данного вам кода. Спускаемся ниже (смотрим картинку 8). Вновь пропускаем (не копируем) <!-- Put this div tag to the place, where the Like block will be -->а только саму часть кода. Выглядит так:

Картинка 8

 Вторая часть кода:

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

Заходим опять в "панель инструментов". Находим "Дизайн", далее нажимаем "Редактор" (как я уже писал) и в открывшемся окне ( в правой

Картинка 9

колонке) находим- Одиночная запись (single.php). Откроется документ. В котором, вам нужно будет найти тег- <?php the_content(); ?> так он выглядит в документе. Смотрите на картинку 9, обведен красным. Скопированную вторую часть кода ( обведен зеленым) вставляем после этого тега, лучше через "пробел", как я описал выше, что бы потом можно было его легче найти и отличить. Почему именно в этом месте? Можно конечно поэксперементировать и вставить в другие места. Но лучше если ваша кнопочка будет внизу вашей статьи, а не где нибудь сверху. Все, кнопка установлена ,- позже расскажу как установить кнопки от Facebook и Mail.ru. Для начала сам вставлю..  Удачи!

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

Уважаемые читатели если статья оказалась для вас полезной, кликните по кнопке "Мне нравится".

Статьи которые могут быть вам полезны:

  1. Как проверить сайт на вирусы
  2. Как создать сайт или Блогинг от А до Я в Тринити
  3. Какой лучший файлообменник или файлообменник GetFiles опасно.

 


  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Рейтинг: 0 из 5 (0 голосов)
Комментарии к записи:
Перейти к форме комментирования
  1. Отличная статья и описано доходчиво. Спасибо.

    Ответить
    • Я старался, что бы самый новичек смог установить эту нужную кнопку

      Ответить
  2. Андрей, спасибо за инфу, а то у меня на сайте стоит плагин Share Buttons, в котором я никак не мог настроить кнопку "В Контакте". Связано это было с тем, что никак не мог найти apiId, которое нужно было вставить в настройки кнопки. И в поисковике искал, и где только не искал, но ответа найти не мог. Кнопка просто-напросто была не видна на сайте.
    У Вас, Андрей, конкретного указания, где найти значение apiId, я не нашёл, но обратил внимание на код кнопки для вставки в сайт в HTML-коде, и там мой apiId как раз был прописан.
    Кнопка заработала!!! Большое спасибо.

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

    Ответить
  4. Спасибо. Отличная статья, может переустановить, надо подумать.

    Ответить
  5. Спасибо,буду пробывать.

    Ответить
  6. Спасибо большое,а мне это нравиться

    Ответить
  7. Зачем вы меня обманываете ! Сами пишите а мне даже комментарий нельзя сказать !!! Почему не размещаете мои ответы !
    Это nachnivsesnachalo.ru не блог ес ли мне ответ даже нельзя написать !

    Ответить
    • Так, Шокиро, по порядку...какие комментарии и где?..что не отвечено и какой я не опубликовал?..обычно все публикуется

      Ответить
      • Андрей, это спам выше. Не реагируй.
        Я вот не пойму, какая разница между Мне нравится и Поделиться?

        Ответить
        • Кнопка "Поделиться" отправляет сообщение на стену того кто её нажал, а "Мне нравится" заносит сообщение в закладки нажавшего в ту же соц сеть.

          Ответить
  8. Excellent information indeed. I?ve been searching for this information.

    Ответить
  9. Спасибо за статью, все получилось, кнопка есть, вопрос, только возник, как сделать, что бы эта кнопка быа не только в коде, а чтоб ее реально было видно и она работала?

    Ответить
    • Код кнопки надо потдвердить с мобильного и посмотрите что вставили, тот ли...если кнопки не видно или не работает перепроверьте, тут все подробно описано..должно работать

      Ответить
  10. Спасибо, все понятно с первого раза!

    Ответить
    • пожалуйста

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

    Ответить
    • Алексей, я уже давно оставил технические моменты по сайту, виду другие более для меня интересные темы. Что касается вашего вопроса, я сам в свое время этим задался, искал объяснения но толкового не нашел, может ни очень старался. Посмотрите моя эта кнопка тоже внизу "МНЕ нравится", как вы и сказали- стопкой, а кнопки "Поделиться"- это плагин. Если у вас новый сайт, или он с небольшой посещаемостью пока, то лучше ставьте плагин и не беспокойтесь. Когда посетителей в день за 10 тыс будет тогда уже подумайте об этом. А способ точно есть, делается специальная рамка и в неё все подобные кнопки вставляются, но это в редакторе плагина (где виджеты) так же как и сама кнопка вставляются спец. символы для этой рамки. Но об этом уже не пишу, другие темы на сайте об отношениях и сексе

      Ответить
    • Я у себя поставил кнопки с помощью таблицы. Можно посмотреть в коде страницы, станет понятно.

      Ответить
  12. Наткнулся случайно на Ваш блог. Теперь стану постоянно просматривать. Надеюсь, не разочаруете и дальше/Спасибо, хорошая статья. Подписался.

    Ответить
    • Спасибо! Кнопка заработала!

      Ответить
      • пожалуйсста

        Ответить
  13. Удобная кнопочка. Все отображается на стене сразу..)

    Ответить
  14. Контакт - одна из самых популярных соцсетей. Это полезная кнопочка, надеюсь она справится со своим назначением - повысить посещаемость ресурса. Написано доходчиво! Спс!

    Ответить
  15. У меня стоит плагин, что сразу позволяет работать со всеми соц.сетями. И это очень удобно.

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

    Ответить
  17. Спасибо за информацию. Учту к своим навыкам. Очень полезная информация.

    Ответить
  18. Спасибо за подробное объяснение процесса, кнопочка мной успешно установлена и не возникло никаких сложностей, хотя я не специалист в этой области.

    Ответить
Оставьте комментарий к этой записи ↓

* Обязательные для заполнения поля
Внимание: все отзывы проходят модерацию.