Что такое поделиться ссылкой
Некоторые тонкости установки на сайт кнопок «Поделиться» (share) социальных сетей
Сегодня, в эпоху социальных медиа, принято давать посетителям сайта возможность поделиться с друзьями. Мы делали промо-страницу к Дню Рождения интернет-магазина Allsoft и нам нужно было установить кнопки «Поделиться» от Facebook, Twitter, Одноклассников, Вконтакте и Мой мир.
С первого взгляда показалось — что может быть тут особенного — поставил готовый html/js код и готово? Но тонкости оказались в деталях: что если для одной соц. сети нужно передавать один текст, а для другой — другой? Как правильно передать картинку и описание во все сети? А если несколько разных вариантов текста и картинок на одной странице? Как почистить уже закешированную информацию о ссылке в соц.сети? На все эти вопросы нам пришлось найти ответы, которые и вы сможете узнать из этой статьи.
Самый простой вариант:
Чтобы поставить блок «Поделиться» на страницу своего сайта, достаточно зайти наhttp://api.yandex.ru/share/ и через мастер сформировать нужный вид виджета с кнопками — получится код типа
С помощью этого кода пользователь на сайте сможет поделиться в сети ссылкой на него, которая будет выглядеть примерно так:
Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже — то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?
Передача в социальную сеть картинки, заголовка и описания.
Сделать это можно с помощью мета-тегов, например:
тогда ссылка в соц.сети будет выглядеть так:
Здесь «Сегодня день Рождения allsoft.ru — 8 лет :)» — текст написанный пользователем, остальное — информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share, остальные соц.сети тоже их вполне понимают.
Как вообще работает этот механизм:
1. Когда пользователь нажимает кнопку, виджет передает серверу соц.сети ссылку на страницу.
2. Сервер соц. сети сам обращается по этой ссылке и считывает информацию о странице — заголовок, описание, картинку.
3. Сервер соц. сети кеширует на своей стороне информацию о странице и отображает на страницах соц.сети
Какие в связи с этим могут возникнуть проблемы во время разработки:
1. Если вы разрабатываете сайт на сервере, недоступном извне, закрытом http-авторизацией, или локально — соц. сеть не сможет получить информацию о странице, либо вообще не позволит поделиться ссылкой (например, так работает «Одноклассники»), либо отобразит ее без заголовка и описания (как на картинке в первом, самом простом варианте)
2. После того как сервер соц.сети уже один раз обратился к странице, он закешировал информацию о ней — следовательно, если вы захотите изменить заголовок и описание и измените на стороне своего сайта, то в соц.сети оно уже не поменяется — она будет использовать ранее закешированную информацию. (Как это исправить — смотрим ниже.)
Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.
Для этого:
1. Для разных результатов теста мы должны передать в API блока «Поделиться» Яндекса разные ссылки. В нашем случае это были:http://allsoft.ru/promo/allsoft8let/?share=normal, allsoft.ru/promo/allsoft8let/?share=high, allsoft.ru/promo/allsoft8let/?share=low иhttp://allsoft.ru/promo/allsoft8let/ для блока вне теста.
2. Соответственно, в зависимости от переданных скрипту страницы параметров в url, страница должна формироваться с разными мета-тегами.
3. Для того, чтобы передавать отдельное описание для Twitter, нужно уже использовать другой формат API блока «Поделиться» Яндекса — не теги, а js-код:
1. Здесь ya_share_normal — id элемента на странице (), в котором будет появляться блок с социальными кнопками, link — ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.
Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:
и 4 блока кода в JavaScript, как указано выше.
При передаче через API другого title и description соц.сети обновляют закешированную ранее из мета-тегов информацию (за исключением Facebook — но для него есть способ 1)
Также, наверное, можно передавать и image для изменения картинки.
Ну вот, кажется, и все. Добро пожаловать на allsoft.ru/promo/allsoft8let и торопитесь делиться этой ссылкой с друзьями – сегодня последний день акции!
Автор: Владимир Хворостов — Веб-разработчик Softline
1000 и 1 репост: гайд по кнопке «поделиться» в русских соц сетях
Недавно передо мной встала задача — провести на нашем сайте «народное голосование» за номинантов на премию в нашей отрасли (франчайзинг). В рамках народного голосования человек размещал на своей странице в социальной сети пост, рассказывающий о том, за кого именно он проголосовал. Чтобы реализовать эту задачу, мне пришлось перелопатить массу информацию о том, как именно устроен шаринг в различных соцсетях, и как лучше размещать эти самые посты. Кроме того, была создана система подсчета количества размещенных репостов.
К сожалению, большая часть информации на эту тему, которую можно найти на хабре или stackoverflow — уже устарела, поэтому я постарался превратить этот в пост в актуальный мега-гайд по шерингу страниц в соц сетях. Я рассмотрел 5 наиболее популярных в России социальных сетей: контакт, facebook, твиттер, одноклассники и мой мир. Для каждой социальной сети приведен актуальный URL для шаринга, небольшие советы и рекомендации по использованию, а также JS код, позволяющий узнать количество шеров конкретного URL в каждой из соц. сетей.
В конце статьи есть сводная таблица со всеми ссылками и кратким описанием возможностей каждой из сетей.
PHP скрипт
Написал скрипт-генератор ссылок для шаринга, а также для получения данных о количестве шеров.
Качать тут:
github.com/iskander-g/socialhelper
Вконтакте
Самая популярная в России социальная сеть, имеет также и самую богатую функциональность для шеринга, но есть и досадный баг.
URL для того, чтобы поделиться ссылкой в этой соц. сети имеет следующий вид:
Tips&Tricks:
Вы можете добавлять в конец заголовка (title) свои хештеги, и если при шаринге пользователь не введет описание — то они попадут в пост пользователя.
У контакта был обнаружен только один, но очень критичный баг: если по вашей ссылке переходит пользователь, не авторизованный в контакте, то ему будет предложено залогиниться и потом он получит белую страницу с надписью «too long to param». Единственный вариант решения этой проблемы — не передавать описание и т.д., и ограничиться только ссылкой. Ну или просто забить, как мы поступили мы. Это не помешало на данный момент собрать более 900 репостов нашей премии вконтакте.
Получение количества шеров:
Получение количество шеров вконтакте основано на том, что вы добавляете себе на страницу тег script со следующим адресом:
Этот скрипт вызовет метод VK.Share.count(index, count). Соответственно, вам необходимо опеределить его в глобальной области видимости, например так:
Вторая по популярности социальная сеть в России имеет довольно урезанный инструментарий для шаринга ссылок.
URL для того, чтобы поделиться ссылкой в facebook, имеет вид:
Tips & Tricks
Фейсбук не поддерживает кастомные тайтлы и описания для ссылки — в нашем случае это было проблемой, потому что сами голоса мы подсчитываем внутренней системой подсчета, и нам хотелось, чтобы люди размещали в своих соц сетях ссылку на страницу со всеми номинантами — чтобы их друзья, переходя по ссылке, могли сразу проголосовать. Очевидно, для этой страницы были заданы мета-теги с общими текстами и описаниями, но нам хотелось, чтобы при шаринге человек размещал информацию о том, за кого конкретно он проголосовал.
Это удалось реализовать, создав «технические» страницы для каждого номинанта с нужными мета-тегами, которые успешно скачивались и парсились фейсбуком, но при заходе на эту страницу обычного пользователя — он автоматически редиректился на страницу номинации (для этого использовался мета-тег refresh и дублирующий яваскрипт на всякий случай).
В интернете очень много информации про шаринг через фейсбук, и везде пишут вот про такую ссылку:
НО! Эта ссылка не работает с мобильной версией фейсбука. Необходимо использовать просто sharer/sharer.php?u=
Подсчет количества шеров Facebook
У фейсбука больше всего сложностей при шеринге, но при этом самый простой механизм узнавания количества шеров для конкретного урла.
Он выглядит следующим образом:
Также по этой ссылке можно прочитать OG-параметры, которые хранит фейсбук, и некоторые другие свойства урла.
Твиттер не поддерживает размещение изображений к ссылкам, или я не нашел как это сделать. Также пост в твиттере ограничен по длине, поэтому передать туда описание не получится. Зато в твиттере можно передать логин вашего основного аккаунта, чтобы люди подписывались и на него тоже.
URL для твиттера выглядит следующим образом:
Подсчет количества твитов
Подсчет количества шеров конкретного урла в твиттере методами самой соц сети невозможен.
twitter.com/twitterdev/status/667836799897591808
Одноклассники
По своей сути шаринг в одноклассниках полностью аналогичен шарингу в facebook.
Url для шаринга в одноклассниках:
Также невозможно передать кастомные описания и прочее, также приходится использовать технические промежуточные страницы, все аналогично фейсбуку.
Количество шеров страницы в одноклассниках
А вот процесс подсчета количества шеров в одноклассниках больше похож на контакт — также подключается JS скрипт, который вызывает метод ODKL.updateCount(rel, count).
Отличие от контакта в том, что в качестве индекса может быть использован произвольный текст, а не только целое число.
Код, который я использую для подсчета шеров:
Мой мир
В принципе, URL и процесс шаринга в моем мире аналогичен таковому в контакте.
Ссылка для моего мира выглядит следующим образом:
Получение данных о количестве шеров моего мира
Готовый код для получения количества шеров конкретного урла из моего мира имеет вот такой вид:
За информацию по гуглу спасибо Finesse
Ссылка для шаринга:
Простого способа получить количество расшариваний в g+ нет, но есть грязные, например, спарсить из ответа по адресу:
Поделиться ссылкой
Как поделиться
Поделитесь файлом или папкой одним из следующих способов:
Какими файлами и папками можно делиться
Делиться можно файлами и папками, которые лежат в корневом каталоге Диска и во всех созданных вами папках. Если вы хотите поделиться файлом, приложенным к письму, сначала скопируйте его из папки Почтовые вложения (на вкладке Архив на панели слева) в нужную папку на Диске.
Нельзя поделиться файлами и папками, которые лежат внутри общей папки, если вы не ее владелец и имеете право доступа только на просмотр.
Как долго работает ссылка
Ссылка на файл или папку будет работать до тех пор, пока вы не закроете к ним доступ. Если вы опубликуете тот же самый файл или папку еще раз, Диск сгенерирует новую ссылку. Но если файл уже опубликован и вы снова получаете публичную ссылку на него с помощью программы для компьютера или мобильного приложения, то это будет та же самая ссылка, что была сгенерирована при публикации этого файла.
Посмотреть опубликованные файлы
Посмотреть число просмотров и скачиваний по ссылке
Чтобы получить всю информацию о выбранном файле или папке, нажмите значок в левом верхнем углу. В меню отобразятся:
Не могу создать ссылку
Когда на Диске заканчивается свободное место, доступ к нему ограничивается. Чтобы снять ограничения, вам нужно удалить лишние файлы, очистить корзину (файлы в ней тоже занимают место) или купить дополнительное место. Иначе через 44 дня доступ к Диску будет полностью заблокирован, а еще через 6 месяцев все ваши файлы будут удалены навсегда. Подробнее об этом см. в разделе Место на Диске.
Не скачивается файл
Иногда при работе с Диском перестают работать кнопки, не загружаются элементы страницы, не открываются фото, не скачиваются файлы или браузер сообщает об ошибке.
Почему это происходит и как это исправить:
Скачивание публичного файла ограничено
Чтобы уменьшить расход трафика, браузер сохраняет копии посещенных страниц в кеше. Когда вы повторно просматриваете страницы, браузер может загружать их данные из памяти. Например, если вы измените имя файла через программу для компьютера, а браузер загрузит из памяти информацию об этом файле, вы увидите неактуальное имя файла.
Попробуйте обновить страницу, чтобы принудительно загрузить ее из интернета. Если проблема не решится, очистите кеш браузера и удалите все файлы cookie.
Расширения блокируют Яндекс.Диск
Диск может работать некорректно из-за дополнений и расширений в браузере. Чтобы проверить это, временно отключите их. Если Диск работает неправильно из-за блокировщика рекламы или расширения-антивируса, добавьте страницу Диска в исключения этого расширения. Подробнее см. в разделах Настроить блокировщики рекламы, Настроить исключения для сайтов.
Включена блокировка данных в браузере
Выключите блокировку данных по инструкции для вашего браузера:
Поделиться ссылкой
Как поделиться
Поделитесь файлом или папкой одним из следующих способов:
Какими файлами и папками можно делиться
Делиться можно файлами и папками, которые лежат в корневом каталоге Диска и во всех созданных вами папках. Если вы хотите поделиться файлом, приложенным к письму, сначала скопируйте его из папки Почтовые вложения (на вкладке Архив на панели слева) в нужную папку на Диске.
Нельзя поделиться файлами и папками, которые лежат внутри общей папки, если вы не ее владелец и имеете право доступа только на просмотр.
Как долго работает ссылка
Ссылка на файл или папку будет работать до тех пор, пока вы не закроете к ним доступ. Если вы опубликуете тот же самый файл или папку еще раз, Диск сгенерирует новую ссылку. Но если файл уже опубликован и вы снова получаете публичную ссылку на него с помощью программы для компьютера или мобильного приложения, то это будет та же самая ссылка, что была сгенерирована при публикации этого файла.
Посмотреть опубликованные файлы
Посмотреть число просмотров и скачиваний по ссылке
Чтобы получить всю информацию о выбранном файле или папке, нажмите значок в левом верхнем углу. В меню отобразятся:
Не могу создать ссылку
Когда на Диске заканчивается свободное место, доступ к нему ограничивается. Чтобы снять ограничения, вам нужно удалить лишние файлы, очистить корзину (файлы в ней тоже занимают место) или купить дополнительное место. Иначе через 44 дня доступ к Диску будет полностью заблокирован, а еще через 6 месяцев все ваши файлы будут удалены навсегда. Подробнее об этом см. в разделе Место на Диске.
Не скачивается файл
Иногда при работе с Диском перестают работать кнопки, не загружаются элементы страницы, не открываются фото, не скачиваются файлы или браузер сообщает об ошибке.
Почему это происходит и как это исправить:
Скачивание публичного файла ограничено
Чтобы уменьшить расход трафика, браузер сохраняет копии посещенных страниц в кеше. Когда вы повторно просматриваете страницы, браузер может загружать их данные из памяти. Например, если вы измените имя файла через программу для компьютера, а браузер загрузит из памяти информацию об этом файле, вы увидите неактуальное имя файла.
Попробуйте обновить страницу, чтобы принудительно загрузить ее из интернета. Если проблема не решится, очистите кеш браузера и удалите все файлы cookie.
Расширения блокируют Яндекс.Диск
Диск может работать некорректно из-за дополнений и расширений в браузере. Чтобы проверить это, временно отключите их. Если Диск работает неправильно из-за блокировщика рекламы или расширения-антивируса, добавьте страницу Диска в исключения этого расширения. Подробнее см. в разделах Настроить блокировщики рекламы, Настроить исключения для сайтов.
Включена блокировка данных в браузере
Выключите блокировку данных по инструкции для вашего браузера:
Поделиться ссылкой
Как поделиться
Поделитесь файлом или папкой одним из следующих способов:
Какими файлами и папками можно делиться
Делиться можно файлами и папками, которые лежат в корневом каталоге Диска и во всех созданных вами папках. Если вы хотите поделиться файлом, приложенным к письму, сначала скопируйте его из папки Почтовые вложения (на вкладке Архив на панели слева) в нужную папку на Диске.
Нельзя поделиться файлами и папками, которые лежат внутри общей папки, если вы не ее владелец и имеете право доступа только на просмотр.
Как долго работает ссылка
Ссылка на файл или папку будет работать до тех пор, пока вы не закроете к ним доступ. Если вы опубликуете тот же самый файл или папку еще раз, Диск сгенерирует новую ссылку. Но если файл уже опубликован и вы снова получаете публичную ссылку на него с помощью программы для компьютера или мобильного приложения, то это будет та же самая ссылка, что была сгенерирована при публикации этого файла.
Посмотреть опубликованные файлы
Посмотреть число просмотров и скачиваний по ссылке
Чтобы получить всю информацию о выбранном файле или папке, нажмите значок в левом верхнем углу. В меню отобразятся:
Не могу создать ссылку
Когда на Диске заканчивается свободное место, доступ к нему ограничивается. Чтобы снять ограничения, вам нужно удалить лишние файлы, очистить корзину (файлы в ней тоже занимают место) или купить дополнительное место. Иначе через 44 дня доступ к Диску будет полностью заблокирован, а еще через 6 месяцев все ваши файлы будут удалены навсегда. Подробнее об этом см. в разделе Место на Диске.
Не скачивается файл
Иногда при работе с Диском перестают работать кнопки, не загружаются элементы страницы, не открываются фото, не скачиваются файлы или браузер сообщает об ошибке.
Почему это происходит и как это исправить:
Скачивание публичного файла ограничено
Чтобы уменьшить расход трафика, браузер сохраняет копии посещенных страниц в кеше. Когда вы повторно просматриваете страницы, браузер может загружать их данные из памяти. Например, если вы измените имя файла через программу для компьютера, а браузер загрузит из памяти информацию об этом файле, вы увидите неактуальное имя файла.
Попробуйте обновить страницу, чтобы принудительно загрузить ее из интернета. Если проблема не решится, очистите кеш браузера и удалите все файлы cookie.
Расширения блокируют Яндекс.Диск
Диск может работать некорректно из-за дополнений и расширений в браузере. Чтобы проверить это, временно отключите их. Если Диск работает неправильно из-за блокировщика рекламы или расширения-антивируса, добавьте страницу Диска в исключения этого расширения. Подробнее см. в разделах Настроить блокировщики рекламы, Настроить исключения для сайтов.
Включена блокировка данных в браузере
Выключите блокировку данных по инструкции для вашего браузера: