Кнопки социальных сетей: часть первая

кнопки социальных сетей

Сегодня я расскажу, как разместить у себя на блоге кнопки различных социальных сетей. Такие кнопки дают блогам ряд важных преимуществ - во-первых, это удобство для посетителей, которые с легкостью могут сохранять интересующую их информацию, во-вторых, владельцы блогов получают дополнительный, причем целевой трафик на свой ​​ресурс.

Сегодняшний рассказ будет построена по следующему плану:

    1. Готовые скрипты и сервисы.
    2. Плагины для WordPress.
    3. Самостоятельная установка социальных кнопок.

1. Готовые скрипты и сервисы

Относительно готовых скриптов, я бы выделил прежде-всего блок "Поделиться" от Яндекса, который позволяет вставить на свой сайт ряд социальных кнопочек, каких именно - можно выбрать, но перечень пока довольно скромный. Панелька с кнопками будет выглядеть примерно так:

Настроить внешний вид и получить код для своего сайта можно по этому адресу.

Еще один довольно известный сервис - "Одна кнопка". На Ваш выбор здесь всего три готовые варианты дизайна кнопок, причем набор кнопок изменить нельзя. Панель с кнопками может выглядеть следующим образом:

Выбрать для себя вариант панельки можно здесь: http://odnaknopka.ru/get/.

Двигаемся дальше. Есть довольно популярный сервис "Add This", который тоже предоставляет немало социальных кнопок. Здесь уже больше вариантов дизайна, больше поддерживаемых сервисов и более гибкие настройки. Панель с кнопками может выглядеть скажем так:

Если Вам понравился такой вариант - переходите по ссылке www.addthis.com, регистрируйтесь и вставляйте код в шаблон своего блога.

2. Плагины для WordPress

Один из плагинов, который мне больше понравился - SexyBookmarks. Установив данный плагин, Вы получите возможность выбора среди почти сотни социальных кнопок (на момент написания статьи я насчитал их 87).

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

плагин SexyBookmarks

Скачать плагин SexyBookmarks можно тут: http://wordpress.org/extend/plugins/sexybookmarks/.

Еще один неплохой плагин для WordPress - Digg Digg. Он также позволяет отображать кнопки различных социальных сервисов, правда список здесь, по сравнению с предыдущим, несколько скромнее. Вместе с тем, плагин Digg Digg позволяет выводить кнопки со счетчиками, выбирать различные варианты дизайна и размещение кнопок (один из примеров - на рисунке ниже).

панель кнопок Digg Digg

Скачать плагин Digg Digg можно отсюда: http://wordpress.org/extend/plugins/digg-digg/

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

3. Самостоятельная установка социальных кнопок

Третья часть сегодняшней статьи посвящена самостоятельному написанию кодов социальных кнопок под блог на WordPress. Если Вы используете все следующие коды, то получите панель, которая будет выглядеть примерно так:

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

Чтобы установить себе на блог такие кнопки, прежде всего скачайте себе на компьютер (с панели выше) изображения самих кнопок, а затем выгрузите их в какую-то папку на сервере. Адрес этой папки будете подставлять в следующие коды.

В Контакте:

<a href="http://vkontakte.ru/share.php?url=<?php the_permalink(); ?>" title="поделиться Vkontakte" target="_blank"><img src="папка_с_изображениями/vk.png"></a>

Facebook:

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" title="поделиться на Facebook" target="_blank"><img src="папка_с_изображениями/fb.png"></a>

Одноклассники:

<a href="<?php the_permalink(); ?>" onclick="ODKL.Share(this);return false;" title="поделиться в Одноклассниках" target="_blank"><img src="папка_с_изображениями/ok.png"></a>

Если будете ставить кнопку Одноклассников, дополнительно нужно в верхней части кода сайта, между тегами и вставить следующий код:

<link href="http://stg.odnoklassniki.ru/share/odkl_share.css" rel="stylesheet">
<script src="http://stg.odnoklassniki.ru/share/odkl_share.js" type="text/javascript"></script>

а также добавить строчку кода onload="ODKL.init();" в тег <body>. Это только с Одноклассниками такие заморочки.

Мой мир:

<a href="http://connect.mail.ru/share?share_url=<?php the_permalink(); ?>" title="поделиться в Моем Мире" target="_blank" ><img src="папка_с_изображениями/moymir.png" ></a>

Twitter:

<a href="http://twitter.com/home?status=<?php the_title() ?> <?php the_permalink(); ?>" title="добавить в Twitter" target="_blank"><img src="папка_с_изображениями/twi.png"></a>

FriendFeed:

<a href="http://www.friendfeed.com/share?title=<?php the_title(); ?> <?php the_permalink(); ?>" title="добавить в FriendFeed" target="_blank"><img src="папка_с_изображениями/ff.png"></a>

LiveJournal:

<a href="http://www.livejournal.com/update.bml?event=<?php the_permalink(); ?>&subject=<?php the_title(); ?>" title="опубликовать в LiveJournal" target="_blank"><img src="папка_с_изображениями/lj.png"></a>

Ya.ru:

<a href="http://my.ya.ru/posts_add_link.xml?title=<?php the_title(); ?>&URL=<?php the_permalink(); ?>" title="добавить на Я.ру" target="_blank"><img src="папка_с_изображениями/ya.png"></a>

Выбирайте коды тех социальных сервисов, которые Вам нужны, и устанавливайте их в такой последовательности, как Вам нравиться. Также при необходимости можно поменять и изображения самих кнопок - здесь все в Ваших руках.

В следующем посте я еще напишу о популярных в последнее время кнопках "Мне нравится", "Поделиться", "Рекомендую", "Класс!" и т.п.

Коментарі тимчасово вимкнені / Комментарии временно отключены