понедельник, июня 29, 2009

Blogger. Социальные кнопки v2.0

С момента написания заметки «Blogger. Социальные кнопки.» прошло уже полтора года. За это время некоторые сервисы закрылись (ma.gnolia.com), одни потеряли, а другие приобрели популярность (Twitter, Facebook, FriendFeed и т. д.).

Пришло время написать новую статью на старую тему.

Что же изменилось?

1. Теперь поддерживаются следующие сервисы:

2. Из скрипта убрано все лишнее (поскольку изначально автор писал целый фреймворк для блога).

Установка

1. Идем в настройки шаблона, вкладка «Изменить HTML

2. Ставим галочку «асширить шаблоны виджета»

3. Перед </head> вставляем следующее:

<script type='text/javascript'>
// Social Bookmarks for Blogger
// -------------------------------------------------
// Based on Beautiful Beta Javascript Library
// Website: http://beautifulbeta.blogspot.com
// Adaptation: http://yurik-notes.blogspot.com
// -------------------------------------------------
function showsbtext(id,index) {
var bookmarktext=document.getElementById(id);
var sbValues= new Array();
  sbValues[0] = 'Добавить закладку:';
  sbValues[1] = '<strong>Google Bookmarks</strong>';
  sbValues[2] = '<strong>Delicious</strong>';
  sbValues[3] = '<strong>Memori.ru</strong>';
  sbValues[4] = '<strong>BobrDobr.ru</strong>';
  sbValues[5] = '<strong>Mister Wong</strong>';
  sbValues[6] = '<strong>МоёМесто</strong>';
  sbValues[7] = '<strong>Яндекс.Закладки</strong>';
  sbValues[8] = '<strong>MyScoop</strong>';
  sbValues[9] = '<strong>Ma.gnolia.com</strong>';
  sbValues[10] = '<strong>News2.0</strong>';
  sbValues[11] = '<strong>Facebook</strong>';
  sbValues[12] = '<strong>Twitter</strong>';
  sbValues[13] = '<strong>Ping.fm</strong>';
  sbValues[14] = '<strong>FriendFeed</strong>';
document.getElementById(bookmarktext.id).innerHTML = sbValues[index];
}
</script>

4. Далее ищем в шаблоне строку:

<p class='post-footer-line post-footer-line-3'/>

и замещаем её этим:

<p class='post-footer-line post-footer-line-3'><span class='bookmark'><table align='left' border='0' cellpadding='0' width='100%'><tr><td style='vertical-align:middle' valign='middle' width='30%'><div expr:id='"sbtxt"+data:post.id'>Добавить закладку:</div><script type='text/javascript'>showsbtext(&quot;sbtxt&quot; + &quot;<data:post.id/>&quot;,0)</script></td><td>

@PUT_BUTTONS_THERE@

</td>
</tr>
</table><br/>
</span></p>

Вместо @PUT_BUTTONS_THERE@ следует поместить код соответствующих кнопок, после чего не забываем сохранить шаблон.

Кнопки

Google Bookmarks

<a expr:href='"http://www.google.com/bookmarks/mark?op=add&amp;bkmk=" + data:post.url +  "&amp;title="+data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",1);"' target='_blank'><img alt='Google Bookmarks' src='http://YOUR_DOMAIN/icon_sb_goo.gif'/></a>

Delicious.com

<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",2);"' target='_blank'><img alt='Del.icio.us' src='http://YOUR_DOMAIN/icon_sb_del.gif'/></a>

Memori.ru

<a expr:href='"http://memori.ru/link/?sm=1&amp;u_data[url]=" + data:post.url + "&amp;u_data[name]=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",3);"' target='_blank'><img alt='memori.ru' src='http://YOUR_DOMAIN/icon_sb_memori.gif'/></a>

BobrDobr.ru

<a expr:href='"http://bobrdobr.ru/addext.html?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",4);"' target='_blank'><img alt='Забобрить эту страницу!!' src='http://YOUR_DOMAIN/icon_sb_bobr.gif'/></a>

Mister Wong

<a expr:href='"http://www.mister-wong.ru/index.php?action=addurl&amp;bm_url=" + data:post.url + "&amp;bm_description=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",5);"' target='_blank'><img alt='Мистер Вонг' src='http://YOUR_DOMAIN/icon_sb_wong.gif'/></a>

МоёМесто

<a expr:href='"http://moemesto.ru/post.php?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",6);"' target='_blank'><img alt='МоёМесто' src='http://YOUR_DOMAIN/icon_sb_mesto.gif'/></a>

Яндекс. Закладки

<a expr:href='"http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&amp;lurl=" + data:post.url + "&amp;lname=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",7);"' target='_blank'><img alt='Яндекс.Закладки' src='http://YOUR_DOMAIN/icon_sb_yandex.gif'/></a>

MyScoop

<a expr:href='"http://myscoop.ru/add/?URL=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",8);"' target='_blank'><img alt='MyScoop' border='0' src='http://YOUR_DOMAIN/icon_sb_scoop.gif'/></a>

News2.0

<a expr:href='"http://news2.ru/add_story.php?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",10);"' target='_blank'><img alt='Добавить новость на news2.ru' src='http://YOUR_DOMAIN/icon_sb_news2ru.gif'/></a>

Facebook

<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",11);"' target='_blank'><img alt='Facebook' src='http://YOUR_DOMAIN/icon_sb_facebook.gif' /></a>

Необходимое дополнение.

Для правильного отображения закладки на Facebook, необходимо добавить «логотип» блога, т. е. картинку по которой ваш блог можно опознать, иначе робот возьмет любую картинку со страницы. Делается это добавлением следующей строки между тегами <head> </head>

<link href='http://YOUR_DOMAIN/YOUR_LOGO.jpg' rel='image_src'/>

Описание закладки робот возьмет сам из первого абзаца поста. Подробнее.

Twitter

<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",12);"' target='_blank'><img alt='Twitter' src='http://YOUR_DOMAIN/icon_sb_twi.gif' /></a>

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

Альтернативный вариант, использующий только возможности твиттера.

<a expr:href='"http://twitter.com/home?status=" + data:post.url + &quot; + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",12);"' target='_blank'><img alt='Twitter' src='http://YOUR_DOMAIN/icon_sb_twi.gif' /></a>

FriendFeed

<a expr:href='"http://friendfeed.com/?url=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",14);"' target='_blank'><img alt='FriendFeed' src='http://YOUR_DOMAIN/icon_sb_ff.gif' /></a>

Ping.fm

<a expr:href='"http://ping.fm/ref/?link=" + data:post.url + "&amp;title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' expr:onmouseover='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",13);"' target='_blank'><img alt='Ping.fm' src='http://YOUR_DOMAIN/icon_sb_ping.gif' /></a>

Сам скрипт, коды кнопок и иконки берем здесь.

Если это вам показалось сложным, то можно использовать альтернативу в виде AddToAny. Здесь находиться инструкция специально для Blogger.