Прикрутил кнопочки Retweet, Buzz This и тд
18 мая 2010
Прикрутил к этому блогу кнопки типа «tweet this». Уже давно собирался это сделать, вот только нормального решения мне долгое время не попадалось.
Думаю, вы сами прекрасно знаете, в чем тут заключается проблема — красивых кнопок либо нет, либо они есть, но разных размеров и прочее в этом же духе. Не буду скрывать, решение проблемы я тупо спер из блога searchengines.ru.
<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%22afiskon на ваше имя в Twitter. Если табличка с кнопками будет отображаться «через одно место», значит нужно править таблицу стилей.
К сожалению, мне не удалось найти подходящую кнопку для FriendFeed. Я слышал, что этот сервис нравится многим айтишникам. LiveJournal и Juick.com также ничего похожего в настоящее время не предлагают.
Результат вы можете видеть в конце этого поста. По-моему, получилось очень симпатично, несмотря даже на то, что кнопка для ВКонтакте заметно больше остальных.
Дополнение: Недавно Яндекс сделал свою share-кнопку, на мой взгляд довольно удачную. К сожалению, она не позволяет отследить, сколько раз ею воспользовались.
Дополнение: Еще одна зачетная share-кнопка: http://pip.qip.ru/
Дополнение: Понравилась новая кнопка от AddThis.com. Имеет очень много настроек. Порадовал общий счетчик кликов для множества сервисов. Пример кода:
<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 предлагает вам разместить код кнопок у себя на хостинге.
Метки: Блогинг, Сайтостроение.
Вы можете прислать свой комментарий мне на почту, или воспользоваться комментариями в Telegram-группе.