Как установить кнопку Поделиться vk на ваш сайта

кнопка поделиться вконтакте
Кнопка “ВКонтакте” позволяет увеличить количество переходов с этой социальной сети, конечно при условии, если ваши статьи интересные, и ими будут делиться VK. Как установить кнопку читайте далее.
Ранее я уже публиковала пост о том, как установить комментарии ВК на blogspot, но многие читатели интересуются, как же установить кнопку “Поделиться ВКонтакте”. Рассмотрим несколько способов:

Первый способ от разработчиков vk

  • Переходим на страницу Виджеты ВКонтакте
  • Если у вас уже добавлен блог ВКонтакте (если вы уже создавали для него приложение раньше, например, ставили виджет комментарии ВКонтакте), то выберите его из списка. В противном случае добавьте новый сайт:
    кнопка поделиться вконтакте
  • Подключаем новый сайт:
    кнопка поделиться вконтакте
  • Теперь осталось настроить кнопку – определиться с размером кнопки, выбрать вариант из предложенных и название кнопки.

Примечание. Если вы используете несколько кнопок “Поделиться ВКонтакте” (например, одна в записи, а другая - в сайдбаре), то вам нужно сделать разные id в коде (меняем отрезок кода, выделенный желтым):

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like('vk_like');
</script>

Второй способ создания кнопки vk

Вставляем следующий код в любое место блога

<a href='https://vkontakte.ru/share.php?url=Ссылка' target='_blank'><img src='https://img-fotki.yandex.ru/get/6440/40839264.b/0_92085_e23512a0_XS.gif' border='0' width='32' height='32' alt='Как установить кнопку Поделиться vk на ваш сайта' title='Поделиться ВКонтакте'></a>

Посмотреть работу кнопки:
Как установить кнопку Поделиться vk на ваш сайта

Как установить кнопку ВKонтакте на Blogspot

Если вы выбрали первый способ создания кнопки вконтакте, то часть кода, которая расположена после </head> , нужно вставить в перед тегом

В шаблоне HTML блога (админпанель -> Шаблона блога -> Изменить html -> Находим и вставляем код </head> , который выделен на скриншоте красным. Вторую часть кода вставляем туда, где вы хотите вставить "мне нравиться". Об этом читайте далее.

  • В сайдбар (боковую колонку) можно установить посредством гаджета HTML / Javascript. Админ панель –> вкладка Дизайн –> Добавить элемент –> HTML / Javascript (сюда вставляем код),
  • В начало каждой записи. Админпанель –> вкладка “Шаблон” –> Изменить html –> Расширить шаблон виджета –> Находим код <data:post.body/> вставляем перед ним код кнопки vk.
  • После каждой записи блога. В шаблоне html блога находим строчку <div class='post-footer'> и вставляем код после него.
  • Если вы установили кнопку в начало или конец записи блога и не хотите, чтобы она отображалась на главной, а была видна только на странице записи, то заключите код кнопки между тегами <b:if cond='data:blog.pageType == &quot;item&quot;'> и </b:if>. Рекомендую использовать это условие, при котором вы прячете кнопку с главной страницы, так как во-первых, в этом случае кнопка работает более корректно, а во-вторых, удобнее для пользователя.
8 ответов к «Как установить кнопку Поделиться vk на ваш сайта»
  1. Не получилось и вставив код ни с помощью виджета... не знаю, вроде с виждетом и ошибиться негде, но не появилась эта кнопка...

  2. Сбоку - это в сайдбар (боковую колонку сайта).
    Если у вас Blogger, то об этом написано в статье.
    На wordpress нужно добавить код в виджет Текст и разместить его в сайдбаре.

  3. А Вы не подскажете, в чем проблема. Ранее при нажатии "поделиться" в контакте - появлялась ссылка с картинкой. Сейчас на стенке в вк картинка не добавляется. Добавляется некрасивый пост со ссылкой, повтором названия статьи, но без красивого изображения.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *