27 апреля 2011 г.

Как установить SexyBookmarks на свой сайт?



SexyBookmarks - очень удобный плагин для Wordpress, который позволяет пользователям делится закладками на страницы вашего сайта.

В данной заметке будет описано как установить SexyBookmarks на произвольный сайт, используя только Javascript.

Итак, для начала необходимо скачать и распаковать последнюю версию плагина.

Из всего архива нам понадобятся только несколько файлов:

  • js/sexy-bookmarks-public.js
  • css/style.css
  • images/shr-sprite.png
Далее, подключаем скрипт и файл стилей, перед тегом </head> добавляем следующие строчки кода:

<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&amp;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;
}
});

Результат:

Комментариев нет:

Отправить комментарий