From 80a591d75710f778d62ba089770f69101c796359 Mon Sep 17 00:00:00 2001 From: Artem Sapegin Date: Thu, 20 Oct 2011 15:43:22 +0400 Subject: [PATCH] Experimental Google+ Button. --- demo.html | 3 +- googleplusonecount.php | 42 ++++++++++++++++++ social-likes.css | 98 +++++++++++++++++++++++++++++++++++++++++- social-likes.js | 46 +++++++++++++++++--- 4 files changed, 180 insertions(+), 9 deletions(-) create mode 100644 googleplusonecount.php diff --git a/demo.html b/demo.html index 3bc68ca..e56e51a 100644 --- a/demo.html +++ b/demo.html @@ -16,8 +16,9 @@
  • Facebook
  • Twitter
  • Мой мир
    • -
  • В контакте
    • +
  • Вконтакте
  • Одноклассники
    • +
  • diff --git a/googleplusonecount.php b/googleplusonecount.php new file mode 100644 index 0000000..adb8aaa --- /dev/null +++ b/googleplusonecount.php @@ -0,0 +1,42 @@ + array('Content-type: application/json'), + CURLOPT_POST => true, + CURLOPT_POSTFIELDS => '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]', + CURLOPT_RETURNTRANSFER => true, + CURLOPT_SSL_VERIFYPEER => false, + CURLOPT_URL => 'https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ' + )); + $result = curl_exec($curl); + curl_close($curl); + + if ($result) { + $json = json_decode($result, true); + return $json[0]['result']['metadata']['globalCounts']['count']; + } + return false; +} + +if (empty($_GET['callback']) || empty($_GET['url'])) { + header('HTTP/1.0 400 Bad request'); + exit(); +} + +print $_GET['callback'] . '("' . get_google_plusone_count($_GET['url']) . '")'; + +?> \ No newline at end of file diff --git a/social-likes.css b/social-likes.css index 47bfe1c..69d7817 100644 --- a/social-likes.css +++ b/social-likes.css @@ -18,7 +18,7 @@ margin-left: 0; } .social-likes li:before { - display: none; + /*display: none;*/ } .social-likes li a, .social-likes li b, .social-balloon, .social-balloon textarea { font-family: "Trebuchet MS", "Helvetica Neue", Tahoma, sans-serif; @@ -225,6 +225,100 @@ .social-likes li.facebook a i { background-position: 0 -20px; } + +/* Google +1 */ +.social-likes li.plusone a, .social-likes li.plusone b { + border-color: #CAD4E7; + } +.social-likes li.plusone a { + width: 32px; + padding: 1px 4px; + background: #dbdbdb; + background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#dbdbdb)); + background: -moz-linear-gradient(top, #f9f9f9, #dbdbdb); + background: -ms-linear-gradient(top, #f9f9f9, #dbdbdb); + background: -o-linear-gradient(top, #f9f9f9, #dbdbdb); + background: linear-gradient(top, #f9f9f9, #dbdbdb); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = #f9f9f9, EndColorStr = #dbdbdb); + color: #166aee; + border-color: #b3b3b3; + text-align: center; + font-style: italic; + } +.social-likes li.plusone a:hover, .social-likes li.plusone a:active { + background: #e0e0e0; + background: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#bbb)); + background: -moz-linear-gradient(top, #fafafa, #bbb); + background: -ms-linear-gradient(top, #fafafa, #bbb); + background: -o-linear-gradient(top, #fafafa, #bbb); + background: linear-gradient(top, #fafafa, #bbb); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = #fafafa, EndColorStr = #bbbbbb); + color: #1e52a4; + border-color: #a3a3a3; + } +.social-likes li.plusone b i { + border-right-color: #ccc; + } +.social-likes li.plusone b { + /*background: #f2f3f7;*/ + } +.social-likes li.plusone b i i { + border-right-color: #fff !important; + } +.social-likes li.plusone a i { + display: none; /* Hide from old browsers */ + } + +@media only screen and (min-width: 1px) { +.social-likes li.plusone a, .social-likes li.plusone a:hover, .social-likes li.plusone a:active { + line-height: 20px; + vertical-align: bottom; + border-top-color: transparent; + } +.social-likes li.plusone a i { + display: block; + top: -1px; + left: -1px; + width: 42px; + height: 5px; + background: -webkit-gradient(linear, 0 0, 42 0, color-stop(0.25, #e32c3b), color-stop(0.25, #148EE3), color-stop(0.5, #148EE3), color-stop(0.5, #36C520), color-stop(0.75, #36C520), color-stop(0.75, #FFCA27), color-stop(1, #FFCA27)); + background: -webkit-linear-gradient(360deg, #E32C3B 25%, #148EE3 25%, #148EE3 50%, #36C520 50%, #36C520 75%, #FFCA27 75%, #FFCA27 100%); + background: -moz-linear-gradient(360deg, #E32C3B 25%, #148EE3 25%, #148EE3 50%, #36C520 50%, #36C520 75%, #FFCA27 75%, #FFCA27 100%); + background: -o-linear-gradient(360deg, #E32C3B 25%, #148EE3 25%, #148EE3 50%, #36C520 50%, #36C520 75%, #FFCA27 75%, #FFCA27 100%); + background: linear-gradient(360deg, #E32C3B 25%, #148EE3 25%, #148EE3 50%, #36C520 50%, #36C520 75%, #FFCA27 75%, #FFCA27 100%); + border-bottom: 1px solid #d7d7d7; + -webkit-border-radius: 3px 3px 0px 0px; + -moz-border-radius: 3px 3px 0px 0px; + border-radius: 3px 3px 0px 0px; + } +.social-likes li.plusone a i:before, .social-likes li.plusone a i:after { + content: ""; + position: absolute; + bottom: -1px; + width: 1px; + height: 1px; + background: #b3b3b3; + } +.social-likes li.plusone a i:before { + left: 0; + } +.social-likes li.plusone a i:after { + right: 0; + } +.social-likes li.plusone a:hover i:before, .social-likes li.plusone a:hover i:after, +.social-likes li.plusone a:active i:before, .social-likes li.plusone a:active i:after { + background: #a3a3a3; + } +} + +/* Hacks for IE9 which supports media queries but not support CSS gradients */ +.social-likes-msie-lte9 li.plusone a i { + display: none; + } +.social-likes-msie-lte9 li.plusone a, .social-likes-msie-lte9 li.plusone a:hover, .social-likes-msie-lte9 li.plusone a:active { + border-color: #CAD4E7; + } + /* Mail.ru */ .social-likes li.mailru a { @@ -270,7 +364,7 @@ background-position: 0 -40px; } -/* V kontakte */ +/* Vkontakte */ .social-likes li.vkontakte a { border-color: #4170a4; } diff --git a/social-likes.js b/social-likes.js index 42ee419..dbe87c4 100644 --- a/social-likes.js +++ b/social-likes.js @@ -13,17 +13,22 @@ (function($){ - var socialLikes = function(){ + var socialLikes = function() { this.init(); }; socialLikes.prototype = { init: function() { this.pageUrl = window.location.href.replace(window.location.hash, ''); + var escapedPageUrl = escape(this.pageUrl); this.container = $('.social-likes'); var this_ = this; this.counters = {}; + if ($.browser.msie && $.browser.version <= 9) { + this.container.addClass('social-likes-msie-lte9'); + } + this.container.find('li').each(function(){ var buttonWrapper = $(this); var classes = buttonWrapper[0].className.split(' '); @@ -32,7 +37,7 @@ switch(cls) { case 'twitter': if (!this_.counters.twiter) { - $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + escape(this_.pageUrl) + '&callback=?', function(data){ this_.updateCount(cls, data.count); }); + $.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + escapedPageUrl + '&callback=?', function(data){ this_.updateCount(cls, data.count); }); this_.counters.twiter = true; } @@ -49,7 +54,7 @@ case 'facebook': if (!this_.counters.facebook) { - $.getJSON('https://api.facebook.com/method/fql.query?query=select total_count from link_stat where url="' + escape(this_.pageUrl) + '"&format=json&callback=?', function(data){ this_.updateCount(cls, data[0].total_count); }); + $.getJSON('https://api.facebook.com/method/fql.query?query=select total_count from link_stat where url="' + escapedPageUrl + '"&format=json&callback=?', function(data){ this_.updateCount(cls, data[0] && data[0].total_count); }); this_.counters.facebook = true; } @@ -62,10 +67,39 @@ }, buttonWrapper, cls); break; + + case 'plusone': + /* buttonWrapper.replaceWith(''); + + // Load standard Google +1 button + window.___gcfg = { + lang: 'ru', + parsetags: 'explicit' + }; + 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);*/ + + if (!this_.counters.plusone) { + var counterUrl = buttonWrapper.attr('data-counter-url'); + if (counterUrl) { + $.getJSON(counterUrl + '?url=' + escapedPageUrl + '&callback=?', function(data){ this_.updateCount(cls, data); }); + this_.counters.plusone = true; + } + } + + this_.initButton({ + urlParam: 'url', + popupUrl: 'https://plusone.google.com/_/+1/confirm?hl=ru_RU', + pupupWidth: 500, + popupHeight: 300 + }, buttonWrapper, cls); + + break; case 'mailru': if (!this_.counters.mailru) { - $.getJSON('http://connect.mail.ru/share_count?url_list=' + escape(this_.pageUrl) + '&callback=1&func=?', function(data){ this_.updateCount(cls, data[this_.pageUrl] && data[this_.pageUrl].shares); }); + $.getJSON('http://connect.mail.ru/share_count?url_list=' + escapedPageUrl + '&callback=1&func=?', function(data){ this_.updateCount(cls, data[this_.pageUrl] && data[this_.pageUrl].shares); }); this_.counters.mailru = true; } @@ -84,7 +118,7 @@ this_.updateCount(cls, count); }}}; $.ajax({ - url: 'http://vkontakte.ru/share.php?act=count&index=1&url=' + escape(this_.pageUrl), + url: 'http://vkontakte.ru/share.php?act=count&index=1&url=' + escapedPageUrl, dataType: 'jsonp' }); this_.counters.vkontakte = true; @@ -106,7 +140,7 @@ this_.updateCount(cls, count); }}; $.ajax({ - url: 'http://www.odnoklassniki.ru/dk?st.cmd=extLike&uid=odklcnt0&ref=' + escape(this_.pageUrl), + url: 'http://www.odnoklassniki.ru/dk?st.cmd=extLike&uid=odklcnt0&ref=' + escapedPageUrl, dataType: 'jsonp' }); this_.counters.odnoklassniki = true;