Как установить кнопку «мне нравится» социальной сети Вконтакте

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

Эта статья только одна из серии статей по установке кнопок социальных сетей такого вида. Так же мы рассмотрим установку аналогичной кнопки от фейсбук, кнопки «+1» от гугла и кнопки «твитнуть» от сервиса микроблоггинга твиттер.

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

clip_image001

ну и прямоугольником я выделил нашу сегодняшнюю кнопку.

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

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

Перед этим нужно войти в свой аккаунт чтобы быть залогиненым.

2. В открывшемся окошке, в первой строчке выбираем «Подключить новый сайт», пишем его название и адрес. Доменное имя при этом прописывается автоматически.

clip_image002

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

clip_image003

После выбора варианта кнопки, её высоты и названия, нам остается только вставить сгенерированный код в шаблон нашего блога.

4. Обратите внимание, что код разделен на две части, которые нужно вставлять в разные места шаблонов блога.

Первая часть

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
VK.init({apiId: 2725334, onlyWidgets: true});
</script>

Вторая часть

<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button"});
</script>

5. Первую часть нужно вставить между тегами <head> основного шаблона блога.

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

В панели управления блогом идем в меню Внешний вид – Редактор

clip_image004

Выбираем в правой части шаблон header.php

clip_image005

Открываем этот шаблон и вставляем первую часть нашего кода

6. Вторая часть кода отвечает непосредственно за вывод самой кнопки «мне нравится».

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

Открываем этот шаблон и ищем в нем место где выводятся комментарии

clip_image006

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

На этом интеграция кнопки завершена, открываем на блоге любую публикацию и смотрим перед блоком ввода комментариев, проверяем все ли корректно работает.

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


Понравилась статья? - поделитесь ею с друзьями!

Оцените статью!

Как установить кнопку «мне нравится» социальной сети Вконтакте
Оцените этот пост


3 комментария к “Как установить кнопку «мне нравится» социальной сети Вконтакте

  1. Установил кнопку за несколько минут!
    Наверное, потому, что описана установка легко, просто и таким языком, что даже мне все понятно 🙂

  2. Я совсем новичок, только создала сайт.Описано все понятно, делаю все по вашей инструкции, но только никак я не могу найти тег
    Как такое возможно?что делать?

    • Можете попробовать вставить код в другом месте, но вообще тег head если я верно понял Ваш вопрос должен быть в шаблоне шапки блога

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