Настало время поделиться кодом счётчиков, описанных в этой статье и её продолжении (там демо).
Код счётчиков целиком и полностью в этом файле.
Есть нюансы 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, дайте мне знать.
Проверяйте - плюсуйте счётчики (особенно гуглъплюз), за багфиксами в комменты.
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!
ОтветитьУдалить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
ОтветитьУдалитьА Вы не подскажете как сделать чтобы каруселька плавала при прокрутки страницы?
ОтветитьУдалитьЧто значит "плавала"?
ОтветитьУдалить