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

Опубликовано: ADv Дата 16.09.2013 в рубрике Своя тема Комментировать

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

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

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

Нам необходимо подстроить эти коды для совместимости с 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)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;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 для плавающих кнопок социальных сетей.

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

Rating: 0.0/5 (0 votes cast)