Сервисы социальных сетей как были, так и остаются на первом месте у вебмастеров как средство продвижения своего ресурса в интернете. И, если раньше были популярны сервисы закладок и кнопки «Подпишись на RSS», то на данный момент их полностью заменили так называемые «лайки» — кнопки социальных сетей, от слова «like» – «нравится». Это сейчас почти единственный доступный способ добиться повышения трафика. Для установки этих кнопок существует много плагинов, но нет такого, который бы устанавливал все нужные сервисы «оптом». Это и понятно – зарубежный интернет мало интересуется такими сетями, как Вконтакте, например. Поэтому ниже приведен разбор действий по установке кнопок социальных сетей вручную. Да и ни к чему нам лишние плагины на сайте – только лишнюю нагрузку создают. Кстати, о нагрузке – где только можно, старайтесть обходиться не плагинами, а вставками кода – это значительно облегчит ваш сайт, и он будет быстрее грузиться, что, в свою очередь, положительно скажется на отношении посетителей к вашему ресурсу. Итак – кнопки.

1. Устанавливаем кнопку Вконтакте – виджет от Вконтакте вы сожжете взять на соответствующей странице сервиса. Там вы увидите следующее:

 

Здесь будьте повнимательнее, так как существует один нюанс. Необходимо указать идентификатор вашего сайта, а для этого, прежде, чем получить код, нужно его сохранить. Установка этой кнопки проходит в два приема. Первым делом – откройте у себя в админпанели файл вашей темы header.php и вставьте вызов скрипта:

<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49">// <![CDATA[
// <![CDATA]]>/script>
<script type="text/javascript">
VK.init({apiId: API_ID, onlyWidgets: true});
// ]]></script>
...

Вместо API_ID укажите  ID вашего ресурса.

Сама кнопка устанавливается при помощи следующего кода:

<div id="vk_like"></div>
<script type="text/javascript">// <![CDATA[

VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20})

Если  на локальном сервере увидите надпись «Please specify correct base domain name in app» – не удивляетесь и не расстраивайтесь – это баг. Но почему-то в браузере «Opera» все работает сразу. На этом установка закончена, переходим к громкой фазе – кнопка Facebook.

2. Устанавливаем кнопку «Мне нравится» от Facebook на свой сайт
На странице социальных сервисов в Facebook вы увидите следующее:

Основная  и общая ошибка (я тоже ее допустил) – указывают адрес своего сайта. Ссылка указывается только в том случае, если вы хотите получить конкретную кнопку на конкретную страницу. Выберите из всего опционала то, что вам нужно, и смело жмите «Get Code», после чего получите код заветной кнопочки:


Как вставить код? Немного отлично от кода Вконтакте. Верхний код необходимо вставить сразу после тэга а не, как в предыдущем случае. Это делается в файле header.php вашего шаблона. На этом и закончим. Переходим к установке кнопки Twitter.

3. Как установить кнопку сервиса Twitter?
Так же, как и в предыдущих случаях, кнопка «Твитнуть» расположена на странице сервиса Twitter и выглядит вот так:

Все – по той же отработанной схеме. Выбираете нужные вам опции, копируете полученный код в нужное вам место на сайте.

4. Устанавливаем код кнопки «G+».
Страница на Google+ выглядит вот так:

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

Это не есть хорошо для внешнего вида ваших страниц, и кнопки необходимо выстроить в один ряд. Сделать это также несложно – вставьте весь код кнопок в тэг

и поместите в файл styles.css шаблона темы вашего сайта. Например, вот таким образом:

<div>
<div id="vk_like"></div>
<script type="text/javascript">// <![CDATA[
VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20} );
// ]]></script>
<div data-action="recommend" data-font="tahoma" data-show-faces="true" data-width="150" data-layout="button_count" data-send="false"></div>
<div id="tweet_like">
<a href="https://twitter.com/share" data-lang="ru" data-via="wplugins">________</a>

<script type="text/javascript">// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);  js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script",  "twitter-wjs");
// ]]></script></div>
<div data-size="medium"></div>
<script type="text/javascript">// <![CDATA[
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')[0]; s.parentNode.insertBefore(po, s);   })();
// ]]></script></div>

То есть кнопки вызываются div-ом post-meta-social, который в styles.css определяется следующим образом:

.post-meta-social{

               padding: 0px;

               margin: 0px;

               margin-top: 10px;

               margin-bottom: 10px;

               display: inline;

}

.post-meta-social #vk_like{

               float:left;

               width:170px!important;

}

.post-meta-social .fb-like{

               float:left;

               width:150px!important;

}

.post-meta-social #tweet_like{

               float:left;

               width:120px!important;

}

.post-meta-social .g-plusone{

               float:left;

}

Вставьте этот код в свой styles.css, и получите:

Эти коды будут работать на любом из ваших сайтов, так что для установки на другой сайт ничего придумывать больше не нужно. Если вам не подходит оформление кнопок – попробуйте изменить файл кода styles.css, но прежде сохраните где-нибудь существующий код styles.css.