Кнопки соц. сетей на страницу и отдельные блоки, элементы на странице

Для начала самое простое - как добавить кнопки на страницу сайта. Здесь есть 2 пути, либо воспользоваться для этого одним из сервисов, где можно получить готовый код для всех нужных соц. сетей и вставить его на страницу, либо взять код в каждой соц. сети отдельно. 

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

1.

 

2. 

На странице блок появится в том же виде, как и в колонке "Внешний вид блока"

Теперь, как вставить код непосредственно из соц. сети. Для примера буду использовать "Вконтакте", для фейсбука, одноклассников все более-менее похоже. 

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

Далее - авторизация и виджеты для сайтов -> виджеты для сайтов -> "мне нравится"

Открывается форма создания кнопки:

Первая часть кода вставляется внутрь <head></head>, вторая в <body></body>. В таком виде кнопка отобразится, будет отправлять ссылку на ту страницу, на которой находится. 

Теперь о привязке кнопок к отдельным блокам на одной странице. Верхняя часть (та что внутри <head>) меняться не будет, изменения коснутся только того, что в <body>. Что бы за каждый из блоков можно было ставить лайки, они по сути должны воспринематься как отдельные страницы, если таковые есть - хорошо (блог), если нет - добавим к урлу страницы "?**", где ** - ID блока. Если блоки создаются cms - их id всегда можно вывести, если оформлены статично - придумать. 

Так же у каждого блока должны различаться id (<div id="vk_like_1">, <div id="vk_like_1">, <div id="vk_like_1"> и т.д.)

Для примера создам два блока c небольшими картинками и возможностью поставить лайк вк на данной странице:

<div class="primer">

<img src="images/logowebmast.pngalt="" />

</div>

и

<div class="primer">

<img src="images/l.png" alt="" />

</div>

Теперь то же, но с кодом VK:

<div class="primer">

<img src="images/logowebmast.pngalt="" />

<div class="vk" id="vk_like_1"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like_1", {type: "button", pageUrl:"http://httpmaster.ru/webmasteru/194-knopki-sots-setej-na-stranitsu?1", height: 20, width: 150});
</script>

</div>

и

<div class="primer">

<img src="images/l.pngalt="" />

<div class="vk" id="vk_like_2"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like_2", {type: "button", pageUrl:"http://httpmaster.ru/webmasteru/194-knopki-sots-setej-na-stranitsu?2", height: 20, width: 150});
</script>

</div>

 
 

и

 

в процессе... 

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

Комментарии (0)