Softliner May 31 2012 at 11:54

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

5 min

205K

Softline corporate blogWebsite development*

+44

Comments 44

faiwer May 31 2012 at 12:29

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

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

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

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

Ещё хотелось бы добавить 1 граблю, на которую я, увы, наступил. Вконтакте не понимает jpeg расширений изображения для share, нужно проставить jpg. Мне пришлось обнулить счётчик, т.к. из вк мне ответили:

К сожалению, пока обновление кэша не предусмотрено. Возможно, в скором будущем ситуация будет исправлена

+14

4ikist May 31 2012 at 13:27

Это уже тонкости установки :)

-4

faiwer May 31 2012 at 13:31

Ну собственно именно они и представляют особый интерес. До сих пор мне не попадалось нормальных статей по правильному встраиванию like-кнопок. Да что говорить, большинство из них вообще предлагают разного рода шаманства. Например, при интеграции вк-лайк-кнопки, использовать и pageImage и Image одновременно — на всякий случай. Или встраивать помимо og:image ещё и vk:image. Ну и т.д…

4ikist May 31 2012 at 13:56

Я что то не то написал? Текст автора разве можно назвать тонкостями установки? Может я что то не понял?

NixGuy May 31 2012 at 13:30

Например, для фейсбука можно сделать собственную кнопку, а количество лайков получать вот отсюда:
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>

Softliner May 31 2012 at 13:35

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

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

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

faiwer May 31 2012 at 13:39

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

Пардон, а какая разница? Важно что есть конкретные URl (пусть будет historyAPI), и есть контент, к которому они прикреплены. Каждая такая «страница» имеет своё название, описание, возможно, изображение. Интересует именно способ подключения лайк-кнопок, а не техн.реализация ajax-сайта. Ведь где и как вызвать определённый js-код разработчик знает сам :)

qmax May 31 2012 at 13:57

sharetis.com

nicothin May 31 2012 at 15:46

опечатка sharetits.com была бы забавнее.
www.sharethis.com/ — Вы имели в виду, видимо.

TIgorA May 31 2012 at 13:58

1. Я запихнул все кнопки в таблицу, возможно не самое элегантное решение, но по крайней мере они не расползаются.

2. Примеры асинхронной загрузки социальных кнопок я сделал у себя в блоге.

brook May 31 2012 at 15:08

1) Мы используем своим картинки — не получается их склеить красиво
2) Добавьте like панель в iframe и будет все хорошо

faiwer May 31 2012 at 15:12

1. У вас внешние ссылки или iframe-лайки? Если внешние ссылки, то понятное дело — можно оформлять как душе угодно.
2. О! А это идея. Спасибо.

faiwer May 31 2012 at 15:18

Хм, по поводу пункта 2 — а не придётся ему задавать большую высоту (iframe-у) сразу, дабы всплывающие панели «шаринга» g+, vk, fb не обрезались?

aleks_raiden May 31 2012 at 15:45

я видел для этого плагин, вроде jquery.socialize но могу ошибаться, недавно он проскакивал по всех лентах

faiwer May 31 2012 at 15:49

Посмотрел. Генерит <a/>-ки, а это и без плагина задача тривиальная. Ни 1 из перечисленных мною выше пунктов не наблюдается при размещении Х внешних ссылок.

aleks_raiden May 31 2012 at 15:51

вы это смотрели? socialitejs.com/

faiwer May 31 2012 at 15:56

Точно не это. Я смотрел вот это. А то что вы сейчас скинули действительно интересное решение. Жаль нет vk и прочих наших сетей. Но если их можно легко прикрутить — бомба :)

happyproff May 31 2012 at 16:10

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

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

faiwer May 31 2012 at 16:18

Если чуть посложнее, то я вижу это примерно так:

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

  // g+, fb, ...
} );

Правда не знаю как там получится с разного рода <meta property=«or:..., если разместить несколько share-панелей.

faiwer May 31 2012 at 16:21

Хм, дошло — все метатеги (og:*, description, g+) нужно обязательно проставлять сразу, иначе при «расшаривании» получится бред, т.к. сервер соц.сети не достучится до нужных ему параметров.

happyproff May 31 2012 at 16:26

Да, отложено стоит загружать только iframe'ы и их содержимое, грубо говоря.

kost May 31 2012 at 17:22

sapegin.github.com/social-likes/

faiwer May 31 2012 at 17:26

Ссылки открываются в отдельных окнах.

AntonioK Jun 1 2012 at 11:12

По пункту 2 — у Яндекса есть возможность использовать «асинхронный режим».

zencd May 31 2012 at 13:44

Установил Я.Шаре, посмотрел какие ссылки вовне он генерит, прописал ссылки в HTML <a href='' onclick''>, убрал Я.Шаре. Спасибо Яндексу!

qmax May 31 2012 at 13:56

Откройте для себя sharethis.com
Цена вопроса: разрешение 3rd party cookies.

TIgorA May 31 2012 at 14:03

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

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

TIgorA May 31 2012 at 14:06

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

meta itemprop=«name» content=""
meta itemprop=«description» content="'"
meta itemprop=«image» content=""

qmax May 31 2012 at 14:38

Код для g+ есть. только онлайн поиск не работает, надо промотать.
Код лоя +1 есть в «аддонах».

faiwer May 31 2012 at 14:18

Там настраивается сопроводительный текст? Изображение? Ссылка? Конструктор мне выдал это — span( class: st_facebook_hcount, displayText: Facebook ). Лайки открываются в отдельных окнах. Встраиваемый код у меня почему то не заработал. В общем какое то сомнительное это решение, ИМХО.

qmax May 31 2012 at 14:41

В конструкторе — не настраивается.
Проставляется через API stWidget.addEntry
либо кастомизацией через st_foo атрибуты.

qmax May 31 2012 at 14:42

там зарегаться надо.
чотбы доступ к статистике был и всё такое.

faiwer May 31 2012 at 14:45

Перед выдачей реги он заставил меня регистрироваться. В любом случае такое решение можно написать за пару часов самому без использования «3rd party cookies». Понадёргать картинок, написать миксин\шаблон\блабла и вызывать где нужно. Ну и немного css, разумеется. ИМХО. Если не стоит задачи встраивать лайки через API, с iframe-ми, то зачем тягать лишнее?

qmax May 31 2012 at 17:18

ну, это сервис для тех, кто за пару часов не сможет написать кнопочки на 100500 сервисов.

Renius Oct 30 2012 at 15:54

Так оно работает хуже чем копипаста кодов кнопок из developmen разделов соц сетей.

Goobs May 31 2012 at 14:04

еще вариант — share42.com/

faiwer May 31 2012 at 14:10

Попробовал — открываются в отдельных окнах. Или есть и встраиваемое решение?

Goobs May 31 2012 at 14:25

А чем вас окна смущают? Зато страница не перегружается лишними скриптами, по сути, делающими одно и то же.

faiwer May 31 2012 at 14:27

Полагаю, что количество лайков будет раза в 2-3 меньше. Люди не любят лишней суеты.

kryoz May 31 2012 at 15:22

Я этот метод уже давно стал использовать. Однако FB не принимает почему-то данные из Ya.share, если e;t установлены данные через opengraph — на странице должен присутствовать родной лайк от FB.

Aliance May 31 2012 at 18:39

Стал замечать, что любая скрытая реклама значительно понижает у меня интерес к продукту. Эта статья не исключение :(

zhirovann May 31 2012 at 23:05

В продукту — шаринговым кнопкам? или к скидкам в интернет-магазине софта?

MaksimMukharev Jun 1 2012 at 07:46

Очень часто полезная информация распространяется вместе с рекламой, которая и мотивирует на написание. Если вы не можете взять только полезное вам, то вы кучу всего пропустите. Кстати, а счет з асвет вы тоже пропустите, если на нем реклама, интересно? :)

coocheenin Jun 1 2012 at 03:32

Полезная статья. Спасибо!