388x60 Ads

Как добавить кнопки twitter и facebook в Blogger

Добрый день, уважаемые читатели SEO блога "Блоgгер".

Как вы уже знаете,  SEO блог "Блоgгер" - это всегда интересная и полезная информация, особенно для тех, кто ведет блог на блог платформе Blogger.

Социальные сети - это виртуальный мир, где при помощи Интернет общаются миллионы людей.

Среди блоггеров особой популярностью пользуются социальные сети twitter, facebook, вконтакте и Google плюс. Напомню, что согласно исследования, проведенного по инициативе SEO блога "Блоgгер", по популярности социальные сети 2012 году занимают такие позиции:
1. Вконтакте -45.45%
2. Twitter -24.24%
3. Одноклассники -12.12%
4. Fасebook - 9.09%.

В этой статье вы узнаете о том, как установить в Blogger кнопки "+1" от Google, "Like" от Facebook и "Retwitt" от Twitter.
Как добавить кнопки Like и Retwitt в Blogger

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

Код каждой из этих кнопок условно состоит из двух частей - одного или нескольких кодов JavaScript и HTML кода.

Где размещать JavaScript кнопки?

JavaScript кнопки Google + нужно разместить перед закрывающимся тегом </head>.
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>

Разработчики кнопок "Like" и "Retwitt" разрешают размещать JavaScript в Body. Следовательно, оптимально разместить эти коды перед закрывающимся тегом </body>.
<!--share script start-->
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  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'));</script>

<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>
<!--share script end-->

Где размещать HTML кода кнопки?

В шаблоне блога (при расширенном виджете) находите фрагмент кода <data:post.body/>. Если хотите кнопки добавить в конце статьи, добавляйте код после этого фрагмента, и если в начале статьи, соответственно наоборот.

Как вставлять HTML кода кнопки?

Вот код кнопок "+1", "Like" и "Retwitt", которые я рекомендую добавить в шаблон Blogger.
<div id="Like"><span><g:plusone class='g-plusone' data-annotation='none' data-size='tall'/></span><span><div id="fb-root"></div><div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true" data-font="verdana"></div></span><span>&nbsp;</span><span><a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru" data-hashtags="ruseo">Твитнуть</a></span></div> Blogger при добавлении в шаблон HTML не сохраняет изменения. По этому, перед вставкой кода в шаблон Blogger перекодируйте его в Escaped HTML.

В итоге получите код, готовый для добавления в шаблон вашего блога. Выглядит он примерно так: &lt;div id=&quot;Like&quot;&gt;&lt;span&gt; <g:plusone class='g-plusone' data-annotation='none' data-size='tall'/> &lt;/span&gt;&lt;span&gt;&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;div class=&quot;fb-like&quot; data-send=&quot;false&quot; data-layout=&quot;button_count&quot; data-width=&quot;450&quot; data-show-faces=&quot;true&quot; data-font=&quot;verdana&quot;&gt;&lt;/div&gt;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;&lt;a href=&quot;https://twitter.com/share&quot; class=&quot;twitter-share-button&quot; data-lang=&quot;ru&quot; data-hashtags=&quot;ruseo&quot;&gt;&#65533;&#65533;&#65533;&#65533;&lt;/a&gt;&lt;/span&gt;&lt;/div&gt; Вы наверно заметили, что коды кнопок помещены в контейнер с ID "Like" и находятся между тегами span.

Добавляем стили CSS

Для того, что бы вы могли оформить и разместить надлежащим образом блок с кнопками "+1", "Like" и "Retwitt" добавьте в вашу CSS (в шаблоне перед закрывающимся тегом ]]></b:skin>) вот такой код: #Like {
opacity: 0.7;
margin-left:120px;
padding-top:20px;
-moz-transition: opacity 0.3s 0.05s ease;
-o-transition: opacity 0.3s 0.05s ease;
-webkit-transition: opacity 0.3s 0.05s ease;
}

#Like:hover {
opacity: 1;
margin-left:120px;
-moz-transition: opacity 0.3s 0.05s ease;
-o-transition: opacity 0.3s 0.05s ease;
-webkit-transition: opacity 0.3s 0.05s ease;
}

#Like span {
float:left;
}
Свойство margin-left поможет вам правильно разместить блок с кнопками по горизонтали, для этого вы должны выставить подходящее для вашего блога значение отступа.

Изменяя значение padding-top вы установите значение верхнего отступа блока с кнопками по отношению к основному тексту статьи.

Надеюсь, эта статья вам понравилась.

Поблагодарите автора нажав на кнопку "+1", "Like" и/или "Retwitt".

На эту же тему читайте:
Гаджеты для блога - последние комментарии
Настройка домена для Blogger
Blogger - панель кнопок социальных сетей
Вконтакте - продвижение в социальных сетях




Подпишитесь В закладки НапечататьPrint Friendly and PDF


Вячеслав Вареня
Статус: seo-специалист | Контакты


7 коммент.:

Александр комментирует... [Ответить]

admin: по популярности социальные сети 2012 году занимают такие позиции:
1. Вконтакте -45.45%
2. Twitter -24.24%
3. Одноклассники -12.12%
4. Fасebook - 9.09%.

На всех углах кричали, что Fасebook чуть-чуть уступает VK. Тогда может быть сделать упор Вконтакте и Twitter, а Fасebook игнорировать?

Установил на WP плагин соц кнопки, но после установки плагина страницы стали грузиться 5-15сек. придется устанавливать кнопки. Спасибо за информацию.
С уважением Афанасьев Александр.

оля комментирует... [Ответить]

Так подробно, огромное спасибо. Все мучилась с этими кнопками, пойду внедрять.

Вячеслав Вареня комментирует... [Ответить]

@Александр

Fасebook игнорировать не нужно. То, что он менее популярен, чем Вконткте и Твиттер - это факт.

Вячеслав Вареня комментирует... [Ответить]

@оля

Рад был помочь. Надеюсь, вы успешно добавите кнопки в шаблон.

Канат комментирует... [Ответить]

Хочу попробовать поставить кнопку google+ , пишут что очень полезен, но руки не доходят

Вячеслав Вареня комментирует... [Ответить]

Обязательно нужно установить.

institut Zoippo комментирует... [Ответить]

Две кнопки на одной страничке увеличивают счетчик при нажатии на одну. Как сделать, чтобы у каждой статьи был свой счетчик?

Отправить комментарий