Реклама

Собственные социальные кнопочки Обновлено 08.11.2016

На этом сайте я пока что использую API Pluso для того, чтобы пользователи могли делиться моими страничками через социальные сети, но как известно, Pluso тырит куки и шлет на хз какие домены, как показывает FireBug в огнелисе, он при загрузке страницы теребит еще несколько разных доменов кроме своего.

Но... тут наклюнулся новый проект, там как раз таки использую куки для запоминания пользователей и совсем не хочется, чтобы они утекли. Пошерстил другие сервисы создания социальных кнопок - Яндекс-шару, share42. Но они ограничены в функционале, точнее - они делают то, что нужно, но не предоставляют скины для кнопочек, чтобы все было в тему сайта.

По этому пришлось маньячить самому. В этом есть пара недостатков, но оно окупается гибкостью и безопасностью. Например - не получится использовать чужой счетчик нажатий на кнопочку, можно замутить свой, но это надо будет еще кодить, использовать бэк-энд и мускул. Второй недостаток, а может быть и нет - это то, что нужно в некоторых параметрах хранить необходимые данные - заголовок страницы, теги, нужную картинку, юрл-адрес и прочее. Пока что у меня не получилось вынуть это из мета-тегов, но это делалось быстро и эффективно, по этому тут не заморочился.

И так... Нам нужны иконки соц-сетей, их можно выдернуть из того же Pluso, разбить на отдельные файлики, типа vk.png ok.png и т.д.

Нам надо из заключить в какой-нибудь DIV:

<div id="soc_btn" title="Бизнес-центр Инсталл" data-url="урл-адрес" data-decription="Мы сдаем" data-img="путь к картинке"> 
<a href="#" data-ss="vk.com"><img src="/templates/b-install/img/social/vk.png" /></a>
<a href="#" data-ss="ok.ru"><img src="/templates/b-install/img/social/ok.png" /></a>
<a href="#" data-ss="facebook.com"><img src="/templates/b-install/img/social/facebook.png" /></a>
<a href="#" data-ss="mail.ru"><img src="/templates/b-install/img/social/mail.png" /></a>
<a href="#" data-ss="google.com"><img src="/templates/b-install/img/social/google.png" /></a>
</div>

 

Дальше нам необходим обработчик.. За образец я взял js-скрипт share42, там описаны вызовы всплывающих окон и параметры, которые им передаются. Здесь у меня кнопок не много, но если можно больше - ищем иконки, добавляем в js-скрипт:

$("#soc_btn a").click(function(event){
        var title = $("#soc_btn").attr('title');
        var ss = $(this).data('ss');
        var decription = $("#soc_btn").data('decription');
        var url = $("#soc_btn").data('url');
        var img = $("#soc_btn").data('img');
        switch(ss) {
            case 'vk.com':
                window.open('//vk.com/share.php?url=' + url +'&title=' + title + '&description=' + decription + '&image=' + img, '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');
            break;
            case 'ok.ru':
                window.open('//ok.ru/dk?st.cmd=addShare&st._surl='+url+'&title='+title, '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');    
            break;
            case 'facebook.com':
                window.open('//www.facebook.com/sharer/sharer.php?u='+url, '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');
            break;
            case 'mail.ru':
                window.open('//connect.mail.ru/share?url='+url+'&title='+title+'&description='+decription+'&imageurl='+img, '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');    
            break;
            case 'google.com':
                window.open('//plus.google.com/share?url='+url, '_blank', 'scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0');
            break;
            default:
        }
        return false;
}) 

 

 

RSS
RSS - Лента новостей
Закладки
Сообщества