Назад
Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс




Поиск по сайту




Наш Telegram бот: @htmlweb_bot

Добавление кнопок социальных сетей себе на сайт

При создании новостного портала или просто блога с интересными заметками, для увеличения количества реальных посетителей, я рекомендую разместить кнопки добавления в популярные социальные сети: Однокласники, Вконтакте, Twitter, Facebook, LiveJournal и другие.

Для добавления каждой кнопочки приходится перечитать гору документации. Здесь в одной статье я собрал все свои поиски.


Twitter

Адрес перехода на Twitter:

http://twitter.com/timeline/home?status=__ЗАГОЛОВОК_СТРАНИЦЫ__%20__АДРЕС__

Пример ссылки:

<a href="#"
   onclick="this.href='http://twitter.com/timeline/home?status='+document.title+'%20'+window.location.href+window.location.hash">
   Добавить в Twitter</a>

Обратите внимание, что длина сообщения не должна превышать 140 символов.

"Твит" с ссылкой на страницу и дополнительным текстом.

<a href="#"
   onclick="this.href='http://twitter.com/share?text='+document.title+'&url='+window.location.href+window.location.hash+'&via=+ссылка на Twitter-аккаунт, например официальный канал сайта">
   Twitter-нуть</a>

Документация Twitter-API-Documentation, Application-Ideas.

Иконки:


Facebook

Адрес перехода на Facebook:

http://www.facebook.com/share.php?u=__АДРЕС__

Пример ссылки:

<a href="#"
   onclick="this.href='http://www.facebook.com/share.php?u='+window.location.href+window.location.hash">
   Добавить в Facebook</a>

Если Вы хотите не поделиться, а только Like-нуть то ссылка:

<a href="#"
   onclick="this.href='http://www.facebook.com/plugins/like.php?u='+window.location.href+window.location.hash">
    Like в Facebook</a>

Документация Specifying_Meta_Tags, Facebook_Share. Использование meta тегов на странице для задания параметров шаринга описано в Open Graph Protocol.

Иконки:


VK- Вконтакте

Адрес перехода на vk.ru:

https://vk.com/share.php?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&image=URL на картинку

Пример ссылки:

<a href="#"
   onclick="this.href='https://vk.com/share.php?url='+window.location.href+window.location.hash+'&title='+document.title">
   Добавить в ВКонтакт</a>

Если на странице присутствуют соответствующие теги, то информация берется из них:

  • Заголовок: <meta name="title" content="...">, если его нет то из тега <title>.
  • Описание: <meta name="description" content="...">.
  • Картинка: <link rel="image_src" href="...">, если его нет, то первые 8 тегов <img src="..."> на странице не превышающие 100x100.

Документация Документация » Сайты » Публикация ссылок, Документация » Сайты » Open API.

Иконки:

LiveJournal

Адрес перехода на LiveJournal:
http://www.livejournal.com/update.bml?mode=full&subject=test&event=__АДРЕС__

Пример ссылки: 

<a href="#"
   onclick="this.href='http://www.livejournal.com/update.bml?mode=full&subject=test&event='+window.location.href+window.location.hash">
   Добавить в LiveJournal</a>

Документация lj_dev.

Иконки:

LinkedIn

Адрес перехода на LinkedIn:
http://www.linkedin.com/shareArticle?mini=true&url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&source=htmlweb.ru

Документация docs.

Buzz

Адрес перехода на Buzz:
http://www.google.com/buzz/post?message=__ЗАГОЛОВОК_СТРАНИЦЫ__&url=__АДРЕС__&hl=ru

Документация apis.

Pinterest Pin

Поделиться медиа-файлом и URL на Pinterest.

http://www.pinterest.com/pin/create/button/?url=url&media=URL на картинку или видео&description=Описание страницы сайта

Surfingbird Surf!

Поделиться (“расшарить”) URL. Имейте ввиду, что Surfingbird не парсит предоставленный URL-страницы, все параметры ниже обязательны к заполнению.

http://surfingbird.ru/share?url=url&title=Название страницы сайта&description=Описание страницы сайта&screenshot=URL на изображение со скриншотом сайта

Яндекс

Адрес перехода на Яндекс:
http://wow.ya.ru/posts_share_link.xml?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&body=__ЧАСТЬ_СТРАНИЦЫ__

Блок "поделиться" 
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button"
	data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,friendfeed,moikrug">
</div>

Документация share, блок "поделиться".

Иконки:

Мой мир

Адрес перехода на Мой мир:
http://connect.mail.ru/share?url=__АДРЕС__&title=__ЗАГОЛОВОК_СТРАНИЦЫ__&description=&imageurl=

Кнопка "Нравится" Нравится 
<a target="_blank" class="mrc__plugin_like_button"
	href="http://connect.mail.ru/share"
	data-mrc-config="{'type' : 'button',
		'width' : '550',
		'show_text' : 'true',
		'show_faces' : 'true'}">Нравится</a>
<script src="http://cdn.connect.mail.ru/js/loader.js"
	type="text/javascript" charset="UTF-8"></script>

Документация share, кнопка "нравится".

Иконки:


Google Plus

+1 к URL

https://apis.google.com/_/+1/fastbutton?url=url
&usegapi — Принимает значения true/false. Используется для включения/выключения показа дополнительного окна “расшарить”
&size — Принимает значения: small, medium, standard (по умолчанию), tall
&hl — Язык, список доступных языков
С полным списком принимаемых параметров можно ознакомиться тут: https://developers.google.com/+/web/+1button/#tag_parameters

Поделиться ("расшарить") URL.

https://plus.google.com/share?url=


Счетчик поделившихся

Если Вы хотите добавить счетчик поделившихся, используйте следующее решение:

<style>
    .share-button-container{
        text-align:center;
        margin: 20px 0;
        padding: 10px 0;
        border-top: solid 1px #e4e4e4;
        border-bottom: solid 1px #e4e4e4;
    }

    .share-button-container p{
        margin:0 0 10px 0;
        font-weight:700;
    }

    .share-button {
        margin-left: 20px;
    }

    .share-button a{
        text-decoration:none;
    }

    .share-button, .share-button .count{
        display:inline-block;
    }

    .share-button .count, .share-button .share {
        font-family:"Helvetica Neue";
        font-weight:700;
        text-decoration:none;
        text-align:center;
    }

    .share-button .count {
        background-color:#F1F3F6;
        color:#333;
        font-size:12px;
        line-height:25px;
        margin-left:4px;
        text-transform:uppercase;
        min-width:40px;
    }

    .share-button .share {
        -webkit-border-radius:2px;
        -moz-border-radius:2px;
        border-radius:2px;
        color:#FFF;
        display:inline;
        font-size:13px;
        width:40px;
        padding:4px 8px;
    }

    .share-button-twitter .share {
        background-color:#00ABF0;
    }

    .share-button-facebook .share {
        background-color:#3b5998;
    }

    .share-button-googleplus .share {
        background-color:#F53424;
    }

    .share-button-twitter .share:active,.share-button-facebook .share:active,.share-button-googleplus .share:active {
        background-color:#353535;
    }

    /* Responsive */
    @media (max-width: 925px) {
        .share-button .share{
            font-size:15px;
            padding: 8px 16px; /* Double the padding */
        }

        .share-button .count{
            font-size:14px;
            line-height: 32px;
        }
    }
</style>
<div class='share-button-container'>
    <p>Понравилось? Поделись!</p>
    <div class='share-button share-button-twitter' data-share-url="http://htmlweb.ru">
        <div class='box'>
            <a href="https://twitter.com/share?url=http://htmlweb.ru&text=Static%20Buttons&via=Xafke" target='_blank'>
                <span class='share'>Твитнуть</span>
                <span class='count'>0</span>
            </a>
        </div>
    </div>

    <div class="share-button share-button-facebook" data-share-url="http://htmlweb.ru">
        <div class="box">
            <a href="https://www.facebook.com/sharer/sharer.php?u=http://htmlweb.ru">
                <span class='share'>Поделиться в FaceBook</span>
                <span class='count'>0</span>
            </a>
        </div>
    </div>
</div>
<script>
    var StaticShareButtons = {
        twitterButton: document.querySelector('.share-button-twitter'),
        facebookButton: document.querySelector('.share-button-facebook'),

        init: function(){
            this.injectScript('http://urls.api.twitter.com/1/urls/count.json?url=' +
                escape(this.twitterButton.dataset.shareUrl) + '&callback=' + 'StaticShareButtons.processTwitter');

            this.injectScript('http://graph.facebook.com/?id='+
                escape(this.facebookButton.dataset.shareUrl) +'&callback=StaticShareButtons.processFacebook');
        },

        injectScript: function(url){
            var script = document.createElement('script');
            script.async = true;
            script.src = url;
            document.body.appendChild(script);
        },

        processTwitter: function(data){
            if(data.count != undefined){
                this.twitterButton.querySelector('.count').innerHTML = data.count;
            }
        },

        processFacebook: function(data){
            if(data.shares != undefined){
                this.facebookButton.querySelector('.count').innerHTML = data.shares;
            }
        }
    };
    StaticShareButtons.init();
</script>

Готовый блок кода: 

<script language="JavaScript">
function addSoc(a) {
h=encodeURIComponent(window.location.href+window.location.hash);
t=encodeURIComponent(document.title);
if(a==1)h='vkontakte.ru/share.php?url='+h+'&title='+t;
else if(a==2)h='odnoklassniki.ru/dk?st.cmd=addShare&st.s=1000&st._surl='+h+'&tkn=3009';
else if(a==3)h='www.livejournal.com/update.bml?mode=full&subject='+t+'&event='+h;
else if(a==4)h='twitter.com/timeline/home?status='+t+'%20'+h;
else if(a==5)h='www.facebook.com/share.php?u='+h;
else if(a==6)h='wow.ya.ru/posts_share_link.xml?url='+h+'&title='+t;
else if(a==7)h='connect.mail.ru/share?url='+h+'&title='+t+'&description=&imageurl=';
else if(a==8)h='moikrug.ru/share?ie=utf-8&url='+h+'&title='+t+'&description=';
else return;
window.open('http://'+h,'Soc','screenX=100,screenY=100,height=500,width=500,location=no,toolbar=no,directories=no,menubar=no,status=no');
return false;
</script>
<a href="#" onclick="return addSoc(1);" title="Twitter"><img src="/pic/ico_twitter.gif" width=8 height=12></a>
<a href="#" onclick="return addSoc(2);" title="Facebook"><img src="/pic/ico_facebook.gif" width=12 height=12></a>
<a href="#" onclick="return addSoc(3);" title="Vkontakte"><img src="/pic/ico_vk.gif" width=12 height=12></a>
<a href="#" onclick="return addSoc(4);" title="Одноклассники.ru"><img src="/pic/ico_odno.gif" width=12 height=12></a>
<a href="#" onclick="return addSoc(5);" title="livejournal"><img src="/pic/ico_lj.png" width=12 height=12></a>
<a href="#" onclick="return addSoc(6);" title="Яндекс"><img src="/pic/ico_ya.png" width=12 height=12></a>
<a href="#" onclick="return addSoc(7);" title="Мой мир"><img src="/pic/ico_mymail.gif" width=12 height=12></a>

Более сложное, но красивое решение.

Здесь все иконки собраны в один файл и отображаются отдельные куски с помощью таблицы стилей. Такое решение гораздо быстрее отрабатывает, т.к. не застравляет браузер обращаться на сервер для подгрузки каждого отдельного изображения.

Представлено два варианта с иконками:

16x16:
12x12: 
<style>
.social-net-buttons-16 a{
    background-image: url(/pic/social-net-16.png);
    width: 16px;
    height: 16px;
    display: block;
    float: left;
    margin-right: 5px;
}
.social-net-buttons-16 a.icon-vk-16{background-position: 0 0;}
.social-net-buttons-16 a.icon-ok-16{background-position: 0 -16px;}
.social-net-buttons-16 a.icon-lj-16{background-position: 0 -32px;}
.social-net-buttons-16 a.icon-twitter-16{background-position: 0 -48px;}
.social-net-buttons-16 a.icon-facebook-16{background-position: 0 -64px;}
.social-net-buttons-16 a.icon-yaru-16{background-position: 0 -80px;}
.social-net-buttons-16 a.icon-moimir-16{background-position: 0 -96px;}
.social-net-buttons-16 a.icon-moikrug-16{background-position: 0 -112px;}
.social-net-buttons-12 a{
    background-image: url(/pic/social-net-12.png);
    width: 12px;
    height: 12px;
    display: block;
    float: left;
    margin-right: 5px;
}
.social-net-buttons-12 a.icon-vk-12{background-position: 0 0;}
.social-net-buttons-12 a.icon-ok-12{background-position: 0 -12px;}
.social-net-buttons-12 a.icon-lj-12{background-position: 0 -24px;}
.social-net-buttons-12 a.icon-twitter-12{background-position: 0 -36px;}
.social-net-buttons-12 a.icon-facebook-12{background-position: 0 -48px;}
.social-net-buttons-12 a.icon-yaru-12{background-position: 0 -60px;}
.social-net-buttons-12 a.icon-moimir-12{background-position: 0 -72px;}
.social-net-buttons-12 a.icon-moikrug-12{background-position: 0 -84px;}
</style>
<div class="social-net-buttons-16">
    <a href="#" onclick="return addSoc(1);" title="Vkontakte" class="icon-vk-16"></a>
    <a href="#" onclick="return addSoc(2);" title="Одноклассники.ru" class="icon-ok-16"></a>
    <a href="#" onclick="return addSoc(3);" title="livejournal" class="icon-lj-16"></a>
    <a href="#" onclick="return addSoc(4);" title="Twitter" class="icon-twitter-16"></a>
    <a href="#" onclick="return addSoc(5);" title="Facebook" class="icon-facebook-16"></a>
    <a href="#" onclick="return addSoc(6);" title="Я.ру" class="icon-yaru-16"></a>
    <a href="#" onclick="return addSoc(7);" title="Мой Мир" class="icon-moimir-16"></a>
    <a href="#" onclick="return addSoc(8);" title="Мой Круг" class="icon-moikrug-16"></a>
</div>
<br>
<div class="social-net-buttons-12">
    <a href="#" onclick="return addSoc(1);" title="Vkontakte" class="icon-vk-12"></a>
    <a href="#" onclick="return addSoc(2);" title="Одноклассники.ru" class="icon-ok-12"></a>
    <a href="#" onclick="return addSoc(3);" title="livejournal" class="icon-lj-12"></a>
    <a href="#" onclick="return addSoc(4);" title="Twitter" class="icon-twitter-12"></a>
    <a href="#" onclick="return addSoc(5);" title="Facebook" class="icon-facebook-12"></a>
    <a href="#" onclick="return addSoc(6);" title="Я.ру" class="icon-yaru-12"></a>
    <a href="#" onclick="return addSoc(7);" title="Мой Мир" class="icon-moimir-12"></a>
    <a href="#" onclick="return addSoc(8);" title="Мой Круг" class="icon-moikrug-12"></a>
</div>

Яндекс предлагает готовый скрипт для блока "Поделиться". Но не забывайте, что используя скрипты от яндекса, Вы также делитесь с ним всем своим внутренним "хозяйством".

Всего за 390 рублей Вы можете получить представленные здесь примеры в виде одного архива со всеми иконками и стилями.


Регистрация Войти Войти через VK Войти через FB Войти через Google Войти через Яндекс

При нажатии кнопки Оплатить и загрузить, Вы подтверждаете согласие с условиями использования скрипта, описанными на этой странице.
Вы будете перенаправлены на страницу выбора способа оплаты, после оплаты 390 рублей (~4$) начнется загрузка файла.
Чтобы мы не потеряли Вашу оплату при потере соединения, укажите Ваш действующий
адрес электронной почты
Сомневаетесь? Вы всегда сможете задать вопросы и получить помощь.


.