Если у вас есть сайт или блог, почему тогда не использовать данные социальные сети, чтобы , наращивать , делая проект все популярнее и популярнее.

В этом нам помогут кнопки «мне нравится» от Вконтакте, Facebook, а также кнопки Твитнуть и Google +1, которые будут расположены в конце статьи.

Работают они очень просто! Когда посетитель вашего сайта прочитал статью и она ему понравилась, тогда скорее всего он захочет высказать свое мнение о ней.

Но многих затрудняет оставлять комментарий, это надо ввести «Имя», «Почту», «Сайт» и «Антикапчу», а тут они видят кнопку «мне нравится» нажимают на нее и дело сделано, ссылка на ваш пост отобразится в социальной ленте посетителя и ее смогут увидеть все его подписчики и друзья.

А это уже новые бесплатные посетители, плюс поисковые системы любят социальные сигналы и запросто могут такую страницу начать выше ранжировать в ТОП выдаче.

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

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

Теперь необходимо скопировать "1 Часть кода " и добавить ее в файл header.php перед закрывающим тегом .

VK.init({apiId: 2970045, onlyWidgets: true});

Так как я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .

VK.Widgets.Like("vk_like", {type: "button", height: 18});

Перезагружаем страницу и смотрим результат.

Для того, чтобы добавить кнопку «google +1» на сайт или блог переходите по этой ссылке и попадает на страницу простого конструктора.

Выбираете размер кнопки (маленькая, средняя, большая). Не забудьте выбрать русский язык.

Затем вставляете "1 Часть кода " в то место, где планируете установить кнопку «google +1». Я сделал вывод ее после текста статьи, поэтому код вставил в файл single.php .

window.___gcfg = {lang: "ru"}; (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script"); s.parentNode.insertBefore(po, s); })();

Перезагружаем страницу и смотрим полученный результат. Если кнопка не нравится можно поменять настройки ее в конструкторе.

Если вы хотите установить кнопку «твитнуть» от соц сети микроблогов twitter переходите по этой ссылке и попадаете на страницу конструктора.

Выбираете из предложенных кнопочек самую подходящую для вас. Мне понравился вариант «Отправить ссылку» .

Выбираете в настройках русский язык и копируете код в то место, где планируете сделать показ кнопки «твитнуть». В моем варианте это файл single.php .

Перезагружаете страницу и наслаждаетесь полученным результатом.

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

URL to Like – данное поле не заполняем.

Send Button (XFBML Only) — я убрал галочку Send Button, чтобы не было дополнительной кнопки «Отправить» .

Layout Style – формат кнопки. Мне понравился botton_count, но на вкус и цвет сами знаете, как бывает с приятелями.

Show Faces – ставим галочку, чтобы видеть аватарки тех, кому понравилась статья.

WIdth – указывает ширину. Я оставил все без изменений.

Verb to display – выбираете, какая надпись будет расположена на кнопке facebook. Здесь только два варианта: «like» – мне нравится или «recommend» – я рекомендую.

Color Scheme — выбираете цветовую схему оформления. Для темного (dark ) или светлого (light ) сайта.

Font – можете указать определенный шрифт названия кнопки (arial , verdana и другие).

Первую часть кода устанавливаем перед закрывающим тегом в файле footer.php .

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Вторую часть кода кнопки «мне нравится» facebook добавляем в то место, где будет показываться кнопка. У меня под текстом, значит файл single.php .

Перезагружаем и смотрим полученный результат.

После некоторой настройки расположения кнопок «мне нравится» Вконтакте, Facebook, а также «Твитнуть» и «Google+» у меня получился вот такой результат.

На этом все! Надеюсь, моя статья поможет вам в настройке и установке кнопок социальных сетей. Не пропускайте следующие посты, подписывайтесь обновлений блога.

Если что-то не получается или у вас есть вопросы по теме пишите в службу поддержки или оставляйте комментарий, помогу обязательно!

Вообще, для для Лайков существует большое количество плагинов, например отличный плагин Pluso (он больше для share чем для like, но плагин отличный), но если все же требуется установить стандартные лайки, тогда накидаю небольшую инструкцию (в первую очередь для себя;)).

Для создания лайков Вконтакте заходим на эту страницу http://vk.com/dev/Like, далее настраиваем внешний вид самой кнопки, вводим Название, Адрес, Основной домен и Тематику, или же выбираем нужный сайт из выпадающего списка. Выбираем вариант кнопки, при выборе внизу будет показан пример будущей кнопки, выбираем высоту кнопки и ее название.

Нажимаем сохранить и получаем код для размещения на сайте такого вида:

Затем код, который выглядит примерно так:

VK.init({apiId: 4505264, onlyWidgets: true});

вставляем в код своего сайта перед закрывающимся тегом , для сайтов на CMS WordPress этот код нужно добавить в файл header.php .

Важно! Если вы до этого добавляли на сайт комментарии Вконтакте или какие-то другие виджеты Вконтакте, то этот код у Вас уже будет размещен на сайте, дважды его добавлять не нужно.

Вторую часть кода, которая выглядит примерно так:

VK.Widgets.Like("vk_like", {type: "button"});

вставляем в код своего сайта в то место, в котором кнопка “Мне нравится” должна выводиться, для сайтов на CMS WordPress этот код чаще всего добавляется в файл single.php .

Нажимаем “Get Code” – и в всплывающем окне получаем код для размещения на сайте:

Первая часть кода, которая выглядит примерно так:

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s); if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ru_RU/sdk.js#xfbml=1&appId=492073974146494&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));

Размещаем в код своего сайта после открывающегося тега .

Важно! Если вы до этого уже размещали на сайте виджет комментариев Facebook или другие виджеты Facebook, тогда этот код у вас уже размещен на сайте и дважды его ставить не нужно.

Вторую часть кода, которая имеет примерно такой вид:

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

Важный момент! При копировании кода в файлы какой-либо CMS – нужно заменить параметр data-href во втором блоке (адрес сайта):

на код для постоянных ссылок своего сайта, для CMS WordPress это , и получим такой код для второго блока, который нужно вставить в место вывода кнопки Like: