Установка кнопок Вконтакте, Facebook, Twitter и G+

16.07.2012

Несколько лет назад были очень популярны сервисы закладок. Сейчас их практически полностью заменили "лайки" социальных сетей. Я долгое время не хотел устанавливать эти кнопки на свой сайт, но, в конце концов, сдался и поставил – сейчас эти кнопки чуть ли не единственный способ получить "социальный" трафик, так как сервисы закладок уже давно никому не интересны. Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 4 сервиса. По понятной причине – Вконтакте мало кому известен за пределами России и его поддержку игнорируют. Впрочем, оно и к лучшему – зачем грузить WordPress лишними плагинами, когда установку этих кнопок можно легко сделать вручную?

1 Установка кнопки Вконтакте

Виджет "Мне нравится" от Вконтакте можно получить здесь.
Вы увидите вот такую страницу:

Установка кнопки Вконтакте

Будьте внимательны! Кнопка Вконтакте единственная кнопка, в коде которой указывается ID подключаемого сайта. На приведенном скриншоте код будет нерабочим до тех пор, пока вы не нажмете на кнопку "Сохранить" – только тогда в коде API_ID будет заменен на ID вашего сайта и код станет рабочим.

Устанавливать кнопку надо в 2 этапа, сначала откройте файл header.php вашего шаблона и вставьте вызов скриптов в head секцию. Примерно так:

<head profile="http://gmpg.org/xfn/11">
 
...
 
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
  VK.init({apiId: API_ID, onlyWidgets: true});
</script>
 
...
</head>

Понятное дело, что вместо API_ID у вас должен будет указан ID вашего сайта.

Саму кнопку надо устанавливать кодом:

<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20});
</script>

Не удивляйтесь, если на локальном сервере вместо кнопки вы увидите надпись "Please specify correct base domain name in app":

Please specify correct base

Это просто глюк, которого не будет, когда вы перенесете сайт к хостеру. Впрочем, чтобы увидеть эту кнопку на локальном сервере достаточно открыть сайт в браузере Opera. Как ни странно, именно в Опере кнопка будет отображена даже на локальном сервере.

2 Установка кнопки Facebook

Виджет "Мне нравится" от Facebook можно получить здесь.
Вы увидите вот такую страницу:

Установка кнопки Facebook

Не указывайте URL вашего сайта! Ссылку надо указывать только, если вы хотите получить кнопку, которая будет "лайкать" конкретную страницу сайта. Выбирайте опции и жмите кнопку "Get Code", чтобы получить код кнопки:

Код кнопки Facebook

В отличие от кнопки Вконтакте верхний код надо вставлять не в секцию head, а сразу после открытия тега <body>. Как правило, он открывается все в том же файле header.php вашего шаблона.

3 Установка кнопки Twitter

Кнопку "Твитнуть" от Twitter можно получить здесь.
Вы увидите вот такую страницу:

Здесь вообще все просто – выбирайте опции и копируйте указанный код туда, где вы хотите вывести кнопку.

4 Установка кнопки G+

Кнопку "G+" от Google можно получить здесь.
Вы увидите вот такую страницу:

Установка кнопки G+

Здесь тоже все просто – выбирайте опции и копируйте код туда, где должна выводиться кнопка.

Установка этих кнопок достаточно простая и с ней разберется практически любой человек. В конце концов, что может быть сложного в копировании кода кнопок? Однако проблемы начинаются тогда, когда блоггер копирует коды кнопок и получает что-то типа:

Мешанина кнопок

Как, собственно, выстроить их в ряд? Это не так сложно, как может показаться. Надо обернуть все кнопки в какой-нибудь див и определить его в styles.css вашего шаблона. Вот, например, код моих кнопок:

<div class="post-meta-social">
 
<div id="vk_like"></div><script type="text/javascript">VK.Widgets.Like("vk_like", {type: "button", verb: 1, height: 20});</script>
 
<div class="fb-like" 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 class="twitter-share-button" href="https://twitter.com/share" data-lang="ru" data-via="wplugins">Твитнуть</a>
<script>!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 class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
  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>

То есть вызов кнопок у меня обернут дивом 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;
}

Этот css код выведет все кнопки в ряд:

Кнопки по горизонтали

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

На сегодняшний день кнопки "лайков" социальных сетей это единственная вещь, которую стоит устанавливать на свой WordPress-блог. Забудьте про тонны сервисов социальных закладок – толку от них сейчас нет вообще.

Разное

like, виджеты

Понравился пост? Подпишись на обновления по RSS или Twitter !

На странице

Что такое помощник Маруся от VK можно узнать на странице сайта

marusia.vk.com

Комментарии (всего 63 комментария)

Екатерина написал(а) комментарий Цитировать
#61,
Здравствуйте, Александр!
Подскажите пожалуйста, возможно ли изменить вид кнопок "мне нравится" Вконтакте и Facebook?
Flector написал(а) комментарий Цитировать
#62,

возможно ли изменить вид кнопок

конечно можно, только вот зачем?
Марина написал(а) комментарий Цитировать
#63,
Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 4 сервиса.

Появился такой плагин https://wordpress.org/plugins/wp-social-likes/