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



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

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

В кінці статті є зведена таблиця з усіма посиланнями і коротким описом можливостей кожної з мереж.

Вконтакте


Найпопулярніша в Росії соціальна мережа, має також і саму багату функціональність для шерінга, але є і прикрий баг.

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.php?u={$url}

Як видно, фейсбук не підтримує передачу кастомних заголовків, описів і зображень — ці дані він бере зі сторінки, яка порпається, з відповідних мета-тегів:
  • og:title — заголовок посилання
  • og:description — опис посилання
  • og:image — зображення для шарінга


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

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

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

АЛЕ! Це посилання не працює з мобільною версією фейсбуку. Необхідно використовувати просто
sharer.php?u=
 


Підрахунок кількості шерів Facebook
У фейсбуку найбільше складнощів при шерінг, але при цьому найпростіший механізм впізнавання кількості шерів для конкретного url.

Він виглядає наступним чином:
$.get("https://api.facebook.com/method/links.getStats?urls=" + url + "&format=json", {}, function(data) {
console.log(data[0].share_count);
}, 'json');


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.php?u={$url}
Використовуючи 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 пікселів.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.