Для начала самое простое - как добавить кнопки на страницу сайта. Здесь есть 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.png" alt="" />
</div>
и
<div class="primer">
<img src="images/l.png" alt="" />
</div>
Теперь то же, но с кодом VK:
<div class="primer">
<img src="images/logowebmast.png" alt="" />
<div class="vk" id="vk_like_1"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like_1", {type: "button", pageUrl:"https://webrazrab.ru/webmasteru/194-knopki-sots-setej-na-stranitsu?1", height: 20, width: 150});
</script>
</div>
и
<div class="primer">
<img src="images/l.png" alt="" />
<div class="vk" id="vk_like_2"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like_2", {type: "button", pageUrl:"https://webrazrab.ru/webmasteru/194-knopki-sots-setej-na-stranitsu?2", height: 20, width: 150});
</script>
</div>
и
в процессе...
Комментарии ()