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. 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. 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. А Вы не подскажете как сделать чтобы каруселька плавала при прокрутки страницы?

    ОтветитьУдалить
  4. Что значит "плавала"?

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