Very big refactoring. Ability to change page URL.
parent
7ccca71af1
commit
8762231b4f
16
demo.html
16
demo.html
|
@ -28,5 +28,21 @@
|
||||||
<li class="code"><a href="#" title="Получить код для публикации ссылки в другом сервисе">Код</a></li>
|
<li class="code"><a href="#" title="Получить код для публикации ссылки в другом сервисе">Код</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
<ul class="social-likes" data-url="http://landscapists.info/igor-shpilenok">
|
||||||
|
<li class="facebook"><a href="#" title="Опубликовать ссылку на Фейсбуке">Facebook</a></li>
|
||||||
|
<li class="twitter"><a href="#" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</a></li>
|
||||||
|
<li class="mailru"><a href="#" title="Опубликовать ссылку в Моём Мире">Мой мир</a></li>
|
||||||
|
<li class="vkontakte"><a href="#" title="Опубликовать ссылку во Вконтакте">Вконтакте</a></li>
|
||||||
|
<li class="odnoklassniki"><a href="#" title="Опубликовать ссылку в Одноклассниках">Одноклассники</a></li>
|
||||||
|
<!--li class="plusone" data-counter-url="/social-likes/googleplusonecount.php"><a href="#" title="Плюсануть в Гугле">+1</a></li-->
|
||||||
|
<li class="livejournal"><form action="http://www.livejournal.com/update.bml" method="post" target="_blank">
|
||||||
|
<input type="hidden" name="mode" value="full">
|
||||||
|
<input type="hidden" name="subject" value="Social Likes">
|
||||||
|
<input type="hidden" name="event" value="<a href=https://github.com/sapegin/social-likes>Красивые кнопки «лайков» социальных сетей</a>">
|
||||||
|
<input type="submit" value="LiveJournal" title="Опубликовать ссылку в ЖЖ">
|
||||||
|
</form></li>
|
||||||
|
<li class="code"><a href="#" title="Получить код для публикации ссылки в другом сервисе">Код</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
171
social-likes.js
171
social-likes.js
|
@ -4,8 +4,8 @@
|
||||||
*
|
*
|
||||||
* Sharing buttons for Russian and worldwide social networks.
|
* Sharing buttons for Russian and worldwide social networks.
|
||||||
*
|
*
|
||||||
* @version 1.2.1
|
* @version 1.2.2
|
||||||
* @requires jQuery 1.4
|
* @requires jQuery 1.6
|
||||||
* @author Artem Sapegin
|
* @author Artem Sapegin
|
||||||
* @copyright 2011 Artem Sapegin (sapegin.ru)
|
* @copyright 2011 Artem Sapegin (sapegin.ru)
|
||||||
* @license http://creativecommons.org/licenses/by/3.0/
|
* @license http://creativecommons.org/licenses/by/3.0/
|
||||||
|
@ -19,29 +19,41 @@
|
||||||
|
|
||||||
socialLikes.prototype = {
|
socialLikes.prototype = {
|
||||||
init: function() {
|
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 = {};
|
this.counters = {};
|
||||||
|
|
||||||
|
var containers = $('.social-likes');
|
||||||
|
|
||||||
|
// Dirty hack for G+ button but I cannot find a better solution yet
|
||||||
if ($.browser.msie && $.browser.version <= 9) {
|
if ($.browser.msie && $.browser.version <= 9) {
|
||||||
this.container.addClass('social-likes-msie-lte9');
|
containers.addClass('social-likes-msie-lte9');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.container.find('li').each(function(){
|
containers.each($.proxy(this.initWidget, this));
|
||||||
var buttonWrapper = $(this);
|
},
|
||||||
|
|
||||||
|
initWidget: function(idx, container) {
|
||||||
|
$(container).find('li').each($.proxy(this.findButtons, this));
|
||||||
|
},
|
||||||
|
|
||||||
|
findButtons: function(idx, li) {
|
||||||
|
var buttonWrapper = $(li),
|
||||||
|
container = buttonWrapper.closest('.social-likes'),
|
||||||
|
pageUrl = this.getPageUrl(container),
|
||||||
|
escapedPageUrl = escape(pageUrl);
|
||||||
|
|
||||||
|
if (!this.counters[pageUrl]) this.counters[pageUrl] = {};
|
||||||
|
var counters = this.counters[pageUrl];
|
||||||
|
|
||||||
var classes = buttonWrapper[0].className.split(' ');
|
var classes = buttonWrapper[0].className.split(' ');
|
||||||
for (var classIdx = 0; classIdx < classes.length; classIdx++) {
|
for (var classIdx = 0; classIdx < classes.length; classIdx++) {
|
||||||
var cls = classes[classIdx];
|
var cls = classes[classIdx];
|
||||||
switch(cls) {
|
switch(cls) {
|
||||||
case 'twitter':
|
case 'twitter':
|
||||||
if (!this_.counters.twiter) {
|
this.loadCount(cls, 'http://urls.api.twitter.com/1/urls/count.json?callback=?',
|
||||||
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + escapedPageUrl + '&callback=?', function(data){ this_.updateCount(cls, data.count); });
|
{url: pageUrl}, pageUrl, buttonWrapper, function(data) { return data.count; });
|
||||||
this_.counters.twiter = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
this_.initButton({
|
this.initButton({
|
||||||
|
url: pageUrl,
|
||||||
urlParam: 'url',
|
urlParam: 'url',
|
||||||
textParam: 'text',
|
textParam: 'text',
|
||||||
additionalParams: ['via', 'related'],
|
additionalParams: ['via', 'related'],
|
||||||
|
@ -53,12 +65,12 @@
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'facebook':
|
case 'facebook':
|
||||||
if (!this_.counters.facebook) {
|
this.loadCount(cls, 'https://api.facebook.com/method/fql.query?query=select total_count from link_stat where url="' +
|
||||||
$.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); });
|
escapedPageUrl + '"&format=json&callback=?',
|
||||||
this_.counters.facebook = true;
|
{}, pageUrl, buttonWrapper, function(data) { return data[0] && data[0].total_count; });
|
||||||
}
|
|
||||||
|
|
||||||
this_.initButton({
|
this.initButton({
|
||||||
|
url: pageUrl,
|
||||||
urlParam: 'u',
|
urlParam: 'u',
|
||||||
textParam: 't',
|
textParam: 't',
|
||||||
popupUrl: 'http://www.facebook.com/sharer.php',
|
popupUrl: 'http://www.facebook.com/sharer.php',
|
||||||
|
@ -69,26 +81,8 @@
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'plusone':
|
case 'plusone':
|
||||||
/* buttonWrapper.replaceWith('<g:plusone></g:plusone>');
|
this.initButton({
|
||||||
|
url: pageUrl,
|
||||||
// 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',
|
urlParam: 'url',
|
||||||
popupUrl: 'https://plusone.google.com/_/+1/confirm?hl=ru_RU',
|
popupUrl: 'https://plusone.google.com/_/+1/confirm?hl=ru_RU',
|
||||||
pupupWidth: 500,
|
pupupWidth: 500,
|
||||||
|
@ -98,12 +92,13 @@
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'mailru':
|
case 'mailru':
|
||||||
if (!this_.counters.mailru) {
|
this.loadCount(cls, 'http://connect.mail.ru/share_count?func=?', {
|
||||||
$.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); });
|
url_list: pageUrl,
|
||||||
this_.counters.mailru = true;
|
callback: 1,
|
||||||
}
|
}, pageUrl, buttonWrapper, function(data) { return data[pageUrl] && data[pageUrl].shares; });
|
||||||
|
|
||||||
this_.initButton({
|
this.initButton({
|
||||||
|
url: pageUrl,
|
||||||
urlParam: 'share_url',
|
urlParam: 'share_url',
|
||||||
popupUrl: 'http://connect.mail.ru/share',
|
popupUrl: 'http://connect.mail.ru/share',
|
||||||
pupupWidth: 550,
|
pupupWidth: 550,
|
||||||
|
@ -113,18 +108,23 @@
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'vkontakte':
|
case 'vkontakte':
|
||||||
if (!this_.counters.vkontakte) {
|
if (!this._vkontakte) {
|
||||||
window.VK = {Share: {count: function(junk, count) {
|
this._vkontakte = [];
|
||||||
this_.updateCount(cls, count);
|
window.VK = {Share: {count: $.proxy(function(idx, count) {
|
||||||
}}};
|
this.updateCount(this._vkontakte[idx], count);
|
||||||
|
}, this)}};
|
||||||
|
}
|
||||||
|
var index = this._vkontakte.length;
|
||||||
|
this._vkontakte[index] = buttonWrapper;
|
||||||
|
this.loadCount(cls, null, null, pageUrl, buttonWrapper, null, function() {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: 'http://vkontakte.ru/share.php?act=count&index=1&url=' + escapedPageUrl,
|
url: 'http://vkontakte.ru/share.php?act=count&index=' + index + '&url=' + escapedPageUrl,
|
||||||
dataType: 'jsonp'
|
dataType: 'jsonp'
|
||||||
});
|
});
|
||||||
this_.counters.vkontakte = true;
|
});
|
||||||
}
|
|
||||||
|
|
||||||
this_.initButton({
|
this.initButton({
|
||||||
|
url: pageUrl,
|
||||||
urlParam: 'url',
|
urlParam: 'url',
|
||||||
textParam: 'title',
|
textParam: 'title',
|
||||||
popupUrl: 'http://vkontakte.ru/share.php',
|
popupUrl: 'http://vkontakte.ru/share.php',
|
||||||
|
@ -135,18 +135,23 @@
|
||||||
break;
|
break;
|
||||||
|
|
||||||
case 'odnoklassniki':
|
case 'odnoklassniki':
|
||||||
if (!this_.counters.odnoklassniki) {
|
if (!this._odnoklassniki) {
|
||||||
window.ODKL = {updateCount: function(junk, count) {
|
this._odnoklassniki = [];
|
||||||
this_.updateCount(cls, count);
|
window.ODKL = {updateCount: $.proxy(function(idx, count) {
|
||||||
}};
|
this.updateCount(this._odnoklassniki[idx], count);
|
||||||
|
}, this)};
|
||||||
|
}
|
||||||
|
var index = this._odnoklassniki.length;
|
||||||
|
this._odnoklassniki[index] = buttonWrapper;
|
||||||
|
this.loadCount(cls, null, null, pageUrl, buttonWrapper, null, function() {
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: 'http://www.odnoklassniki.ru/dk?st.cmd=extLike&uid=odklcnt0&ref=' + escapedPageUrl,
|
url: 'http://www.odnoklassniki.ru/dk?st.cmd=extLike&uid=' + index + '&ref=' + escapedPageUrl,
|
||||||
dataType: 'jsonp'
|
dataType: 'jsonp'
|
||||||
});
|
});
|
||||||
this_.counters.odnoklassniki = true;
|
});
|
||||||
}
|
|
||||||
|
|
||||||
this_.initButton({
|
this.initButton({
|
||||||
|
url: pageUrl,
|
||||||
urlParam: 'st._surl',
|
urlParam: 'st._surl',
|
||||||
popupUrl: 'http://www.odnoklassniki.ru/dk?st.cmd=addShare',
|
popupUrl: 'http://www.odnoklassniki.ru/dk?st.cmd=addShare',
|
||||||
pupupWidth: 550,
|
pupupWidth: 550,
|
||||||
|
@ -168,7 +173,7 @@
|
||||||
|
|
||||||
case 'code':
|
case 'code':
|
||||||
var link = buttonWrapper.find('a');
|
var link = buttonWrapper.find('a');
|
||||||
link.click(function(){
|
link.click($.proxy(function(){
|
||||||
var balloon = buttonWrapper.find('.social-balloon');
|
var balloon = buttonWrapper.find('.social-balloon');
|
||||||
if (balloon.length) {
|
if (balloon.length) {
|
||||||
balloon.toggle();
|
balloon.toggle();
|
||||||
|
@ -183,10 +188,10 @@
|
||||||
].join(''));
|
].join(''));
|
||||||
link.after(balloon);
|
link.after(balloon);
|
||||||
var textarea = buttonWrapper.find('textarea');
|
var textarea = buttonWrapper.find('textarea');
|
||||||
var messageField = this_.container.find('.livejournal input[name="event"]');
|
var messageField = container.find('.livejournal input[name="event"]');
|
||||||
if (!messageField.length) messageField = this_.container.find('.code input[name="event"]');
|
if (!messageField.length) messageField = container.find('.code input[name="event"]');
|
||||||
textarea.val(messageField.val());
|
textarea.val(messageField.val());
|
||||||
this_.selectTextInTextarea(textarea);
|
this.selectTextInTextarea(textarea);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (balloon.is(":visible")) {
|
if (balloon.is(":visible")) {
|
||||||
|
@ -200,7 +205,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
});
|
}, this));
|
||||||
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -208,7 +213,6 @@
|
||||||
// Icon container
|
// Icon container
|
||||||
buttonWrapper.find('a').prepend('<i></i>');
|
buttonWrapper.find('a').prepend('<i></i>');
|
||||||
}
|
}
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
initButton: function(params, buttonWrapper, buttonName) {
|
initButton: function(params, buttonWrapper, buttonName) {
|
||||||
|
@ -216,14 +220,14 @@
|
||||||
|
|
||||||
var query = {};
|
var query = {};
|
||||||
if (params.urlParam)
|
if (params.urlParam)
|
||||||
query[params.urlParam] = this.pageUrl;
|
query[params.urlParam] = params.url;
|
||||||
if (params.textParam)
|
if (params.textParam)
|
||||||
query[params.textParam] = document.title;
|
query[params.textParam] = document.title;
|
||||||
if (params.additionalParams) {
|
if (params.additionalParams) {
|
||||||
for (var paramIdx = 0; paramIdx < params.additionalParams.length; paramIdx++) {
|
for (var paramIdx = 0; paramIdx < params.additionalParams.length; paramIdx++) {
|
||||||
var key = params.additionalParams[paramIdx];
|
var key = params.additionalParams[paramIdx];
|
||||||
if (link.attr('data-' + key))
|
if (link.data(key))
|
||||||
query[key] = link.attr('data-' + key);
|
query[key] = link.data(key);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -239,9 +243,30 @@
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
updateCount: function(buttonName, count) {
|
loadCount: function(id, url, params, pageUrl, buttonWrapper, getNumber, request) {
|
||||||
|
if (!this.counters[pageUrl]) this.counters[pageUrl] = {};
|
||||||
|
var counters = this.counters[pageUrl];
|
||||||
|
|
||||||
|
if (counters[id] === undefined) {
|
||||||
|
if (request) {
|
||||||
|
request();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$.getJSON(url, params, $.proxy(function(data){
|
||||||
|
var number = getNumber(data);
|
||||||
|
this.updateCount(buttonWrapper, number);
|
||||||
|
counters[id] = number;
|
||||||
|
}, this));
|
||||||
|
}
|
||||||
|
counters[id] = true;
|
||||||
|
}
|
||||||
|
else if (counters[id] !== true) {
|
||||||
|
this.updateCount(buttonWrapper, counters[id]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
updateCount: function(buttonWrapper, count) {
|
||||||
count = parseInt(count, 10);
|
count = parseInt(count, 10);
|
||||||
var buttonWrapper = $('.' + buttonName, this.container);
|
|
||||||
var counter = buttonWrapper.find('b i i');
|
var counter = buttonWrapper.find('b i i');
|
||||||
if (counter.length) {
|
if (counter.length) {
|
||||||
counter.html(count);
|
counter.html(count);
|
||||||
|
@ -267,6 +292,10 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getPageUrl: function(buttonWrapper) {
|
||||||
|
return buttonWrapper.data('url') || window.location.href.replace(window.location.hash, '');
|
||||||
|
},
|
||||||
|
|
||||||
getQuery: function(params) {
|
getQuery: function(params) {
|
||||||
var query = [];
|
var query = [];
|
||||||
for (var key in params) {
|
for (var key in params) {
|
||||||
|
|
Loading…
Reference in New Issue