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

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

Пример с готовым кодом

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

Выглядит это примерно так (страница может измениться со временем):

А примерно так будет выглядеть вставленный код.

Именно такой вариант используется на этом сайте, как работает можете посмотреть (и поделиться) внизу страницы.

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

Для начала находим ссылку "Разработчикам", слева внизу.

Попадаем на страницу для разработчиков. Внизу находим "Продукты" - "Виджеты для сайтов" - "Нравится"

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

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

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

Так же у каждого блока должны различаться id:

<div id="vk_like_1"></div><div id="vk_like_2"></div>

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

<div class="primer">
	<img src="images/all.jpg" 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/knopki-sots-setej-na-stranitsu.html?1",
			height: 20,
			width: 150
		});
	</script>
</div>

<div class="primer">
	<img src="images/header.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/knopki-sots-setej-na-stranitsu.html?2",
			height: 20,
			width: 150
		});
	</script>
</div>