суббота, 9 февраля 2013 г.

Правильные социальные share-кнопки

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

Внешний вид




Это самая очевидная проблема: социальных сетей много, у каждой свой дизайн share-блока. По отдельности они выглядят вполне прилично, но при установке всех вместе получается полная каша. Что с этим делать? Во-первых, можно просто оставить одну-две соцсети, выглядеть это будет не так ужасно. Во-вторых, можно использовать обычные иконки с share-ссылкой. К сожалению, в первом случае идут лесом пользователи «второстепенных» соцсетей, а во втором не видно пузомерок — количества лайков и твитов.

Быстродействие




В пору быстрого интернета все меньше приходится задумываться об оптимизации скорости загрузки сайта. Однако с каждым годом растет количество пользователей мобильного интернета, который пока не может похвастаться высокими скоростями. А социальные кнопки способны заметно замедлить загрузку сайта. Интересный факт: еще в 2007 году Amazon сообщил, что каждые лишние 100мс при загрузке сайта снижают продажи на 1%. А Google с 2010 года учитывает скорость загрузки при ранжировании сайтов в поисковой выдаче. И хочется ли после этого ставить нативные кнопки?

 Что же делать?


К счастью, есть много сервисов, с помощью которых можно установить к себе на сайт одну кнопку «Поделиться», объединяющую сразу все нужные социальные сети. Самым популярным в Рунете подобным инструментом является блок «Поделиться» от Яндекса. И он действительно хорош: аккуратные иконки, лаконичный код и даже наличие API для разработчиков. Но как всегда, хочется чего-то большего. Для себя я определил вот какие критерии идеального сервиса социальных кнопочек:

  • Наличие российских социальных сетей
  • Быстрая и гибкая кастомизация блока
  • Счетчик, суммирующий нажатия по иконкам всех сервисов
  • Возможность отправлять страницу в Evernote, по почте, добавлять в закладки, а также печатать.
  • Надежность


PLUSO — молодой сервис, который удовлетворяет всем вышеуказанным требованиям, вот какие кнопочки он позволяет делать, всего более 300 вариаций:


А какими сервисами социальных кнопок пользуетесь вы?
+57
19281
535
grokru 178,3

комментарии (76)

+18
bumbay, #
Блок «Поделиться» для вашего сайта

api.yandex.ru/share/
+6
danilf, #
↵
↑
Блок «поделиться» от Яндекса часто называют «поделиськой».
–6
reallynoideas, #
↵
↑
Впервые слышу такое, обычно говорят Share This Functionality. Хотя звучит мило =)
0
macik_spb, #
↵
↑
На днях задавался вопросом. Если в блоке от Яндекса есть возможность выбрать язык отображения кнопки «Поделиться», то как настроить язык для страниц, которые по умолчанию открываются на странице входа в ту или иную соц.сеть? Всегда открываются на русском, даже если блок настроен на английский язык.
0
davydov, #
↵
↑
еще есть уже больше года существующий отечественный проект socialtop.ru
Помимо share есть и другие соц блоки.
0
bumbay, #
↵
↑
> Помимо share есть и другие соц блоки.

Да ладно?
0
davydov, #
↵
↑
я о том, что сервис, о котором речь в посте, и в яндексе — только share.
в сошиалтоп совмещают в одно и другие блоки — авторизация, комментарии, голосования и др.

но серьезный минус — посетителю надо сначала разрешить доступ приложения socialtop к своему аккаунту в соц сети.
0
Pisarev_OS, #
Такое решение нравится: habrahabr.ru/company/sports_ru/blog/130702/
А вообще, внешний вид как кнопок, так и счетчиков — свой.
+1
XPyCT, #
> А какими сервисами социальных кнопок пользуетесь вы?
share42.com
+3
vandriichuk, #
↵
↑
Пользуюсь именно этим сервисом. Нахожу его очень удобным и практичным.
+3
mr_jok, #
↵
↑
share42.com сейчас перенаправляет совсем в другое место ;-(
+1
conturov, #
Счетчик увеличивается даже если действие не закончилось. Например нажали на иконку Facebook но сообщение не отправили.
0
ibnteo, #
↵
↑
У Яндекс кнопок то же самое, невозможно определить было ли завершено действие.
+1
anor, #
↵
↑
Проблема даже не в этом, а в том, что иначе работает механика в целом у «не настоящих кнопок», они просто перебрасывают пользователя на диалог перепоста в соцсеть, в то время как настоящие кнопки делают иные действия и уже побочным эффектом — дают возможность поделиться.
–12
vandriichuk, #
Есть только одна существенная проблема: если сайт использует шаблонизатор Smarty, то установить Ваши чудо-кнопки не представляется возможным. Во всяком случае нам не удалось.
+7
Methos, #
↵
↑
В smarty/quicky окружите {literal} js код {/literal}
0
vandriichuk, #
↵
↑
Спасибо. Попробуем!
+2
Akuma, #
↵
↑
Или отделить фигурные скобки пробелами, для Smarty 3
+2
Stepler, #
↵
↑
RTFM www.smarty.net/docsv2/ru/language.function.literal.tpl
0
bezludny, #
↵
↑
Необходимы скриншоты админки
+6
Toy, #
Всегда интересовал вопрос, вряд ли кто-нибудь о нем когда-либо всерьез задумывался, но мне он не дает покоя уже как минимум год.

Суть в том, что соц-сети (будем рассматривать Facebook и Twitter) имеют определенные гайдлайны по использованию своих логотипов: Facebook (см. Unacceptable usage), Twitter (Usage guidelines).

Многие используют собственную (или чужую «красивую») реализацию, чтобы лучше смотрелось в конкретном сайте, но допустимо ли это юридически?
+5
Vokabre, #
↵
↑
Когда логотип евро (€) только появился, правила его использования запрещали всякие графические и стилистические изменения. То есть "€" могло быть только так как его описали на чертеже и не иначе. Создатели шрифтов сказали «какого черта» и все равно встроили евро в стилистику шрифта. Комиссия сдалась, поскольку преследовать каждого шрифтовика не смог бы даже Сталин. То же самое с логотипами, можно советовать как их использовать, но запреты вроде «буковку t нельзя только птичку и только одну синюю и никаких дополнений!» идиотски. К тому же никто не отменял право на добросовестное использование в Америках и свободное использование в информационных целях в Россиях. У меня на сайте как-то висела такая кнопочка, похоже, что за неё меня должны были линчевать.
+1
maddogrts, #
↵
↑
Ждите письма: )
На главной странице Вашего интернет-сайта размещен логотип ООО «ЯНДЕКС» (далее –Яндекс). Данный логотип размещен с нарушениями Правил использования логотипа Яндекса (http://company.yandex.ru/about/logotype/rules.xml). Согласно п. 4 Правил, нельзя размещать логотип таким образом, при котором может возникнуть предположение о сотрудничестве Яндекса с какой-либо компанией (лицом) или причастности Яндекса к предлагаемым товарам, услугам, мероприятиям. Данный пункт был нарушен при размещении логотипа Яндекса на главной странице Вашего сайта. Пожалуйста, рассмотрите данное письмо в качестве официального уведомления о нарушении авторских прав и в течение 3 (трех) дней примите необходимые меры для устранения данного нарушения, после принятия которых прошу сразу уведомить меня по адресу электронной почты ....@yandex-team.ru. В случае отказа от выполнения озвученных требований на добровольной основе, Яндекс оставляет за собой право обратиться за защитой своих законных интересов в правоохранительные и судебные органы. С уважением,…
+1
Vokabre, #
↵
↑
Хороший способ действия в таких случаях – убирать логотип и ставить картинку «здесь был логотип Яндекса, который запретили использовать».
+4
azizoid, #
вот что мне не нравится во всех этих сервисах, так это то что они поток пользоватеей через СВОЙ сайт делают, а оттуда редирект.
один раз мне это вышло боком. с тех пор недолюбливаю, беру дизайн, код и ставлю вручную
+7
Terminal, #
А по мне, так кастомные кнопки лайков — это ересь. Нужно использовать стандартные, потому что для пользователя последствия их нажатия гораздо более очевидные, нежели последствия нажатия на кастомную кнопку, а значит он скорее кликнет на первый вариант. Такие вещи, как сделал яндекс, уже 100 лет как сделали в www.addthis.com/ (опять они сделали велосипед, сколько можно!?). Но даже здесь где-то была статья, про то что все эти пестрые панели шаринга — пережиток прошлого. Сейчас для русского проекта vk + facebook = 99% аудитории. Так что мое мнение — ставьте стандартные кнопки vk и fb. И не парьтесь.
+1
squint, #
↵
↑
«для русского проекта vk + facebook = 99% аудитории»
вы сейчас наверное говорите про проект для молодежи? ))
Одноклассники + мой мир = наше всё
0
Terminal, #
↵
↑
мне сложно судить о москве, но если это питер — здесь таких слов даже не слышали.
0
kozel, #
↵
↑
Согласен. Я слышал, что в Питере знают только про две социальные сети — первые и вторую-клон.
0
UksusoFF, #
↵
↑
Те кто пользует мой мир и одноглазников, тыкают в такие кнопки? Может я конечно не прав, но создается впечатление что для них другого интернета вообще нет.
0
anor, #
↵
↑
Тыкают, причем очень активно. Однокласники очень сильно выросли по аудитории, отставая от вк на 10-15% дневной аудитории.
+3
Goobs, #
↵
↑
Проблема еще в том, что лайкомерки, как правило, представляют собой iframe с кучами подгружаемых скриптов и прочего. В результате время загрузки страницы серьезно страдает. ИМХО лучше несколько кастомных закешированных статичных картинок, чем десяток модных лайкомерок, по сути, делающих одно и то же каждая для своей сети.
+12
Cmapuk, #
В этом решении есть несколько дизайнерских проблем: батарея иконок, оранжевый плюс и общий счётчик.

У TNW отличное решение, посмотрите сами.
+6
Mairon, #
↵
↑
К тому же, The Next Web открыли код своих счётчиков.
+6
Fadeev, #
addthis.com/
0
howeal, #
Надеюсь, этот сервис в один прекрасный момент не взломают и не заразят подгружаемый яваскрипт каким-нибудь сборщиком кукисов…
Для всех популярных соц. сетей можно сделать любые картинки со ссылками на оригинальные API. Для чего использовать сторонние сервисы? Или я что-то не понимаю?
0
RReverser, #
↵
↑
Может мне изменяет память, но разве скрипты, подгруженные с чужого домена, могут иметь доступ к кукам на данном?
+22
zhovner, #
А вы сами-то эти кнопки жмакаете?
+1
kozel, #
Вот для кого этот сервис.

+5
Screatch, #
Вы бы это, код заминифайте что ли.
+2
Pisarev_OS, #
↵
↑
Ладно бы код. А чего CSS стоит — share.pluso.ru/pluso.css
+4
lebowski, #
Думаю, что суровая реальность такова: люди будут меньше нажимать на кнопки с нестандартным дизайном. Потому как везде стандартные кнопки, их давно запомнили, все нажимали и знают что происходит.
Может кто-то недавно менял и можно посмотреть статистику по лайкам?
0
ibnteo, #
Не закрыты теги <li>, не экономьте несколько байт ради совместимости с XHTML кодом.

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

Что-то у вас с выравниванием по правому краю, пришлось сделать margin-right:70px, чтобы не вываливалось за край.
0
ibnteo, #
↵
↑
Сделали бы еще несколько CSS, а то слишком большой получается, большая часть которого не используется.
–1
m_z, #
↵
↑
А разве нужно теги закрывать в HTML?
0
ibnteo, #
↵
↑
В XHTML да, да еще зависит и от шаблонизатора, если он основан на XML (например XSLT), то все равно придется их закрыть, но перед этим получив сломанный шаблон, и это из-за всего-то трех незакрытых <li>.
+1
Geldora, #
Я в последнее время подсела на Addthis, хотя изначально не очень-то доверяла «стороннему» сервису. Сейчас — искренне — считаю именно АдЗис лучшим.
а) асинхронный код
б) огромный-преогромный выбор сервисов
в) все темизируется и настраивается

Но лично для меня критически важных два момента:
1. Можно использовать нативные кнопки и виджеты = меньше риск потерять пользователя.
2. СТАТИСТИКА. Статистика и еще раз статистика, помогает понимать тенденции. Довольно хорошая статистика самого сервиса + интеграция с Аналитиксом в одну строчку и без всяких танцев с бубном.

Из минусов: лайки и виджеты поддерживает только для крупных иностранных сетей, для ВК и прочего придется использовать дизайн адзиса + нет виджета лайков. Впрочем, виджеты ВК никто не поддерживает :(

В итоге, лично я ставлю аддзис + отдельно виджеты вк
0
Newbilius, #
А мне в своё время приглянулся sharethis.com/publishers/get-sharing-tools Тоже однотипный стиль, тоже есть ВК, Одноклассники и многие-многие-многие-многие другие. В минусе — считает отдельно статистику (не сумму всех кнопок). Но для меня — самое то.
+1
izzik, #
LinkedIn'a нету, для сектора b2b сервис потерял смысл
+4
i4niac, #
Полный оффтоп, но внезапно задумался. Как завсегдатаи соц. сетей умудряются писать «мне нравиться» в чатах, хотя каждый день десятки раз кликают на кнопку с правильным вариантом?
0
dudeonthehorse, #
↵
↑
Особо изощренные сидят на англ. версии(следовательно Like). Примерно та же мода с английским написанием имени/фамилии :)
+2
Alexx_ps, #
1. Обязательно нужен Linkedin.
2. У кнопок Я.ру и Delicious вырвиглазные цвета. Возьмите #EF3A3D для первой и что-нибудь близкое к #5582D2 для второй.
3. Кнопка G+ работает как +1 с шарингом или просто как шаринг?
4. Почему рекомендуется размещать кнопки вверху, а не внизу? По логике, если человек просмотрел статью, ему уже лениво крутить страницу вверх до заголовка для нажатия кнопки, он ее просто закрывает или уходит по ссылке.
–1
wwwsevolod, #
проблема мобильного интернета не в маленьких скоростях, а в бОльшем времени отклика, скорости уже нормальные
0
Goodkat, #
↵
↑
Скорости нестабильные — от шести мегабит до шестидесяти килобит в секунду.
0
wwwsevolod, #
↵
↑
обычно в местах стабильного сигнала скорость стабильна и не так мала, ожидать высоких скоростей за пределами областных центров конечно же не стоит пока что, но так как это явление повсеместное то проще выключить все красивости, если прямо так сильно нужен интернет.

а вот скорость отклика это беда, когда телефону нужно сделать 500 разных запросов на разные домены — беда, от этого спасает только opera turbo которая позволяет все это делать в один запрос грубо говоря
–3
loststylus, #
Реклама такая реклама
+4
Goodkat, #
Мне нравится, как делают некоторые европейские сайты — там недавно приняли закон, запрещающий трекинг пользователей без их согласия — «социальные кнопки» сперва показываются статической серой «задизэйбленной» картинкой, без загрузки многих килобайт яваскрипт-кода, и лишь по нажатию кнопка активируется, и загружается API — в итоге «социализм» работает только для тех, кто им пользуется, трафика тратится меньше, и страница загружается намного быстрее, что немаловажно при моём мобильном и не всюду быстром интернете.
Хабра, кстати, грузится ужасно долго, в сравнении.
+2
dima_smol, #
sapegin.github.com/social-likes/ru/
0
CB9TOIIIA, #
Попробовал, проект пока сыроват… css и js не сжаты, также проблемы с разными сетями, например Evernote:

image

За шару засчитывает любое нажатие на кнопку:
image
0
loststylus, #
↵
↑
А надо было юзать shares.datagreed.ru или подобный апи :))
0
RLE, #
sharethis.com
0
Tseikovets, #
…блок «Поделиться» от Яндекса. И он действительно хорош: аккуратные иконки, лаконичный код…


Только этот код не проходит валидацию, если у вас не переходный DOCTYPE. Ну а служба поддержки Яндекса мне на это отвечала в том ключе, что валидация это такие глупости, потому что всё итак в принципе работает.

А вообще лично я не люблю на сайтах все эти социальные кнопки, потому что зачастую с технической точки зрения они сделаны просто ужасно, да и регулярно вся эта гирлянда вставляется выше контента. То есть получается посыл, что делиться надо до ознакомления. Наверное, это вариант для тех, у кого какой-то нервный социальный тик, но с логической точки зрения это как-то странно.
+1
alexbeep, #
↵
↑
Да, валидация — это глупость
–1
Tseikovets, #
↵
↑
Ужасно, значит у вас в жизни HTML нет ничего святого!
+1
alexbeep, #
↵
↑
Мой код проходит валидацию легко. Единственное, что мне пишет валидатор в ошибках — это отстутствие ALT к картинкам, охохох. Но специально заморачиваться не буду, ибо это не признак ни профессионализма, ни мастерства, это не признак вообще ничего. Это признак задротства, и того, что верстаку просто больше нечего показать
–3
Tseikovets, #
↵
↑
Это всё равно что назвать «ж и ш» с буквой «и» затродством и тем, что пишущему больше нечего показать, кроме как свою элементарную грамотность. Существуют вещи, которые подразумеваются по умолчанию. HTML-валидация — это как раз что-то типа орфографии.

К слову, отсутствие alt, на мой взгляд, — это как раз ничто иное, как дилетантизм.

Когда у Яндекса ошибка валидации в том, что у элементов присутствует атрибут «data», отсутствующий в спецификациях HTML 4.x и ниже, — это, по большому счёту, вполне терпимо. Но когда сознательно не прописывается alt — это уже, действительно, говнокод.

Поймите правильно, я не утверждаю, что вы плохой верстальщик, так как я просто этого не знаю. Возможно в остальном вы реально профи. Но конкретно отсутствие alt — это просто неправильно.

Атрибут alt важен как в контексте индексации поисковыми роботами, так и accessibility.

В странах западного мира вы бы без корректно прописанных alt могли бы просто не вписаться в ТЗ.
0
alexbeep, #
↵
↑
Я, кстати, серьезно отношсь к орфографическим ошибкам и вы что-то сильно ошиблись, смешав эти понятия.
В тот редкий час, когда я вставляю картинку «рукой», когда вдруг автодополнение не подставляет мне конец тега (а это бывает ингода, я крайне редко использую именно картинки как часть шаблона) я могу забыть дописать alt="" а вы меня из-за этого причислили к говнокодерам. Видимо, действительно сказать больше нечего.

Когда это делает редактор на уже готовом сайте в контенте — да никто за этим и не следит.

Кстати да, мой код легко проходил валидацию и в 2.01 и в 4 и в xHTML и в HTML5 — тогда, когда это действительно являлось камнем преткновения с говноменеджером, который только и делал, что фапал на красные буковки из -за каких-то ничего не стоящих мелочей

–1
Tseikovets, #
↵
↑
Какие-то странные обиды… Я лишь сказал вам, что валидность — это, на мой взгляд, неотъемлемое свойство грамотной разметки. Также как корректная орфография — неотъемлемая часть грамотного текста. Да, лично я воспринимаю небольшую страницу с сотнями ошибки валидации примерно как текст, написанный олбанским языком.

Посмотрите, например, вот здесь. Неужели вы считаете это нормальным? А ведь ресурс, наверняка, делали люди, называющие себя профессионалами. Чтобы вы сказали о филологе, пишущем свои статьи с кучей орфографических ошибок?

Говоря о ваших проблемах с alt, я специально употребил слово «сознательно». Если вы сознательно игнорируете данный атрибут, то вы, действительно, говнокодер, потому что намерено нарушаете спецификации, недопонимая всех сопутствующих проблем.

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

Забудте про alt, давайте в целом. Вы же сами пишите, что ваш код в основной своей массе проходит валидацию. Что же вас заставляет, например, заключать все значения атрибутов в кавычки, тратя лишнее время, хотя большинство браузеров вполне съедает разметку и без них? Значит есть у вас всё-таки какое-то внутреннее чувство правильности. Почему же тогда валидность вы называете глупостью?
0
alexbeep, #
↵
↑
Кавычки ставит top Style Pro.
Валидация — полнейшая глупость, т.к. она совершенно не означает того, что страница будет хорошо выглядеть в разных браузерах и ОС.

Например, если в JS-коде закралась ошибка — это почти полная гарантия того, что весь JS отвалится мгновенно, ну и как теперь сравнить это с валидацией, которая по-сути ничего не дает и не гарантирует?
0
Tseikovets, #
↵
↑
Ну я и не противопоставлял ошибки в JavaScript и ошибки в HTML. Например, ошибка в управлении памятью в каком-нибудь более низкоуровневом языке вообще может привести к тормозам всей системы, но это же ещё не означает, что менее фатальные ошибки гипертекстовой разметки — это достойный предмет для бравирования. На мой взгляд, любая осознанно оставляемая ошибка, если для её исправления ничего особенного не нужно, — это плохо.

Действительно, HTML такая вещь, которая довольна устойчива к ошибкам. Но почему из этого следует, что спецификации теперь можно не соблюдать? Если я напишу «карова машка», вы же тоже всё поймёте, не смотря на две допущенные ошибки, но ведь это считается в обществе неприемлемым. Почему же верстальщики не стесняются делать такие страницы, как я показал в предыдущем комментарии? Неужели только из-за того, что это не каждый может заметить?

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

Я пытаюсь донести до вас мысль, что сознательное нарушение спецификаций, когда это абсолютно не является какой-то вынужденной мерой, — это просто моветон. Да, можно выбросить DOCTYPE, не закрыть head, применить атрибут role в документе, не поддерживающим данную конструкцию, или использовать названия идентификаторов, начинающиеся с цифр, а страница всё равно будет работать. Но неужели трудно сделать по правилам?

Что теряете лично вы, соблюдая спецификации HTML? Да, вы говорите, что ваш код в принципе валиден. Поэтому речь не столько о вас лично, сколько в целом. Ведь вы, как я понимаю, считаете и невалидный код с десятками ошибок вполне приемлемым.
0
alexbeep, #
↵
↑
Вы — параноик-перфекционист и вам действительно нечего делать кроме того, что писать эпические оффтопные комменты
–1
alexbeep, #
↵
↑
Я ничего не теряю, соблюдая спецификации, я также считаю, что тот, кто не закрывает теги и т.п поступает неправильно. Я считаю код приемлемым, если он отлично читается и отлично и одинаково рендерится в современных браузерах и хоть как-то в ie8. Не приписывайте мне слов, которые я не говорил
0
Assorium, #
На самом деле pluso пока самый идеальный по дизайну и скорости работы. Спокойно прикручивается к любому дизайну.
0
fannt, #
↵
↑
Ну не знаю, у меня разрывал верстку и появлялась горизонтальная прокрутка. Wordpress sidebar. Пришлось огромную кнопку + вырезать, тогда стало все хорошо.
0
bnku, #
c IE9.js не работает :(.
0
denisx, #
подсчитывать рейтинг сервером — хорошо, плохо, что у него нет таких мощностей, как у фейсбука и проч. на нагруженном проекте страница за 15 минут меняет показатели, врядли вы так сможете. и ещё вопрос — если я не зарегистрировал домен на api vk, то как вы «без регистрации» посчитаете поличество "+1"?
Автор: на
Ярлыки:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)