"Мне нравится", "Класс", "Я рекоммендую", "+1" и т.д. - кнопки ставшие давно привычными, без которых уже мало кто представляет свой блог, новостную страчку или любой другой сайт.
Но нас интересует, в первую очередь, техническая сторона вопроса. О вставке виджетов Вконтакте я уже писал, сегодня речь пойдет о кнопках типа "поделиться".
Отдельно вставлять каждую кнопку каждой интересующей социальной сети неудобно, поэтому существует множество сервисов предоставляющих разработчикам удобные инструменты для этого. Наиболее популярные на сегодняшний день это http://www.addthis.com/ и http://api.yandex.ru/share/
Рассмотрим сервис Яндекса. Самый простой вариант - воспользоваться генератором, получить код и вставить его на сайт. Но это далеко не всегда правильно и корректно.
Например, мы оформляем Блог, и кнопки "поделиться" нужно разместить на странице с множеством записей, для каждой из них. Тоесть у каждой группы кнопок должна быть своя информация, заголовок, изображение и ссылка.
Не буду грузить теорией, а просто приведу код, который поможет вам в этом деле:
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<script type="text/javascript">
var image_file = "http://site.ru/images/some_image.jpg";
var YaShareInstance = new Ya.share({
element: "ya_share",
L10n: "ru",
elementStyle: {
quickServices: ["facebook", "vkontakte", "twitter"],
type: "none"
},
link: "http://site.ru/page.html",
title: "Заголовок материала",
description: "Описание материала",
image: image_file
});
</script>
<div id="ya_share" class="share-link"></div>
cоответственно, вместо
- http://site.ru/images/some_image.jpg - указываете переменную содержащую изображение
- http://site.ru/page.html - ссылка на страницу материала
- Заголовок материала - переменную, содержащую заголовок
- Описание материала - некоторое описание материала
Если элементов на странице нужно разместить несколько, то id блока ya_share можно менять, например добавив к нему счетчик, или добавляя id материала.