share-this-buttons/

Прикрутил к этому блогу кнопки типа «tweet this». Уже давно собирался это сделать, вот только нормального решения мне долгое время не попадалось.

Думаю, вы сами прекрасно знаете, в чем тут заключается проблема — красивых кнопок либо нет, либо они есть, но разных размеров и прочее в этом же духе. Не буду скрывать, решение проблемы я тупо спер из блога searchengines.ru .

< div id = «smodiv» style = «display: none;» >
< table style = «padding: 2px; vertical-align: middle; width: 100%;» >
< tr >< td >
< script type = «text/javascript» >
document.write( unescape( ‘%3Ca%20href%3D%22http%3A//twitter.com/share%22%20class%3D%22twitter-share-button%22%20data-count%3D%22horizontal%22%20data-via%3D%22afiskon%22%3ETweet%3C/a%3E’));
document.getElementById(‘smodiv’).style.display=»block»;
< / script >
< script type = «text/javascript» src = «http://platform.twitter.com/widgets.js» >< / script >
< / td >< td >
< script type = «text/javascript» > document.write( unescape( ‘%3Ca%20title%3D%22Post%20on%20Google%20Buzz%22%20class%3D%22google-buzz-button%22%20data-url%3D%22 <?php the_permalink ( ) / * в url не должно быть ‘плохих’ символов * /
?> %22%20href%3D%22http%3A//www.google.com/buzz/post%22%20data-button-style%3D%22small-count%22%20rel%3D%22nofollow%22%3E%3C/a%3E’)); < / script >
< script type = «text/javascript» src = «http://www.google.com/buzz/api/button.js» >< / script >
< / td >< td >
< script type = «text/javascript» > document.write( unescape( ‘%3Ca%20name%3D%22fb_share%22%20type%3D%22button_count’ + ‘%22%20href%3D%22http%3A//www.facebook.com/sharer.php%22%20rel%3D%22’ + ‘nofollow%22%3EShare%3C/a%3E’)); < / script >
< script src = «http://static.ak.fbcdn.net/connect.php/js/FB.Share» type = «text/javascript» >< / script >
< / td >< td >
< script type = «text/javascript» > document.write( unescape( ‘%3Ca%20class%3D%22mrc__share%22%20href%3D%22http%3A//connect.mail.ru/’ + ‘share%22%20type%3D%22button_count%22%20rel%3D%22nofollow%22%3EВ Мой Мир%3C/a%3E’)); < / script >
< script src = «http://cdn.connect.mail.ru/js/share/2/share.js» type = «text/javascript» >< / script >
< / td >< td >
< script type = «text/javascript» src = «http://vkontakte.ru/js/api/share.js?5» >< / script >
< script type = «text/javascript» > document.write(VK.Share.button({url: » <?php the_permalink ( ) ?> «},{type: «round», text: «Сохранить»})); < / script >
< / td >< / tr >
< / table >
< / div >

Этот код немного отличается от оригинала. Например, я добавил к ссылкам атрибут nofollow, удалил немного лишнего, переставил иконки в таком порядке, в каком они вроде бы смотрятся посимпатичней. Закодировал часть строк в urlencode, чтобы не мешали при валидации HTML-кода. Да и количество ссылок на странице с точки зрения поисковых систем теперь существенно меньше. Еще я сделал так, чтобы пользователи с отключенным JavaScript не видели наших кнопок. Точнее, не видели того ужаса, в который они превращаются при отключении JavaScript.

Разместить сабж нужно либо путем правки шаблона, либо с помощью плагина типа Post Layout. Если решите использовать этот код, то не забудьте заменить значение data-via%3D%22 afiskon на ваше имя в Twitter. Если табличка с кнопками будет отображаться «через одно место», значит нужно править таблицу стилей.

К сожалению, мне не удалось найти подходящую кнопку для FriendFeed. Я слышал, что этот сервис нравится многим айтишникам. LiveJournal и Juick.com также ничего похожего в настоящее время не предлагают.

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

Дополнение: Недавно Яндекс сделал свою share-кнопку , на мой взгляд довольно удачную. К сожалению, она не позволяет отследить, сколько раз ею воспользовались.

Дополнение: Еще одна зачетная share-кнопка: http://pip.qip.ru/

Дополнение: Понравилась новая кнопка от AddThis.com . Имеет очень много настроек. Порадовал общий счетчик кликов для множества сервисов. Пример кода:

<!— AddThis Button BEGIN —>
< div class = «addthis_toolbox addthis_default_style addthis_32x32_style» >
< a class = «addthis_button_vk» >< / a >
< a class = «addthis_button_facebook» >< / a >
< a class = «addthis_button_twitter» >< / a >
< a class = «addthis_button_friendfeed» >< / a >
< a class = «addthis_button_googlebuzz» >< / a >
< a class = «addthis_button_livejournal» >< / a >
< a class = «addthis_button_blogger» >< / a >
< a class = «addthis_button_tumblr» >< / a >
< a class = «addthis_button_delicious» >< / a >
< a class = «addthis_button_evernote» >< / a >
< a class = «addthis_button_stumbleupon» >< / a >
< a class = «addthis_button_linkedin» >< / a >
< a class = «addthis_button_moikrug» >< / a >
< a class = «addthis_button_email» >< / a >
< a class = «addthis_counter addthis_bubble_style» >< / a >
< / div >
< script type = «text/javascript» > var addthis_config = { data_track_clickback: true }; < / script >
< script type = «text/javascript» >
var addthis_share = {
templates: { twitter: ‘{{title}} {{url}} via @afiskon’ }
}
< / script >
< script type = «text/javascript» src = «http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e25095b19641ccd» >< / script >
<!— AddThis Button END —>

В настоящее время пользуюсь этим сервисом.

Дополнение: Перешел на Share42 , очень удобная и приятная штука. В отличие от аналогов Share42 предлагает вам разместить код кнопок у себя на хостинге.

EnglishRussianUkrainian