YuWebdesign




Как установить и настроить кнопку Like (Нравится) от ВКонтакте (Vkontakte)

By yulia

Сайт Вконтакте утверждает, что виджет «Мне нравится» позволяет посетителям вашего сайта одним кликом выразить своё отношение к статье или моментально поделиться ссылкой на статью с друзьями.

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

Код кнопки для body универсален – можете смело вставлять его в library, так как в коде ничего не надо менять.

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

Шаг 1: Зайдите на сайт и осуществите "Вход" (Log in) ВКонтакте.

Шаг 2: Перейти на страницу виджета "Мне нравится" от ВКонтакте Vkontakte.

На страницу виджета Like можно также попасть кликнув по пункту developers (разработчикам) в футере (самый низ страницы), затем Widgets and External Sites (Виджеты и сторонние сайты) и, наконец, Like Widget (Виджет Мне нравится) – третий сверху.

Тут выбираем:

Сайт/приложение: Подключить новый сайт.
Название сайта:Вводите название своего сайта/блога.
Адрес сайта: Введите URL своего сайта/блога.
Основной домен сайта: Введется автоматически на основе URL сайта.
Нажимаете “Сохранить”.

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

Шаг 3: Задаем параметры кнопки Like (Мне нравится)

Как установить и настроить кнопку Like (Нравится) от ВКонтакте (Vkontakte)

Кнопка Like (Нравится) от ВКонтакте (Vkontakte), vk share widget

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

Шаг 4: Устанавливаем кнопку себе на сайт – код для head

Для этого копируем “Код для вставки” (Embeded Code) и часть кода до слов
<!-- Put this div tag to the place, where the Like block will be -->
надо вставить между тегами <head> и </head> вашего html документа.

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?79"></script>

<script type="text/javascript">
VK.init({

apiId: ВАШ КОД apiID,
onlyWidgets: true
});
</script>

Если у вас блог, сделанный на CMS WordPress, то эти теги находятся в файле header.php.

Шаг 5: Устанавливаем кнопку себе на сайт – код для body

Оставшийся “Код для вставки” (Embeded Code) вставляем в тот div, где вы хотите видеть кнопку “Мне нравится”.

<!-- 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>

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

<!-- 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", width: 500,
pageTitle: 'Article no. 321', pageDescription:
'Article no. 321 description'
}, 321);});
</script>

Где width: 500 – ширина блока в пикселях, целое число > 300,
pageTitle: ‘Article no. 321′ – заголовок страницы для отображения на стене ВКонтакте,
pageDescription: ‘Article no. 321 description’ – описание страницы для отображения на стене ВКонтакте,
321 – идентификатор страниц вашего сайта. Используется, если одна статья имеет множество адресов.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>