Социальные кнопки "Поделиться"

Сейчас очень популярно добавлять кнопки "Поделиться" (Share) на сайтах. Они дают возможность рассказать о сайте или какой-то статье сайта в социальных сетях.
Эта статья посвящена не самим кнопкам, а их программированию. Описан небольшой пример для кнопок Google+, ВКонтакте, Одноклассники, Mail.ru.

Схема

У всех социальных сетей есть возможность вставки новости для Вашего пользователя, путем вызова определенного адреса с некоторыми параметрами. В основном у всех маска адреса следующая:

http(s)://<social.network.address>/share?url=<yore site url>[&<other params>]

Конечно, адреса у всех разные, не говоря уж о параметрах, но все они принимают адрес Вашего сайта в качестве одного их параметров.

On-line сервисы

Да. и эта ниша не осталась пустой. Нашлись компании/люди, которые готовы сгенерировать готовый скрипт для такой кнопки или для нескольких кнопок. И, опять же, никто не готов делиться таким сервисом бесплатно. И это нормально, поскольку эти компании/люди затратили свое время, силы и средства на разработку подобного сервиса.

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

Вот несколько сервисов, предоставляющих такую услугу:

• PLUSO, ну и его конструктор;
• Share42.com, конструктор прямо на главной странице;
• Add This, с его конструктором (для некоторых его сервисов нужна регистрация)

Большинство таких сайтов не просит денег, они просто добавляют кнопку или ссылку на их сайт. Можно назвать это платой за пользование сервисом.

Не хочу!

Именно эта фраза зачастую встает перед программистом, когда что-то нужно и для этого есть подобный on-line сервис. Понятно, что одна сторонняя кнопочка на сервис, которым Вы воспользовались, не сыграет большой роли, но! Я же программист и я не хочу "засорять" свое чужими кнопками, которые рядовому пользователю вовсе не нужны. Для решения этой проблемы я покопал Интернет и нашел-таки "велосипед" - вот оно, не хитрое решение и вдохновение на этот пост!

JavaScript и все-все-все

Признаюсь, что взял скрипт из источника и слегка поправил, а именно - добавил Google+ и изменил адрес ВКонтакте на официальный.

Share = {
    vkontakte: function(purl, ptitle, pimg, text) {
        url  = 'http://vk.com/share.php?';
        url += 'url='          + encodeURIComponent(purl);
        url += '&title='       + encodeURIComponent(ptitle);
        url += '&description=' + encodeURIComponent(text);
        url += '&image='       + encodeURIComponent(pimg);
        url += '&noparse=true';
        Share.popup(url);
    },
    odnoklassniki: function(purl, text) {
        url  = 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1';
        url += '&st.comments=' + encodeURIComponent(text);
        url += '&st._surl='    + encodeURIComponent(purl);
        Share.popup(url);
    },
    facebook: function(purl, ptitle, pimg, text) {
        url  = 'http://www.facebook.com/sharer.php?s=100';
        url += '&p[title]='     + encodeURIComponent(ptitle);
        url += '&p[summary]='   + encodeURIComponent(text);
        url += '&p[url]='       + encodeURIComponent(purl);
        url += '&p[images][0]=' + encodeURIComponent(pimg);
        Share.popup(url);
    },
    twitter: function(purl, ptitle) {
        url  = 'http://twitter.com/share?';
        url += 'text='      + encodeURIComponent(ptitle);
        url += '&url='      + encodeURIComponent(purl);
        url += '&counturl=' + encodeURIComponent(purl);
        Share.popup(url);
    },
    mailru: function(purl, ptitle, pimg, text) {
        url  = 'http://connect.mail.ru/share?';
        url += 'url='          + encodeURIComponent(purl);
        url += '&title='       + encodeURIComponent(ptitle);
        url += '&description=' + encodeURIComponent(text);
        url += '&imageurl='    + encodeURIComponent(pimg);
        Share.popup(url)
    },
    googleplus: function(purl) {
        url  = 'https://plus.google.com/share?';
        url += 'url='          + encodeURIComponent(purl);
        url += '&hl='       + encodeURIComponent('ru');
        Share.popup(url)
    },
 
    popup: function(url) {
        window.open(url,'','toolbar=0,status=0,width=626,height=436');
    }
};

Пользоваться просто:

<a 
 class="social_vk" 
 title="Поделиться ВКонтакте" 
 href="javascript:" 
 onclick="Share.vkontakte('http://mysiteurl.zon/','Это мой новый сайт','http://mysiteurl.zon/images/siteimg.png','Это мой новый сайт с картинкой, и я всем делюсь')"
 >
 Поделиться на vk.com
</a>

Сами картинки кнопочек можно взять с открытых источников или нарисовать самим.

Увидимся в соцсетях!