Как добавить кнопки 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.

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

Код каждой из этих кнопок условно состоит из двух частей — одного или нескольких кодов 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 — панель кнопок социальных сетей
Вконтакте — продвижение в социальных сетях