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

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

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

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

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyhS5VkidBQQ6ZYgjxBKtsZf0EI104vy8miH1SNdb5fCco4W2Xg3uJFtaOoOVWj5KxhqR1Yb2nYhp23bhOEvoXUmr_FrniSxzCKA89DotqCSBxGUIn6O_q3uoinb_Kwx2GikIP-iXe_Sw/' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2RnvNxpUzQI1yV3KwvNT3EflhqO21joY2q1CvbOdz4vhzX2PldoOsvWp30oduoOLRR9qJfj3CcM-ISnTma6JxGAuyApiax7uJHP_TEDCX5PVtPYDeqFphdQ-0iLwp-oUFUfYc9VzN1ko/' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXs8bEXO7CQDolDUWC9rTFk1sjhJmg3zdeqsC79eaL5qXdMqy_kp97cOF9x6EwdRE6YfZqfMLUeI0wYlf5B9qCOSCeXurqKJbqAVM2_4-tvN8hA-eJmDxmbvyt6nnNLQD_J0aaZXvlMdI/' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhbpoz981ld002gMS80eBsKyFso0XKXhyh5ntFo875BrD9tggSqtddN2CXFEo-UqlVcjBNSZyXBrhFyTPDcX6kNseUEnV5OYysicXcnV76mz8K3CQKLI-Zc-8Ewcno-lpAZ9oOlok1ia8/' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUi5P12wNgiJ6V2TAEtdgjzg6t2srRR9xuOnP0fvN-ivXWVKRbmlTRQBdBuHfqfB30oWG5Vo7m3EYLogr2tcNN1OU2y-3bX2QqV97EID7sUPz7u9lagajIeYgswd4HnuOgQoCpf4dGHNs/' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQbDU2Ps_N38aYLKBhFUd9xiEOmR42lV6dsHEtVXTapsqHdcR346C83wnsZQOUwtdVMxsk6m2LV3a3zSVC9tGH6_AffTsaekcn-LEIlN-49VsV99OaZCr35aS_CdqUV8w71Jws0a-32X4/' 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidyx8WXL53ojBOtEbSbYWpqgQWAx5-CCb-qZlpQlTTjFQ4WorqdGZLlW3NR3ZQUeWBxudAmZFClyU9c4jgQuzthcE5jTNIHUMkU4TXaGvaLzSMwKv8FTt7uVRYNMUASyScBOZ4_ZLn6kM/' 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 моего сео блога.