2013-03-15

Textual description of firstImageUrl

Кнопка “Поделиться ВКонтакте”

кнопка поделиться вконтакте
Кнопка “Поделиться ВКонтакте” позволяет увеличить количество переходов с этой социальной сети, конечно при условии, если ваши статьи интересные, и ими будут делиться VK. Как установить кнопку читайте далее…
Ранее я уже публиковала пост о том, как установить комментарии ВКонтакте на blogspot, но многие читатели интересуются, как же установить кнопку “Поделиться ВКонтакте”. Умение создания кнопки ВКонтакте пригодиться вам при создании скрипта Заплати лайком.
Полезно! Если вы являетесь активным пользователем ВКонтакте, то здесь http://statuso.ru/vlyublen/ вы найдете большое количество цитат и афоризмов для вашей странички.   Статусы разделен по категориям, есть рейтинг по популярности.
Рассмотрим несколько способов:
/* Первый способ от разработчиков vk
  • Переходим на страницу Виджеты ВКонтакте
  • Если у вас уже добавлен блог ВКонтакте (если вы уже создавали для него приложение раньше, например, ставили виджет комментарии ВКонтакте), то выберите его из списка. В противном случае добавьте новый сайт:
    кнопка поделиться вконтакте
  • Подключаем новый сайт:
    кнопка поделиться вконтакте
  • Теперь осталось настроить кнопку – определиться с размером кнопки, выбрать вариант из предложенных и название кнопки.
Примечание. Если вы используете несколько кнопок “Поделиться ВКонтакте” (например, одна в записи, а другая - в сайдбаре), то вам нужно сделать разные id в коде (меняем отрезок кода, выделенный желтым):
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like('vk_like');
</script>
Второй способ создания кнопки vk:
Вставляем следующий код в любое место блога
<a href='http://vkontakte.ru/share.php?url=Ссылка' target='_blank'><img src='http://img-fotki.yandex.ru/get/6440/40839264.b/0_92085_e23512a0_XS.gif' border='0' width='32' height='32' alt='' title='Поделиться ВКонтакте'></a>
Посмотреть работу кнопки:
 
Как изменить картинку кнопки?
Для этого, вам нужно изменить ссылку на изображение (выделена желтым в коде выше).
Как установить кнопку ВKонтакте на Blogspot
    Если вы выбрали первый способ содания кнопки вконтакте, то часть кода, которая расположена после </head> , нужно вставить в перед тегом
    в шаблоне HTML блога (админпанель -> Шаблона блога -> Изменить html -> Находим и вставляем код </head&gt , который выделен на скриншоте красным. Вторую часть кода вставляем туда, где вы хотите вставить "мне нравиться". Об этом читайте далее.
  1. В сайдбар (боковую колонку) можно установить посредством гаджета HTML / Javascript. Админ панель –> вкладка Дизайн –> Добавить элемент –> HTML / Javascript (сюда вставляем код),
  2. В начало каждой записи. Админпанель –> вкладка “Шаблон” –> Изменить html –> Расширить шаблон виджета –> Находим код <data:post.body/> вставляем перед ним код кнопки vk.
  3. После каждой записи блога. В шаблоне html блога находим строчку <div class='post-footer'> и вставляем код после него.
  4. Если вы установили кнопку в начало или конец записи блога и не хотите, чтобы она отображалась на главной, а была видна только на странице записи, то заключите код кнопки между тегами <b:if cond='data:blog.pageType == &quot;item&quot;'> и </b:if>. Рекомендую использовать это условие, при котором вы прячете кнопку с главной страницы, так как во-первых, в этом случае кнопка работает более корректно, а во-вторых, удобнее для пользователя.

8 комментариев :

Sound & Art комментирует...

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

Анонимный комментирует...

Всё получилось, спасибо!

Статусы комментирует...

И у меня все получилось! Спасибо

Андрей комментирует...

как сбоку поставить

Иванова Наталья комментирует...

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

olshenky комментирует...

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

Иванова Наталья комментирует...

Вам нужно настроить разметку open graph.

Иванова Наталья комментирует...

olshenky, я написала статью, которая должна вам помочь - здесь >>>

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности