четверг, 9 июня 2011 г.

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

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



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


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

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

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

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

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

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

<b:if cond='data:blog.pageType == &quot;item&quot;'><noindex><div class='sharebuttons'><span style='color: #999999;'><b>Понравилось? опубликуй у себя:</b></span>
<div align='right'><p>
<noindex><!-- Place this tag in your head or just before your close body tag -->
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;ru&#39;}
</script>

<!-- Place this tag where you want the +1 button to render -->
<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='&quot;http://www.livejournal.com/update.bml?subject=Ссылка: &quot; + data:post.title + &quot;&amp;event=&quot; + data:post.title + &quot;: &quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;http://www.blogger.com/blog_this.pyra?t&quot; + &quot;&amp;u=&quot; + data:post.url + &quot;&amp;n=&quot; + data:post.title + &quot;&amp;pli=&quot; + 1' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;http://connect.mail.ru/share?share_url=&quot; + data:post.url ' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;http://my.ya.ru/posts_add_link.xml?title=&quot; + data:post.title + &quot;&amp;URL=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quotquot;height=430,width=640\&quot;); return false;&quot;' 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='&quot;http://www.google.com/buzz/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcURL=&quot; + data:blog.homePageUrl + &quot;&amp;srcTitle=&quot; + data:title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' 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&amp;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 моего сео блога.  

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
|