Некоторые тонкости установки на сайт кнопок «Поделиться» (share) социальных сетей

    Сегодня, в эпоху социальных медиа, принято давать посетителям сайта возможность поделиться с друзьями. Мы делали промо-страницу к Дню Рождения интернет-магазина Allsoft и нам нужно было установить кнопки «Поделиться» от Facebook, Twitter, Одноклассников, Вконтакте и Мой мир.

    С первого взгляда показалось — что может быть тут особенного — поставил готовый html/js код и готово? Но тонкости оказались в деталях: что если для одной соц. сети нужно передавать один текст, а для другой — другой? Как правильно передать картинку и описание во все сети? А если несколько разных вариантов текста и картинок на одной странице? Как почистить уже закешированную информацию о ссылке в соц.сети? На все эти вопросы нам пришлось найти ответы, которые и вы сможете узнать из этой статьи.

    Самый простой вариант:
    Чтобы поставить блок «Поделиться» на страницу своего сайта, достаточно зайти наhttp://api.yandex.ru/share/ и через мастер сформировать нужный вид виджета с кнопками — получится код типа

    <script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
    <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div> 
    

    С помощью этого кода пользователь на сайте сможет поделиться в сети ссылкой на него, которая будет выглядеть примерно так:


    Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже — то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?

    Передача в социальную сеть картинки, заголовка и описания.
    Сделать это можно с помощью мета-тегов, например:

     <meta property="og:image" content="http://allsoft.ru/bitrix/templates/allsoft2011/images/8let/dragon_normal.jpg" />
    <meta property="og:title" content="Я – лицензионный Дракон!" />
    <meta property="og:description" content="Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!" />

    тогда ссылка в соц.сети будет выглядеть так:



    Здесь «Сегодня день Рождения 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-код:

    	new Ya.share({
    	            element: 'ya_share_normal',
    	                elementStyle: {
    	                    'type': 'none',
    	                    'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir']
    	                },
    	                link: 'http://allsoft.ru/promo/allsoft8let/?share=normal',
    	                serviceSpecific: {
    	                    twitter: {
    	                        title: 'Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!'
    	                   }
    	            }
    	    });

    1. Здесь ya_share_normal — id элемента на странице (), в котором будет появляться блок с социальными кнопками, link — ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.

    Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:
    <span id="ya_share_normal"></span>
    <span id="ya_share_high"></span>
    <span id="ya_share_low"></span>
    <span id="ya_share"></span>
    

    и 4 блока кода в JavaScript, как указано выше.

    Как изменить закешированный соц.сетью заголовок и описание.
    1. Для Facebook есть самый лучший способ: зайти на их дебаггер developers.facebook.com/tools/debug и ввести url своей ссылки — он отобразит информацию о странице и заодно сбросит кеш, который повлияет на кнопку «Поделиться».
    2. Также можно, но не рекомендуется использовать: 1) добавление параметра к ссылке, например ?v=2 2) Использование bit.ly и аналогичных сервисов по сокращению ссылок. Подробнее о достоинствах и недостатках можно прочитать здесь (англ.): umairj.com/146/how-to-clear-facebook-shares-cache
    3. К сожалению, такого способа, как у Facebook, у других соц.сетей нет. Поэтому для них нужно использовать способ 2 с изменением ссылки или API блока «Поделиться» от Яндекса:

    	    new Ya.share({
    	            element: 'ya_share',
    	                elementStyle: {
    	                    'type': 'none',
    	                    'quickServices': ['facebook','twitter','odnoklassniki','vkontakte','moimir']
    	                },
    	                title: 'Allsoft 8 лет! — Акция с 11 по 31 мая!',
    	                description: 'Пройдите праздничный тест и примите участие в розыгрыше',
    	                link: 'http://allsoft.ru/promo/allsoft8let/',
    	                serviceSpecific: {
    	                    twitter: {
    	                        title: 'Allsoft 8 лет! — Акция с 11 по 31 мая!'
    	                   }
    	            }
    	    });
    

    При передаче через API другого title и description соц.сети обновляют закешированную ранее из мета-тегов информацию (за исключением Facebook — но для него есть способ 1)
    Также, наверное, можно передавать и image для изменения картинки.

    Ну вот, кажется, и все. Добро пожаловать на allsoft.ru/promo/allsoft8let и торопитесь делиться этой ссылкой с друзьями – сегодня последний день акции!

    Автор: Владимир Хворостов — Веб-разработчик Softline
    Softline
    Company

    Comments 44

      +14
      Хотелось бы более развёрнутой статьи, включающей ответы на такие вопросы как:

      1. Как сверстать полоску из нескольких like кнопок так, чтобы расстояния между ними выглядели гармонично. У меня пока не получилось. Ведь сервисы внедряют туда свои iframe-ы, с чётко заданным width, при том, что его содержимое может оказаться меньше (к примеру недостаточно лайков).

      2. Как удобно организовать подгрузку like-кнопок после загрузки страницы, а не до, т.к. в случае проблемы с соединением с тем же facebook-ом, страница может повиснуть, что очень не приятно. Впринципе я понимаю как это сделать, но всегда проще делать что-то, опираясь на опыт других людей.

      3. Как удобно организовать несколько like-панелей для разного контента на ajax-сайте.

      Ещё хотелось бы добавить 1 граблю, на которую я, увы, наступил. Вконтакте не понимает jpeg расширений изображения для share, нужно проставить jpg. Мне пришлось обнулить счётчик, т.к. из вк мне ответили:
      К сожалению, пока обновление кэша не предусмотрено. Возможно, в скором будущем ситуация будет исправлена
        –4
        Это уже тонкости установки :)
          +2
          Ну собственно именно они и представляют особый интерес. До сих пор мне не попадалось нормальных статей по правильному встраиванию like-кнопок. Да что говорить, большинство из них вообще предлагают разного рода шаманства. Например, при интеграции вк-лайк-кнопки, использовать и pageImage и Image одновременно — на всякий случай. Или встраивать помимо og:image ещё и vk:image. Ну и т.д…
            +1
            Я что то не то написал? Текст автора разве можно назвать тонкостями установки? Может я что то не понял?
            +1
            Например, для фейсбука можно сделать собственную кнопку, а количество лайков получать вот отсюда:
            https://api.facebook.com/method/fql.query?query=select%20%20like_count,%20total_count,%20share_count,%20click_count%20from%20link_stat
            %20where%20url=%22http://example.com/%22


            В ответе придет, что-то вроде этого:
            <fql_query_response xmlns="http://api.facebook.com/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" list="true">
                <link_stat>
                    <like_count>1</like_count>
                    <total_count>2</total_count>
                    <share_count>1</share_count>
                    <click_count>0</click_count>
                </link_stat>
            </fql_query_response>
              0
              1. Однозначного ответа тут наверное нет, все зависит от каждого конкретного случая. Может быть просто подобрать или сделать вариант отображения счетчиков лайков не в строку с кнопками, а над ними. В случае, описанном в нашей статье, это вообще не потребовалось — у нас кнопки без счетчиков, только иконки — их размер всегда одинаков.

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

              3. Тут тоже зависит от конкретного случая — что за ajax-сайт — как формируются адреса страниц, как получается его контент. Может быть подойдет простой вариант — загружать кнопки вместе с контентом.
                0
                Тут тоже зависит от конкретного случая — что за ajax-сайт — как формируются адреса страниц, как получается его контент.

                Пардон, а какая разница? Важно что есть конкретные URl (пусть будет historyAPI), и есть контент, к которому они прикреплены. Каждая такая «страница» имеет своё название, описание, возможно, изображение. Интересует именно способ подключения лайк-кнопок, а не техн.реализация ajax-сайта. Ведь где и как вызвать определённый js-код разработчик знает сам :)
                0
                sharetis.com
                  +1
                  опечатка sharetits.com была бы забавнее.
                  www.sharethis.com/ — Вы имели в виду, видимо.
                  +2
                  1. Я запихнул все кнопки в таблицу, возможно не самое элегантное решение, но по крайней мере они не расползаются.

                  2. Примеры асинхронной загрузки социальных кнопок я сделал у себя в блоге.
                    +1
                    1) Мы используем своим картинки — не получается их склеить красиво
                    2) Добавьте like панель в iframe и будет все хорошо
                      0
                      1. У вас внешние ссылки или iframe-лайки? Если внешние ссылки, то понятное дело — можно оформлять как душе угодно.
                      2. О! А это идея. Спасибо.
                        0
                        Хм, по поводу пункта 2 — а не придётся ему задавать большую высоту (iframe-у) сразу, дабы всплывающие панели «шаринга» g+, vk, fb не обрезались?
                        0
                        я видел для этого плагин, вроде jquery.socialize но могу ошибаться, недавно он проскакивал по всех лентах
                          0
                          Посмотрел. Генерит <a/>-ки, а это и без плагина задача тривиальная. Ни 1 из перечисленных мною выше пунктов не наблюдается при размещении Х внешних ссылок.
                            +1
                            вы это смотрели? socialitejs.com/
                              0
                              Точно не это. Я смотрел вот это. А то что вы сейчас скинули действительно интересное решение. Жаль нет vk и прочих наших сетей. Но если их можно легко прикрутить — бомба :)
                          0
                          2. Как удобно организовать подгрузку like-кнопок после загрузки страницы, а не до, т.к. в случае проблемы с соединением с тем же facebook-ом, страница может повиснуть, что очень не приятно. Впринципе я понимаю как это сделать, но всегда проще делать что-то, опираясь на опыт других людей.


                          Загрузка четырёх кнопок это почти 30 HTTP-запросов. Их загрузку стоит делать отложенной всегда, что бы в первую очередь загрузилась страница и полностью построилась для клиента, и только во вторую подгружались кнопки. Я часто использую тупо setInterval на 1 секунду после window.onload и загружаю кнопки get-запросом к статическому HTML-файлу. Не идеально, но ускоряет загрузку страницы раза в два, по сравнению с вариантом, где коды кнопок сразу в HTML.
                            0
                            Если чуть посложнее, то я вижу это примерно так:

                            $( function()
                            {
                              $.getScript( cfg.vk.url, function()
                              {
                                 var param = cfg.vk;
                                 VK.Widget.Add( ... );
                              } );
                            
                              // g+, fb, ...
                            } );
                            

                            Правда не знаю как там получится с разного рода <meta property=«or:..., если разместить несколько share-панелей.
                              0
                              Хм, дошло — все метатеги (og:*, description, g+) нужно обязательно проставлять сразу, иначе при «расшаривании» получится бред, т.к. сервер соц.сети не достучится до нужных ему параметров.
                                0
                                Да, отложено стоит загружать только iframe'ы и их содержимое, грубо говоря.
                            0
                              0
                              Ссылки открываются в отдельных окнах.
                              0
                              По пункту 2 — у Яндекса есть возможность использовать «асинхронный режим».
                              0
                              Установил Я.Шаре, посмотрел какие ссылки вовне он генерит, прописал ссылки в HTML <a href='' onclick''>, убрал Я.Шаре. Спасибо Яндексу!
                                0
                                Откройте для себя sharethis.com
                                Цена вопроса: разрешение 3rd party cookies.
                                  0
                                  Решение с разными урлами для разных результатов интересное, но тогда и цифры на счетчиках будут разные.

                                  Ну и не хватает кода для G+

                                    0
                                    Видимо мне нельзя вставлять код, будет некрасиво

                                    meta itemprop=«name» content=""
                                    meta itemprop=«description» content="'"
                                    meta itemprop=«image» content=""
                                      0
                                      Код для g+ есть. только онлайн поиск не работает, надо промотать.
                                      Код лоя +1 есть в «аддонах».
                                      0
                                      Там настраивается сопроводительный текст? Изображение? Ссылка? Конструктор мне выдал это — span( class: st_facebook_hcount, displayText: Facebook ). Лайки открываются в отдельных окнах. Встраиваемый код у меня почему то не заработал. В общем какое то сомнительное это решение, ИМХО.
                                        0
                                        В конструкторе — не настраивается.
                                        Проставляется через API stWidget.addEntry
                                        либо кастомизацией через st_foo атрибуты.
                                          0
                                          там зарегаться надо.
                                          чотбы доступ к статистике был и всё такое.
                                            0
                                            Перед выдачей реги он заставил меня регистрироваться. В любом случае такое решение можно написать за пару часов самому без использования «3rd party cookies». Понадёргать картинок, написать миксин\шаблон\блабла и вызывать где нужно. Ну и немного css, разумеется. ИМХО. Если не стоит задачи встраивать лайки через API, с iframe-ми, то зачем тягать лишнее?
                                              0
                                              ну, это сервис для тех, кто за пару часов не сможет написать кнопочки на 100500 сервисов.
                                                0
                                                Так оно работает хуже чем копипаста кодов кнопок из developmen разделов соц сетей.
                                        0
                                        еще вариант — share42.com/
                                          0
                                          Попробовал — открываются в отдельных окнах. Или есть и встраиваемое решение?
                                            0
                                            А чем вас окна смущают? Зато страница не перегружается лишними скриптами, по сути, делающими одно и то же.
                                              +1
                                              Полагаю, что количество лайков будет раза в 2-3 меньше. Люди не любят лишней суеты.
                                          0
                                          Я этот метод уже давно стал использовать. Однако FB не принимает почему-то данные из Ya.share, если e;t установлены данные через opengraph — на странице должен присутствовать родной лайк от FB.
                                            0
                                            Стал замечать, что любая скрытая реклама значительно понижает у меня интерес к продукту. Эта статья не исключение :(
                                              0
                                              В продукту — шаринговым кнопкам? или к скидкам в интернет-магазине софта?
                                                0
                                                Очень часто полезная информация распространяется вместе с рекламой, которая и мотивирует на написание. Если вы не можете взять только полезное вам, то вы кучу всего пропустите. Кстати, а счет з асвет вы тоже пропустите, если на нем реклама, интересно? :)
                                                0
                                                Полезная статья. Спасибо!

                                                Only users with full accounts can post comments. Log in, please.