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

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

Несколько лет назад были очень популярны сервисы закладок. Сейчас их практически полностью заменили "лайки" социальных сетей. Я долгое время не хотел устанавливать эти кнопки на свой сайт, но, в конце концов, сдался и поставил – сейчас эти кнопки чуть ли не единственный способ получить "социальный" трафик, так как сервисы закладок уже давно никому не интересны. Плагинов для установки этих кнопок навалом, но мне так и не попался на глаза плагин, в котором были бы все эти 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 можно получить здесь.
Вы увидите вот такую страницу:

Установка кнопки 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-блог. Забудьте про тонны сервисов социальных закладок – толку от них сейчас нет вообще.

Понравился пост? Подпишись на обновления по Обновления блога по RSSRSS или Обновления блога на TwitterTwitter !

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

(обязательно)

(обязательно, не публикуется)

Для вставки кода используйте кнопку "Код", по умолчанию используется синтаксис подсветки языка "php", вы можете поменять его на любой другой поддерживаемый GeSHi язык, например "javascript", "css", "html4strict", "sql" и тд. Используйте предпросмотр!
 


Подписаться на уведомления без комментирования.