Кнопки социальных сетей со счетчиком публикации

Автор Damir-Tote. Опубликовано в SMO, Блог

Ранее мною и не раз освещалась тема создания кнопок социальных сетей, но еще не было подробного мануала создания кнопки социальных сетей со счетчиком публикации. В котором я Вам намереваюсь рассказать о создании всех наиболее популярных счетчиков социальных сетей: Facebook, Google +, Вконтакте, Twitter, Mail, Яндекс, Одноклассники и простая кнопка постинга в Livejournal. Тема установки счетчика для лайка думаю будет интересна всем – это не простые статичные кнопки социальных сетей, а красивые изменяющиеся циферки по которым лайкнули.


 
Итак, давайте вспомним серию статей по созданию простых
кнопок социальных сетей:
Кнопки социальных сетей со счетчиком

Приведенные выше установки кнопок социальных сетей на свой блог представлены, либо в виде HTML или скриптов. Если в виде HTML, то это дополнительные внешние ссылки со страниц блога. Если в виде скрипта, то это дополнительная нагрузка на блог. Ведь приходится скрипту обращаться на внешний сервер, а это время скорости загрузки страниц.

Установки счетчиков социальных сетей на блог

Пойдем по следующему списку по порядку, а в конце объясню, как эти все счетчики можно объединить в одну строчку.
  • Twitter;
  • Mail;
  • Facebook;
  • Google +;
  • Вконтакте;
  • Одноклассники;
  • Яндекс;
  • ЖЖ.

Счетчик от Twitter

Есть несколько вариантов установки.
 
Кнопка со счетчиком Tweet:
 

 <a href=»http://twitter.com/share» class=»twitter-share-button» data-count=»horizontal»>Tweet</a><script type=»text/javascript» src=»http://platform.twitter.com/widgets.js»></script>
 
Кнопка со счетчиком
Твитнуть
:
 

 <a href=»http://twitter.com/share» class=»twitter-share-button» data-count=»horizontal» data-lang=»ru»>Tweet</a><script type=»text/javascript» src=»http://platform.twitter.com/widgets.js»></script>
 
Кнопка со счетчиком в виде
блока
:
 

 <a href=»http://twitter.com/share» class=»twitter-share-button» data-count=»vertical»>Tweet</a><script type=»text/javascript» src=»http://platform.twitter.com/widgets.js»></script>

Счетчик от Mail (Мой Мир)

Кнопка нравится со счетчиком

Нравится


<a target=»_blank» class=»mrc__plugin_like_button» href=»http://connect.mail.ru/share» data-mrc-config=»{‘type’ : ‘button’, ‘width’ : ‘150’}»>Нравится</a><script src=»http://cdn.connect.mail.ru/js/loader.js» type=»text/javascript» charset=»UTF-8″></script>

 
Кнопка со счетчиком и описанием:
 

Нравится


<a target=»_blank» class=»mrc__plugin_like_button» href=»http://connect.mail.ru/share» data-mrc-config=»{‘type’ : ‘button’, ‘width’ : ‘550’, ‘show_text’ : ‘true’}»>Нравится</a><script src=»http://cdn.connect.mail.ru/js/loader.js» type=»text/javascript» charset=»UTF-8″></script>

 
Кнопка со счетчиком нравится с использованием фото:
 

Нравится


<a target=»_blank» class=»mrc__plugin_like_button» href=»http://connect.mail.ru/share» data-mrc-config=»{‘type’ : ‘button’, ‘width’ : ‘550’, ‘show_faces’ : ‘true’}»>Нравится</a><script src=»http://cdn.connect.mail.ru/js/loader.js» type=»text/javascript» charset=»UTF-8″></script>

 
Маленькая кнопка нравится со счетчиком:
 

Нравится


<a target=»_blank» class=»mrc__plugin_like_button» href=»http://connect.mail.ru/share» data-mrc-config=»{‘type’ : ‘micro’, ‘width’ : ‘150’}»>Нравится</a><script src=»http://cdn.connect.mail.ru/js/loader.js» type=»text/javascript» charset=»UTF-8″></script>

Счетчик от Facebook

Порой кнопка заедает или пропадает, не известны причины
этого, но чаще работоспособен. Вашему примеру кнопка со счетчиком «Мне
нравится» и английским вариантом «
Like».
 
Кнопка со счетчиком «Мне нравится»:
 
<div id=»fb-root»></div><script src=»http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=»» send=»false» layout=»button_count» width=»90″ show_faces=»false» font=»lucida grande»></fb:like>
 
Кнопка «Мне нравится» со счетчиком сверху:
 

<div class=’fb-like-button’>

 <b:if cond=’data:blog.pageType == &quot;item&quot;’>

 <script src=’http://connect.facebook.net/ru_RU/all.js#xfbml=1’/><fb:like expr:href=’data:post.url’ layout=’box_count’ font=’tahoma’ show_faces=’false’ width=’130’/>

 </b:if>

 </div>

Кнопка со счетчиком «Like»:

<div id=»fb-root»></div><script src=»http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=»» send=»false» layout=»button_count» width=»90″ show_faces=»false» font=»lucida grande»></fb:like>

Кнопка «Like» счетчик сверху:

 
<div id=»fb-root»></div><script src=»http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=»» send=»false» layout=»box_count» width=»90″ show_faces=»false» font=»lucida grande»></fb:like>

Счетчик Google +

Очень важный счетчик, если этот счетчик демонстрирует не малое число лайков, то позиция данной страницы ощутимо вырастит в поисковой системе Google. Поэтому не забывайте нажимать на него, пусть больше людей узнают об этой статье.
 
В шаблоне блога, после тега <body> размещаем этот код:
 

<script type=»text/javascript»>

   window.___gcfg = {lang: ‘ru’};

   (function() {

     var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;

     po.src = ‘https://apis.google.com/js/plusone.js’;

     var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);

   })();

</script>

 
Кнопка счетчика Google +

<g:plusone size=»medium»></g:plusone>

 
small
 
medium
 
standard
 
tall




 

 

 

Вы можете его видоизменять в зависимости от ваших потебностей.

Счетчик В контакте

Для создания лайка от Вконтакте не много все сложнее. Вам обязательно нужно заполучить на свой блог ID, который вы уже сможете использовать на других возможностях Вконтакте (комментарии, группы).
 
Первый код необходимо вставить перед закрывающим тегом </head>.
 

<script type=»text/javascript» src=»http://userapi.com/js/api/openapi.js?48″></script>

 <script type=»text/javascript»>

   VK.init({apiId: 111111, onlyWidgets: true});

 </script>

 
А второй непосредственно в то место, где вы хотите
увидеть свой счетчик от Вконтакте.
 
Счетчики от Вконтакте могут быть разных размеров.
 
Миниатюрная кнопка со счетчиком:
 

<!— Put this div tag to the place, where the Like block will be —>

 <div id=»vk_like»></div>

 <script type=»text/javascript»>

 VK.Widgets.Like(«vk_like», {type: «mini»});

 </script>

 
Обычная кнопка «Мне нравится» от В контакте:
 

<!— Put this div tag to the place, where the Like block will be —>

 <div id=»vk_like»></div>

 <script type=»text/javascript»>

 VK.Widgets.Like(«vk_like», {type: «button»});

 </script>

 
Кнопка «Мне нравится» с текстовым счетчиком:
 

<!— Put this div tag to the place, where the Like block will be —>

 <div id=»vk_like»></div>

 <script type=»text/javascript»>

 VK.Widgets.Like(«vk_like», {type: «full»});

 </script>

 
Кнопка со счетчиком в виде блока:
 

<!— Put this div tag to the place, where the Like block will be —>

 <div id=»vk_like»></div>

 <script type=»text/javascript»>

 VK.Widgets.Like(«vk_like», {type: «vertical»});

 </script>

Счетчик Одноклассники

Опять же, как и в случае с В контакте, перед закрывающим кодом </head> прописываем следующий код:

<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’/>

Далее сложности имеются, будет все зависеть от использованного вами шаблона. Находим тег <body и прописываем к нему следующий фрагмент:

onload=»ODKL.init();»

Получится у нас следующее:

<body onload=»ODKL.init();»

А далее уже устанавливаем сам счетчик от одноклассников.

0

<a class=»odkl-klass-stat» expr:href=’data:post.url’ onclick=»ODKL.Share(this);return false;» ><span>0</span></a>

или использовать вот этот вариант:

Нравится

<a target=»_blank» rel=»nofollow» href=»http://connect.mail.ru/share» data-mrc-config=»{‘type’ : ‘button’, ‘caption-mm’ : ‘1’, ‘caption-ok’ : ‘1’, ‘counter’ : ‘true’, ‘text’ : ‘true’, ‘width’ : ‘100%’}»>Нравится</a><script src=»http://cdn.connect.mail.ru/js/loader.js» type=»text/javascript» charset=»UTF-8″></script>

Счетчик Яндекса

На самом деле мало кто пользуется им, но все же для красоты можно и его использовать.
 


<a counter=»yes» rel=»nofollow» type=»button» size=»large» share_text=»Нравиться» name=»ya-share»> </a><script charset=»utf-8″ type=»text/javascript»>if (window.Ya && window.Ya.Share) {Ya.Share.update();} else {(function(){if(!window.Ya) { window.Ya = {} };Ya.STATIC_BASE = ‘http:\/\/yandex.st\/wow\/2.3.21\/static’;Ya.START_BASE = ‘http:\/\/my.ya.ru\/’;var shareScript = document.createElement(«script»);shareScript.type = «text/javascript»;shareScript.async = «true»;shareScript.charset = «utf-8»;shareScript.src = Ya.STATIC_BASE + «/js/api/Share.js»;(document.getElementsByTagName(«head»)[0] || document.body).appendChild(shareScript);})();}</script>

Кнопка LiveJournal

Обычная кнопка репост от ЖЖ для вставки на блог. Полезная кнопка, но не в таком виде безусловно, лучше использовать не текстовый вариант, а использовать картинку.
 
Текстовый вариант репоста:
 

Репост страницы в ЖЖ

 <a rel=»nofollow» href=»http://www.livejournal.com/update.bml» onClick=»location.href=’http://www.livejournal.com/update.bml?event=’+encodeURIComponent(document.location.href) + ‘ — …&subject=New URL’;return false;»><img src=»http://stat.livejournal.com/img/userinfo.gif» border=»0″ align=»absmiddle»>РепостстраницывЖЖ</a>
 
Вот на этом все. Все кнопки со счетчиками были продемонстрированы, вам остается из всего списка собрать для себя нужные социальные кнопки и вставить себе на блог после текста статьи.
 
А как сделать красивый вариант, чтобы они по порядку расположились? У меня именно так, в линию располагаются, можете ниже глянуть.
 
Для этого необходимо использовать код таблицы, я о нем упоминал в статье «Изучение
основ HTML
»:
 

<table>

<tr>

<td>Код счетчика</td>

<td>Код счетчика</td>

</tr>

</table>

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

Трекбэк с Вашего сайта.

  • Uglion

    А я установил «секретные» кнопки яндекса со счётчиком. Выглядят очень красиво. Процесс установки описал тут: http://uglion.ru/articles/1/39/knopki-podelitsya-ot-yandeksa-so-schetchikom/

    Пример их работы можно посмотреть там же. Раньше у меня стояли кнопки share42. Тоже хорошие, и код скрипта был на самом сайте, но там счётчик отображался только при наведении на кнопку. Яндексовские лучше, я в восторге.

  • zaxvat4ik

    Кнопки супер…везде какие то сложные и выводятся не так… но поправте кавычки и апострофы…они какие то не правильные

.