Как добавить счетчики социальных сетей в WordPress

Ранее на нашем блоге мы создали шпаргалку по социальным сетям для WordPress, однако она только лишь рассказывала, как добавить кнопки социальных сетей. А ведь социальные сети растут наряду с расширением веб-технологий, и видится все меньше и меньше смыла в простых соц.кнопках. Они заменяются на виджеты счетчиком репостов, таких как Поделиться Вконтакте, tweetmeme ретвитов, счетчик digg, Поделиться от Facebook и прочие. В этой статье мы покажем вам как добавить различные счетчики социальных сетей в WordPress.

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

Digg
StumbleUpon
Tweetmeme Retweet
Facebook Share
Facebook Like Button
Reddit
Njuice Google Buzz
Sphinn

Настраиваем коды

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

Примечание: Необходимо вставлять эти коды внутрь цикла, в большинстве случаев это будет файл single.php.

Digg

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>

<a class="DiggThisButton DiggCompact" href="http://digg.com/submit?url=<?php the_permalink(); ?>"></a>

Обычно не нужно добавлять часть с href. Однако если этого не сделать, и у вас настроена постраничная навигация по комментариям или записям, то кнопка от digg не будет срабатывать на всех страницах. Поэтому если основная страница была отправлена в соц.сеть, то на второй кнопка также будет активной, что позволит пользователю снова добавить страницу в соц.сеть, и таким образом образуется дубликат.

StumbleUpon

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1&r=<?php the_permalink(); ?>"></script>

Tweetmeme Retweet

<script type="text/javascript">
tweetmeme_source = 'advdevise'; tweetmeme_service = 'bit.ly'; tweetmeme_style = 'compact'; tweetmeme_url = '<?php the_permalink() ?>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Убедитесь, что вы изменили переменную Tweetmeme_source на ваше имя в твиттере. Сейчас оно — @advdevise. Поэтому, если кто-то кликнет по нему, то отобразится RT @advdevise Заголовок страницы — Ссылка. Мы используем сервис сокращения ссылок bit.ly, вы же можете использовать любой, который предложит tweetmeme, но все же bit.ly — один из лучших.

Facebook Share

<a name="fb_share" type="button_count" share_url="<?php the_permalink(); ?>" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Facebook Like Button

Facebook Like Button — поразительный инструмент для трафика на блог!

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe>

<script type="text/javascript">
reddit_url = "<?php the_permalink(); ?>";
reddit_title = "<?php the_title(); ?>";
</script>
<script type="text/javascript" src="http://reddit.com/static/button/button1.js"></script>

Sphinn

<script type="text/javascript">submit_url = '<?php the_permalink(); ?>';</script>
<script type="text/javascript" src="http://sphinn.com/evb/buttons.php?b=small"></script>

LinkedIn Button

<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="top"></script>

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

Какие социальные сети добавлены у вас на блоге? Делитесь кодами в комментариях.

VN:F [1.9.22_1171]