Share-кнопки (подробности, код)


Настало время поделиться кодом счётчиков, описанных в этой статье и её продолжении (там демо).

Код счётчиков целиком и полностью в этом файле.


Нравится




Есть нюансы c подключение разных кнопок:
-- весь код зависим от библиотеки jQuery, так что её надо установить
-- для кнопки google+ нужно выполнить обязательное действие: 
<!-- Разместите этот тег в теге head или непосредственно перед закрывающим тегом body -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>
-- для кнопки вконтакте нужно (цитирую Екатерину): "" Для установки кнопки Вконтакте необходимо зарегистрировать свой сайт на странице получения кнопки. Нужно просто указать название и адрес URL. Ниже, в полученном коде будет отдельно код для вставки в шаблон перед закрывающим тегом: 
</head>
Код для вставки: 
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?26"></script>
<script type="text/javascript">
  VK.init({apiId: XXXXXXX, onlyWidgets: true});
</script>
XXXXXXX - ваш код API, полученный после указания адреса сайта. Теперь несколько слов о коде, описанном в файле. Его можно целиком скопипастить в html виджет блоггера или вордпресса, можно раздробить и положить стили со скриптовой частью в отдельный файл на хостинг и прописать сцылки в /head, можно скопировать в шаблон в ту же часть. Внешний вид. Весь дизайн рулится в стилях и представляет собой блок: 
<style>
#share{
 /* The share box container */
 width:290px;
 background:#fffff;
 height:170px;
 margin:0px auto;
 overflow:hidden;

 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 border-radius:12px;
}

#stage{
 /* This is where the animation takes place */
 position:relative;
 width:290px;
 height:170px;
 background:white;
 float:left;

 border-bottom-left-radius:12px;
 border-top-left-radius:12px;

 -moz-border-radius-bottomleft:12px;
 -moz-border-radius-topleft:12px;

 -webkit-border-bottom-left-radius:12px;
 -webkit-border-top-left-radius:12px;
}

.btn{
 /* This class is assigned to every share button */
 background-color:white;
 height:90px;
 left:0;
 top:0;
 width:60px;
 position:relative;
 margin:20px 0 0 10px;
 float:left;
}

.bcontent{
 /* Positioned inside the .btn container */
 position:absolute;
 top:auto;
 bottom:20px;
 left:0;
}

/* Individual rules for every share button */

.vkontakte{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfa5VrtZTj54XO7uZa_N0jK5UqYSAxAq7P_DENjEVDj_NjKuTZBjC1fQzU6zaJYT0v0-qHRT-lAGQXAH8Ejgm_eiev2OTTy30BH_K2FMMg85rdA2b_9wP212wcTobVS3CykW5Bs-wTC8/s1600/vkontakte.png) no-repeat -4px bottom;}
.mailru{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzqIHjIGRsHrUYMXQKJNo-LnXZc1Qeg50P7wejMzIpMSA0WxcfbxrXLhkouasIn4z0-Orcw7VskfpQiJ-ToUTZJqP1S5t2ZGV3SuGvaxo-8-sGKHkkBKb-oZTLdgwCVT5Wc4Q5wHXrblM/s1600/mailru.png) no-repeat -4px bottom;}
.facebook{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheGEbtPdpsrFURZkczdNCb0jb9mwkzVKK-68DbQSZeaQtPMG3tu9JJLrR2dNHaW5WG6Zyokz60nNDFvfbJB9NQ-pdbcWt-MI_eDHmXUHcf6_i0-xdnJrAqHko5kWwTNXP7B2iKg4_YwiVb/s1600/facebook_reflection.png) no-repeat bottom center;}
.twitter{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDQDzI39MgAG_7_tG12AB2PgWB1pznP3T7z68Mdnhlz7d71kSO2ahWPhFR7IW_-xO_E7euFkwdrDilkbIeYwpsymwKSgv-YoGTlcMO1rZSZ1xX8mXAhUWwgtlzmZGmBuFx_I7xHAPqbxs/s400/twitter.png) no-repeat -5px bottom;}
.plus{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEPXvt1lkm6oWPbzd7uoJLU_9PfVw8MQj12HZ0qLCPGYF16g7F5Hs_HnhUa7-614BtVXvV5vRkLEbNCAeD3k0c_3H-mlDeZNMcsb3O3ef825pO4hRIDs7roOP4KauRbzuu9Px-01mHbw/s400/plus.png) no-repeat -7px bottom;}

/* Customizing the facebook share button */

span.fb_share_no_count {
 display:block;
}

span.fb_share_count_top.fb_share_no_count {
 line-height:54px;
}

span.fb_share_count_nub_top.fb_share_no_count{
 display:none;
}

span.fb_share_no_count span.fb_share_count_inner {
 background:#3B5998 url(http://static.fbshare.me/f_only.png) no-repeat scroll 20px 5px;
 display:block;
}
</style>
При желании можно подкрутить картинки отражений и поправить размеры счётчика. Контейнер со скриптами выглядит так: 
<div id="share">
<div id="stage">

<div class="btn vkontakte">
<div class="bcontent">
<div id="vk_like">
</div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical"});
</script></div>
</div>
<div class="btn twitter">
<div class="bcontent">
<a class="twitter-share-button" data-count="vertical" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript">
</script></div>
</div>
<div class="btn plus">
<div class="bcontent">
<g:plusone size="tall"></g:plusone></div>
</div>
<div class="btn mailru">
<div class="bcontent">
<a class="mrc__plugin_like_button" data-mrc-config="{'type' : 'micro', 'width' : '150'}" href="http://connect.mail.ru/share" target="_blank">Нравится</a>
<script charset="UTF-8" src="http://cdn.connect.mail.ru/js/loader.js" type="text/javascript">
</script></div>
</div>
<div class="btn facebook">
<div class="bcontent">
<a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script></div>
</div>

</div>
</div>
Как раз отсюда всем сервисам подаётся сигнал о том, что пользователь сделал тыцку в вашу пользу. Контейнеры с дивами устанавливаются в любую часть /body. И третья часть - jquery скрипт, который все эти хреновины заставляет крутиться в нужную сторону: 
<script>
$(document).ready(function(){

 /* This code is run on page load */

 var deg=0;
 var dif=-3;

 /* Assigning the buttons to a variable for speed: */
 var arr = $('.btn');

 /* Caching the length of the array in a vаriable: */
 var len = arr.length;

 /* Finding the centers of the animation container: */
 var centerX = $('#stage').width()/2 - 40;
 var centerY = $('#stage').height()/2 - 60;

 /* Applying relative positioning to the buttons: */
 arr.css('position','absolute');

 /* The function inside the interval is run 25 times per second */
 setInterval(function(){

  /* This forms an area with no activity on mouse move in the middle of the stage */
  if(Math.abs(dif)<0.5) return false;

  /* Increment the angle: */
  deg+=dif;

  /* Loop through all the buttons: */
  $.each(arr,function(i){

   /* Calculate the sine and cosine with the new angle */
   var eSin = Math.sin(((360/len)*i+deg)*Math.PI/180);
   var eCos = Math.cos(((360/len)*i+deg)*Math.PI/180);

   /* Setting the css properties */
   $(this).css({
    top:centerY+25*eSin,
    left:centerX+90*eCos,
    opacity:0.8+eSin*0.2,
    zIndex:Math.round(80+eSin*20)
   });
  })
 },40);

 /* Detecting the movements of the mouse and speeding up or reversing the rotation accordingly: */
 var over=false;
 $("#stage").mousemove(function(e){

  if(!this.leftOffset)
  {
   /* This if section is only run the first time the function is executed. */
   this.leftOffset = $(this).offset().left;
   this.width = $(this).width();
  }

  /* If the mouse is over a button, set dif to 0, which halts the animation */
  if(over) dif=0;
  else
   dif = -5+(10*((e.pageX-this.leftOffset)/this.width));

  /* In the other case calculate the speed according to the X position of the mouse */
 });

 /* Detecting whether the mouse is positioned above a share button: */
 $(".bcontent").hover(
  function(){over=true;dif=0;},
  function(){over=false;}
 );
});
</script>
Это самая интересная часть кода, можно поиграться с циферками и сделать довольно забавные штуки. Код можно прописать в /head, можно вынести в отдельный файл и прописать ссылку туда же.
Разработчик живёт здесь.

Вот вроде бы и всё. Если кто-то усовершенствует эту карусельку, pls, дайте мне знать.
Проверяйте - плюсуйте счётчики (особенно гуглъплюз), за багфиксами в комменты.
  Теги: ,

4 комментария:

  1. Анонимный22 октября 2011 г. в 13:19

    Acquiring examine this I believed it had been extremely beneficial. I value you taking time and energy to place this short article jointly. I the moment yet again uncover myself paying strategy to considerably time each looking at and commenting. But so what, it absolutely was even now worthwhile!

    ОтветитьУдалить
  2. aldous22 октября 2011 г. в 13:49

    The article has a beginning and an extension (links inside the article), as well as an indication of the author of the script, he's a genius

    ОтветитьУдалить
  3. ksport.kz4 июля 2012 г. в 06:44

    А Вы не подскажете как сделать чтобы каруселька плавала при прокрутки страницы?

    ОтветитьУдалить
  4. aldous5 июля 2012 г. в 00:49

    Что значит "плавала"?

    ОтветитьУдалить

Подписаться на: Комментарии к сообщению (Atom)