Добавляем кнопки социальных сетей на блогспот ~ Душа СЕО

Не знаю, почему я раньше не опубликовал этот пост, ведь кнопки социальных сетей должны быть у каждого СДЛ. И если вы хотите такие же кнопки как у меня, прочитайте этот пост. Я подробно распишу каждое действие .

Кнопки только самые нужные, включая новую социальная сеть гугл плюс.

Добавление кнопок социальных сетей:

1. Заходим в ПУ блога блогспот.

2. Переходив на вкладку "Дизайн".

3. Жмем "Изменить-HTML".

4. Ставим галочку на "Расширить шаблон виджета"

5. С помощью CTRL+F ищем <data:post.body/>. После этого кода нужно вставить код кнопок.

6. Копируем и вставляем код:

<b:if cond='data:blog.pageType == "item"'><noindex><div class='sharebuttons'><span style='color: #999999;'><b>Понравилось? опубликуй у себя:</b></span>
<div align='right'><p>
<noindex>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'ru'}
</script>


<g:plusone/></noindex>
<noindex><a class='twitter-share-button' data-count='horizontal' data-lang='ru' data-via=
'anubarak28'
href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></noindex>
<a class='shareme' expr:href='"http://www.livejournal.com/update.bml?subject=Ссылка: " + data:post.title + "&event=" + data:post.title + ": " + data:post.url' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='livejournal' src='http://lh5.ggpht.com/_9McH3vV50bQ/TIThzV8_g2I/AAAAAAAAAD4/slNqi6iGI50/lj.png' style='border: 0pt none;' title='поделиться в livejournal'/></a>

<a class='shareme' expr:href='"http://vkontakte.ru/share.php?url=" + data:post.url' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='ВКонтакте' src='http://lh4.ggpht.com/_9McH3vV50bQ/TITiDFjnmgI/AAAAAAAAAEI/nC74WlCV8HI/vkontakte.png' style='border: 0pt none;' title='Поделиться в ВКонтакте'/></a>

<a class='shareme' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url ' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='Facebook' src='http://lh6.ggpht.com/_9McH3vV50bQ/TIThzB5BY7I/AAAAAAAAAD0/-xPjJ89UjdY/facebook.png' style='border: 0pt none;' title='Поделиться в Facebook'/></a>

<a expr:href='"http://www.blogger.com/blog_this.pyra?t" + "&u=" + data:post.url + "&n=" + data:post.title + "&pli=" + 1' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow' target='_blank' title='Поделиться в Blogger!'><img alt='Блоггер' src='http://lh3.ggpht.com/_9McH3vV50bQ/TIThy61TTfI/AAAAAAAAADs/OpMw31LGf1Y/blogger.png' style='border: 0pt none;' title='Поделиться в Blogger!'/></a>

<a class='shareme' expr:href='"http://connect.mail.ru/share?share_url=" + data:post.url ' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='Мой Мир' src='http://lh6.ggpht.com/_9McH3vV50bQ/TIThzRPQJSI/AAAAAAAAAD8/xGTFLwC86DE/mymail.png' style='border: 0pt none;' title='Поделиться в Мой Мир'/></a>

<a class='shareme' expr:href='"http://my.ya.ru/posts_add_link.xml?title=" + data:post.title + "&URL=" + data:post.url' expr:onclick='"window.open(this.href, \"_blank\&quotquot;height=430,width=640\"); return false;"' rel='nofollow'><img alt='Мой Круг' src='http://lh6.ggpht.com/_9McH3vV50bQ/TITh9S3gvjI/AAAAAAAAAEE/v6nyg8dD_S0/ya_ru.png' style='border: 0pt none;' title='Поделиться в Моем Круге'/></a>

<a class='shareme' expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&title=" + data:post.title + "&srcURL=" + data:blog.homePageUrl + "&srcTitle=" + data:title' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' rel='nofollow'><img alt='Google Buzz' src='http://lh3.ggpht.com/_9McH3vV50bQ/TIThy_zjaQI/AAAAAAAAADw/_hkPrQqgh9k/buzz.png' style='border: 0pt none;' title='Поделиться в Google Buzz'/></a> </p></div></div></noindex></b:if>

То, что выделено красным, нужно заменить на ваш ник в твиттере.

7.Сохраняем шаблон.

8. Копируем код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.shareme[href^='http://my.ya.ru']").attr("href", function() {
return "http://passport.yandex.ru/passport?mode=auth&retpath=" + escape(this.href);
});
});
</script>

9. Ищем строчку </head> и до нее вставляем этот код.

10. Переходим в "Дизайнер шаблонов"

11. Ищем вкладку "Дополнительно" и жмем на нее

12. Жмем "Добавить CSS"

13. Вот и десерт. Нам нужно, чтобы кнопки социальных сетей стали прозрачными.
Для этого вставляем в CSS код:

.sharebuttons{
font-size: 13px; /* размер шрифта */
font-weight: bold; /* стиль текста: жирный */
padding:5px; /* отступ от границ */
border: none; /* толщина и цвет рамки */
background: #FFFFFF; /* фоновый цвет */
}

.sharebuttons a img{
border: none;
opacity:0.3; /* непрозрачность: 30% */
}

.sharebuttons a:hover img{
border: none;
opacity:1.0; /* непрозрачность: 100% */
}

13. Теперь, просто жмем "Применить к блогу".

Кнопки соц сетей от Яндекса — блок Поделиться

Наш любимый яндекс подарил нам кнопки социальных сетей своего производства. Кнопки у яшки получились просто отличные, но немного маленькие. Создать эти кнопки не составит труда, и сделать это можно по этому адресу api.yandex.ru/share.

Выберите иконки, которые будут стоять рядом с кнопкой, выберите внешний вид блока и скопируйте код в нужное вам место.

Дополнительные кнопки социальных сетей

Кнопка ВКонтакте

При необходимости можно вставить еще и дополнительные кнопки, например, кнопку "мне нравится" вконтакте. Вк очень популярна в Россие, поэтому установить ее не помешает.

Итак, идем сюда и настраиваем свою кнопку. Настроили? Теперь нужно вставить данный нам код между тегами <head></head>.

Кнопка facebook

С вконтактом разобрались, теперь идем к фейсбуке, которая, по моему мнению, намного лучше вк.

Здесь все делать нужно почти также, только вставлять код нужно в то место, где вы хотите его видеть. Это может быть или место после заголовка, как ретвит, или после поста и тд.

---

Вот наши кнопочки и готовы. С вопросами обращайтесь в комментарии и не забывайте нажимать на мои кнопки социальных сетей.

P.S. Первоначально код я взял здесь, но добавил кнопку ретвита(там была не рабочая) и новенькую +1 кнопку.

Понравилась статья? Подписывайтесь на RSS моего сео блога.