SexyBookmarks - очень удобный плагин для Wordpress, который позволяет пользователям делится закладками на страницы вашего сайта.
В данной заметке будет описано как установить SexyBookmarks на произвольный сайт, используя только Javascript.
Итак, для начала необходимо скачать и распаковать последнюю версию плагина.
Из всего архива нам понадобятся только несколько файлов:
- js/sexy-bookmarks-public.js
- css/style.css
- images/shr-sprite.png
<link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/sexy-bookmarks-public.js"></script>
Выбираем подходящее место на странице для размещения кнопок и добавляем следующий HTML-код:
<div class="shr-bookmarks shr-bookmarks-center shr-bookmarks-bg-sexy">
<ul class="socials">
<li class="shr-linkedin">
<a class="external" title="Add this to Linkedin" rel="nofollow" href="http://www.linkedin.com" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.linkedin.com']);">Add this to LinkedIn</a>
</li>
<li class="shr-twitter">
<a class="external" title="Tweet This!" rel="nofollow" href="http://twitter.com/home" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','twitter.com']);">Tweet This!</a>
</li>
<li class="shr-facebook">
<a class="external" title="Share this on Facebook" rel="nofollow" href="http://www.facebook.com/share.php" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.facebook.com']);">Share this on Facebook</a>
</li>
<li class="shr-googlebuzz">
<a class="external" title="Share this on Google Buzz" rel="nofollow" href="http://www.google.com/buzz/post" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.facebook.com']);">Share this on Facebook</a>
</li>
<li class="shr-digg">
<a class="external" title="Digg this!" rel="nofollow" href="http://digg.com/submit" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','digg.com']);">Digg this!</a>
</li>
<li class="shr-reddit">
<a class="external" title="Share this on Reddit" rel="nofollow" href="http://reddit.com/submit" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','reddit.com']);">Share this on Reddit</a>
</li>
<li class="shr-delicious">
<a class="external" title="Share this on del.icio.us" rel="nofollow" href="http://del.icio.us/post" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','del.icio.us']);">Share this on del.icio.us</a>
</li>
<li class="shr-stumbleupon">
<a class="external" title="Stumble upon something good? Share it on StumbleUpon" rel="nofollow" href="http://www.stumbleupon.com/submit" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.stumbleupon.com']);">Stumble upon something good? Share it on StumbleUpon</a>
</li>
<li class="shr-twittley">
<a class="external" title="Submit this to Twittley" rel="nofollow" href="http://twittley.com/submit/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','twittley.com']);">Submit this to Twittley</a>
</li>
<li class="shr-googlebookmarks">
<a class="external" title="Add this to Google Bookmarks" rel="nofollow" href="http://www.google.com/bookmarks/mark" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.google.com']);">Add this to Google Bookmarks</a>
</li>
<li class="shr-gmail">
<a class="external" title="Share this with Gmail" rel="nofollow" href="https://mail.google.com/mail/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.google.com']);">Add this to Google Bookmarks</a>
</li>
<li class="shr-technorati">
<a class="external" title="Share this on Technorati" rel="nofollow" href="http://technorati.com/faves" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','technorati.com']);">Share this on Technorati</a>
</li>
<li class="shr-diigo">
<a href="http://www.diigo.com/post" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.diigo.com']);">Post this on Diigo</a>
</li>
<li class="shr-blinklist">
<a class="external" title="Share this on Blinklist" rel="nofollow" href="http://www.blinklist.com/index.php" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.blinklist.com']);">Share this on Blinklist</a>
</li>
<li class="shr-mixx">
<a class="external" title="Share this on Mixx" rel="nofollow" href="http://www.mixx.com/submit" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.mixx.com']);">Share this on Mixx</a>
</li>
<li class="shr-newsvine">
<a class="external" title="Seed this on Newsvine" rel="nofollow" href="http://www.newsvine.com/_tools/seed&save" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','www.newsvine.com']);">Seed this on Newsvine</a>
</li>
<li class="shr-yahoobuzz">
<a class="external" title="Buzz up!" rel="nofollow" href="http://buzz.yahoo.com/submit/" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','buzz.yahoo.com']);">Buzz up!</a>
</li>
</ul>
</div>Осталось немного поправить Javascript. Открываем файл js/sexy-bookmarks-public.js и внутри обработчика jQuery(document).ready(function () {}) добавляем следующий код, для обработки событий, вызываемых при нажатии на каждую кнопку:
jQuery('.shr-bookmarks a.external').click(function() {
var url = encodeURIComponent(window.location.href), desc = '';
var title = document.title;
var description = $("meta[name=description]").attr("content");
switch(this.parentNode.className) {
case 'shr-twitter':
this.href += '?status=' + title + '+-+' + url;
break;
case 'shr-linkedin':
this.href += 'shareArticle?mini=true&url='+url+'&title='+title+'&summary='+description+'&source=CEEOA';
break;
case 'shr-facebook':
this.href += '?t=' + title + '&u=' + url;
break;
case 'shr-googlebuzz':
this.href += '?message='+title+'%0A'+description+'&url=' +url;
break;
case 'shr-digg':
this.href += '?phase=2&title=' + title + '&url=' + url + '&desc=' + description;
break;
case 'shr-reddit':
this.href += '?title=' + title + '&url=' + url;
break;
case 'shr-delicious':
this.href += '?title=' + title + '&url=' + url;
break;
case 'shr-stumbleupon':
this.href += '?title=' + title + '&url=' + url;
break;
case 'shr-twittley':
this.href += '?title=' + title + '&url=' + url + '&desc=' + description + '&pcat=Internet&tags=';
break;
case 'shr-googlebookmarks':
this.href += '?op=add&title=' + title +'&desc='+description+ '&bkmk=' + url;
break;
case 'shr-gmail':
this.href += '?view=cm&tf=0&to=&su='+title+'&body='+description+'%0A%0A'+url+'&fs=1';
break;
case 'sexy-technorati':
this.href += '?add=' + url;
break;
case 'shr-diigo':
this.href += '?title=' + title + '&url=' + url + '&desc=' + description;
break;
case 'shr-blinklist':
this.href += '?Action=Blink/addblink.php&Title=' + title + '&Url=' + url;
break;
case 'shr-mixx':
this.href += '?title=' + title + '&page_url=' + url + '&desc=' + description;
break;
case 'shr-newsvine':
this.href += '?h=' + title + '&u=' + url;
break;
case 'shr-yahoobuzz':
this.href += '?submitHeadline=' + title + '&submitUrl=' + url + '&submitSummary=' + description + '&submitCategory=science&submitAssetType=text';
break;
}
});
Результат:
Комментариев нет:
Отправить комментарий