1000 и 1 репост: гайд по кнопке «поделиться» в русских соц сетях

  • Tutorial


Недавно передо мной встала задача — провести на нашем сайте «народное голосование» за номинантов на премию в нашей отрасли (франчайзинг). В рамках народного голосования человек размещал на своей странице в социальной сети пост, рассказывающий о том, за кого именно он проголосовал. Чтобы реализовать эту задачу, мне пришлось перелопатить массу информацию о том, как именно устроен шаринг в различных соцсетях, и как лучше размещать эти самые посты. Кроме того, была создана система подсчета количества размещенных репостов.

К сожалению, большая часть информации на эту тему, которую можно найти на хабре или stackoverflow — уже устарела, поэтому я постарался превратить этот в пост в актуальный мега-гайд по шерингу страниц в соц сетях. Я рассмотрел 5 наиболее популярных в России социальных сетей: контакт, facebook, твиттер, одноклассники и мой мир. Для каждой социальной сети приведен актуальный URL для шаринга, небольшие советы и рекомендации по использованию, а также JS код, позволяющий узнать количество шеров конкретного URL в каждой из соц. сетей.

В конце статьи есть сводная таблица со всеми ссылками и кратким описанием возможностей каждой из сетей.

PHP скрипт


Написал скрипт-генератор ссылок для шаринга, а также для получения данных о количестве шеров.
Качать тут:
github.com/iskander-g/socialhelper

Вконтакте



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

URL для того, чтобы поделиться ссылкой в этой соц. сети имеет следующий вид:
http://vk.com/share.php?url={$url}&title={$titleVk}&description={$desc}&image={$image}&noparse=true

Его параметры:
  • url: адрес страницы, которой вы делитесь
  • title: заголовок поста
  • description: описание ссылки
  • image: ссылка на изображение
  • noparse: укажите true, если вам не нужно, чтобы контакт парсил метатеги со страницы, а взял информацию из переданных параметров


Tips&Tricks:

Вы можете добавлять в конец заголовка (title) свои хештеги, и если при шаринге пользователь не введет описание — то они попадут в пост пользователя.

Баги:

У контакта был обнаружен только один, но очень критичный баг: если по вашей ссылке переходит пользователь, не авторизованный в контакте, то ему будет предложено залогиниться и потом он получит белую страницу с надписью «too long to param». Единственный вариант решения этой проблемы — не передавать описание и т.д., и ограничиться только ссылкой. Ну или просто забить, как мы поступили мы. Это не помешало на данный момент собрать более 900 репостов нашей премии вконтакте.

Получение количества шеров:

Получение количество шеров вконтакте основано на том, что вы добавляете себе на страницу тег script со следующим адресом:
var index = "1"; 
// если вы хотите на одной странице получить шеры для нескольких ссылок - у каждой должен быть свой уникальный индекс. 
// индекс - обязательно целое число.
var url = "http://example.com";
$("body").append("<script src='https://vk.com/share.php?act=count&index=" + index + "&url=" + url + "'></script>");        

Этот скрипт вызовет метод VK.Share.count(index, count). Соответственно, вам необходимо опеределить его в глобальной области видимости, например так:
var VK = {};
VK.Share = {};
VK.Share.count = function(index, count) {
        console.log(count);
}


Facebook



Вторая по популярности социальная сеть в России имеет довольно урезанный инструментарий для шаринга ссылок.

URL для того, чтобы поделиться ссылкой в facebook, имеет вид:
https://www.facebook.com/sharer/sharer.php?u={$url}&picture={$image}

Как видно, фейсбук не поддерживает передачу кастомных заголовков и описаний — эти данные он берет со страницы, которая шарится, из соответствующих мета-тегов:
  • og:title — заголовок ссылки
  • og:description — описание ссылки
  • og:image — изображение для шаринга


Tips & Tricks

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

Это удалось реализовать, создав «технические» страницы для каждого номинанта с нужными мета-тегами, которые успешно скачивались и парсились фейсбуком, но при заходе на эту страницу обычного пользователя — он автоматически редиректился на страницу номинации (для этого использовался мета-тег refresh и дублирующий яваскрипт на всякий случай).

Баги

В интернете очень много информации про шаринг через фейсбук, и везде пишут вот про такую ссылку:
http://www.facebook.com/sharer/sharer.php?s=100&p%5Burl%5D=

НО! Эта ссылка не работает с мобильной версией фейсбука. Необходимо использовать просто sharer/sharer.php?u=


Подсчет количества шеров Facebook

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

Он выглядит следующим образом:
$.get("https://graph.facebook.com/" + url, {}, function(data) {
            console.log(data.share.share_count);
}, 'json');

Также по этой ссылке можно прочитать OG-параметры, которые хранит фейсбук, и некоторые другие свойства урла.

Twitter



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

URL для твиттера выглядит следующим образом:
https://twitter.com/share?url={$url}&text={$title}&hashtags={$hashtags}&via={$account}

Параметры:
  • url — собственно ссылка
  • text — текст размещаемого твита
  • hashtags — хештеги, без решетки и через запятую, например «habr, хабр»
  • via — ваш основной аккаунт, будет добавлен в конец твита как «via @AccountName»

Не указывайте слишком длинный текст и много хештегов! Размер твита ограничен по длине, и ваш пользователь будет вынужден редактировать ваш текст.

Подсчет количества твитов

Подсчет количества шеров конкретного урла в твиттере методами самой соц сети невозможен.
twitter.com/twitterdev/status/667836799897591808

Одноклассники



По своей сути шаринг в одноклассниках полностью аналогичен шарингу в facebook.

Url для шаринга в одноклассниках:
https://connect.ok.ru/offer?url={$url}

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

Количество шеров страницы в одноклассниках

А вот процесс подсчета количества шеров в одноклассниках больше похож на контакт — также подключается JS скрипт, который вызывает метод ODKL.updateCount(rel, count).

Отличие от контакта в том, что в качестве индекса может быть использован произвольный текст, а не только целое число.

Код, который я использую для подсчета шеров:
var ODKL = {};
ODKL.updateCount = function(uid, count) {
         console.log(count);
}

var uid = "mainpage"; // UID - аналог index у контакта
var url = "http://example.com";
$.getJSON('https://connect.ok.ru/dk?st.cmd=extLike&uid=' + uid  + '&ref=' + encodeURIComponent(url) + '&callback=?', function(e) {});


Мой мир



В принципе, URL и процесс шаринга в моем мире аналогичен таковому в контакте.

Ссылка для моего мира выглядит следующим образом:
http://connect.mail.ru/share?url={$url}&title={$title}&description={$desc}&image_url={$image}

  • url: адрес страницы, которой вы делитесь
  • title: заголовок поста
  • description: описание ссылки
  • image_url: ссылка на изображение


Получение данных о количестве шеров моего мира

Готовый код для получения количества шеров конкретного урла из моего мира имеет вот такой вид:
        $.getJSON('https://connect.mail.ru/share_count?url_list=' + encodeURIComponent(url) + '&callback=1&func=?', function(response) {
            var url = encodeURIComponent(url);
            for (var url in response) {
                if (response.hasOwnProperty(url)) {
                    var count = response[url].shares;
                    console.log(count);
                }
            }
        });


Google


За информацию по гуглу спасибо Finesse
Ссылка для шаринга:
https//plus.google.com/share?url={$url} 


Простого способа получить количество расшариваний в g+ нет, но есть грязные, например, спарсить из ответа по адресу:
https://apis.google.com/u/0/se/0/_/+1/sharebutton?plusShare=true&usegapi=1&action=share&url={$url} 


Подводя итог


Соц. сеть Ссылка Кастомные описания Счетчик Хештеги
Вконтакте http://vk.com/share.php?url={$url}&title={$titleVk}&description={$desc}&image={$image}&noparse=true Поддерживает для любой страницы Имеется В тайтле
Facebook https://www.facebook.com/sharer/sharer.php?u={$url}&picture={$image} Только картинка, остальное через OG Имеется Отсутствуют
Twitter https://twitter.com/share?url={$url}&text={$title}&hashtags={$hashtags}&via={$account} Поддерживает для любой страницы Отсутствует Штатно
Одноклассники https://connect.ok.ru/offer?url={$url} Используя OG-метатеги Имеется Отсутствуют
Мой мир http://connect.mail.ru/share?url={$url}&title={$title}&description={$desc}&image_url={$image} Поддерживает для любой страницы Имеется Отсутствуют
Google https//plus.google.com/share?url={$url} Используя OG-метатеги Грязный способ Отсутствуют


P.S. оптимальный размер изображения для шаринга в соц сетях, которое одинаково хорошо будет выглядеть везде — 1024x512 пикселей.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 37

  • НЛО прилетело и опубликовало эту надпись здесь
      +1
      Ссылка для шаринга в g+: https//plus.google.com/share?url={$url}
        +1
        Простого способа получить количество расшариваний в g+ нет, но есть грязные, например, спарсить отсюда: https://apis.google.com/u/0/se/0/_/+1/sharebutton?plusShare=true&usegapi=1&action=share&url={$url}
          0
          Спасибо, добавил информацию в пост
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Спасибо, внес в пост соответствующие изменения.

              К сожалению, заголовок и описание ссылки передать все равно не получится, как я понимаю?

              И кстати, просто /sharer.php?u= (не /sharer/sharer.php?u=) не понимает параметр picture… возможно, они хотят от него отказаться
              • НЛО прилетело и опубликовало эту надпись здесь
        0
        del
          0
          Я понимаю… долго думал над названием статьи, пока не смог придумать ничего лучше :-)
          +7
          Кто-нибудь из присутствующих хоть раз в жизни нажимал эти кнопки?
            +3
            Только на своем блоге для хоть какого-то упоминания в соц.сетях.
            • НЛО прилетело и опубликовало эту надпись здесь
              0
              Обычные пользователи жмут с удовольствием :-)
              У нас за 10 дней работы голосования уже более 3000 репостов суммарно по соц. сетям.

              И думаю, наш сайт не единственный, кто может захотеть реализовать собственный вариант соц. кнопок, со стилизацией и всем остальным.
              0
              Yandex share. В документации описаны параметры, принимающие всю необходимую информацию для шаринга. Для тех, кто не хочет писать свой компонент — идеал.
                0
                Ну раз уж вы его вспомнили, как не сказать про addtoany.com
                Он ещё и URL сокращать умеет.
                +1
                Для твиттера тоже существуют мета-теги. С помощью них легко вставляются картинки.
                Подробнее тут: https://dev.twitter.com/cards/types/summary-large-image
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Скорее всего, размер меньше необходимого.
                    Как я написал в постскриптуме — идеально работают картинки 1024 на 512 и больше
                      +1
                      У фейсбука есть инструмент для дебага шаринга: https://developers.facebook.com/tools/debug. Скормите ему ссылку на страницу, и он скажет, что не так. Аналогичный инструмент есть у твиттера: https://cards-dev.twitter.com/validator
                      • НЛО прилетело и опубликовало эту надпись здесь
                          0
                          Сам фейсбук кеширует информацию о ссылках, которые расшаривают. Иногда приходится второй раз запускать дебаг, чтобы новая информация подгрузилась.
                        0
                        Применил свои супер-скилы фотошопа и нарисовал заглавную картинку для статьи…

                        Но хабр уже прописал другой og:image, интересно, изменит ли?

                        В ВК у меня нормально запостилось, правда пришлось выбрать картинку из 6 предложенных.
                        0
                        Livejournal?
                          0
                          у ЖЖ нет счетчика.
                            0
                            Но есть репосты.
                              0
                              согласен нам так и пришлось оставить 2 кнопки без счётчика Twitter и LiveJournal.
                          0
                          NodeJS модуль собирающий число шаров в мировых соцсетях (facebook, linkedin, pinterest, g+ etc) — https://www.npmjs.com/package/sociare-counter
                            0
                            Зачем придумывать свой велосипед? Есть хороший пример: https://github.com/sapegin/social-likes/blob/master/src/social-likes.js берете за основу services и counters.
                              0
                              Зачем брать за основу ваш «хороший пример», если там ссылки у одноклассников и твиттера старые, у всех соцсетей ссылки идут без картинок, только текст и тайтл и тд, если есть хороший пример — эта статья, в которой полные актуальные ссылки со всеми параметрами.

                              Тем более шаринг это не всегда яваскрипт, например в нашем случае идет редирект на соответствующую ссылку после того, как наш внутренний скрипт засчитает голос за нужного человека.
                                0
                                вы же понимаете, что это костяк?
                                  –1
                                  вы же понимаете, что это всего лишь костяк?
                                    +1
                                    Давайте ещё раз, вы изначально спросили, для чего изобретать велосипед (имея в виду мою статью), когда есть хороший пример (ваш скрипт на гитхабе), который якобы можно взять за основу.

                                    Я ответил на ваш вопрос:
                                    1) ваш скрипт — плохой пример, потому что в отличие от статьи он предлагает старые и неполноценные ссылки на шаринг, поэтому брать его за основу — явно плохая идея
                                    2) ваш скрипт использует странные механизмы получения информации о количестве шеров, как минимум для фейсбука
                                    3) ваш скрипт — это не костяк, а попытка сделать полноценное решение для лайков на яваскрипте.

                                    Таким образом, если из вашего скрипта в качестве костяка мы не можем взять ни массивы ссылок шаринга, ни массивы методов получения количества шеров, то что там брать за основу? Модуль открытия попапа с заданным урлом для джейквери?

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

                                    Если сравнивать мою статью и ваш скрипт с гитахаба, то в чистом остатке мы имеем:

                                    Чтобы получить полноценное шаринг решение используя сведения из моей статьи — остаётся дописать только window.open с заданными урлами и повесить вёрстку, в которую кидать полученные значения шеринга.

                                    Чтобы получить полноценное шаринг решение из вашего скрипта (не обращаясь к моей статье) нужно было бы перелопатить документацию каждой соц сети, как минимум чтобы понять как добавить картинки к посту. Зато там есть написанное window.open.

                                    Извините, чёт пригорел :)
                                      0
                                      Ничего страшного бывает. Во-перых скрипт не мой я из него взял только services и counters. По поводу картинки: почти все соц сети забирают картинки из мета-тегов по умолчанию.
                                      <meta property="og:image" content="https://habrastorage.org/files/11c/1ab/c90/11c1abc901ef45b291a0aa7262ad3924.jpg">
                                      

                                      свой велосипед могу потом показать в личку если будет интересно.
                                    0
                                    и он только для подсчёта like.
                                  0
                                  В ВК для голосования подсчет шеров через ссылку vk.com/share.php не совсем удачный. Очень легко накручивается.
                                  Например: один человек может сто раз сделать репост и удалить эти записи, количество репостов останется =(
                                    0
                                    Обновил способ подсчета голосов в фейсбуке, старое API ушло в deprecated
                                      0
                                      Сделал PHP-скрипт, который генерит ссылки для шаринга и получает количество шеров по урлу.

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

                                      Самое читаемое