Pull to refresh

Comments 44

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

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

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

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

Ещё хотелось бы добавить 1 граблю, на которую я, увы, наступил. Вконтакте не понимает jpeg расширений изображения для share, нужно проставить jpg. Мне пришлось обнулить счётчик, т.к. из вк мне ответили:
К сожалению, пока обновление кэша не предусмотрено. Возможно, в скором будущем ситуация будет исправлена
Ну собственно именно они и представляют особый интерес. До сих пор мне не попадалось нормальных статей по правильному встраиванию like-кнопок. Да что говорить, большинство из них вообще предлагают разного рода шаманства. Например, при интеграции вк-лайк-кнопки, использовать и pageImage и Image одновременно — на всякий случай. Или встраивать помимо og:image ещё и vk:image. Ну и т.д…
Я что то не то написал? Текст автора разве можно назвать тонкостями установки? Может я что то не понял?
Например, для фейсбука можно сделать собственную кнопку, а количество лайков получать вот отсюда:
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>
1. Однозначного ответа тут наверное нет, все зависит от каждого конкретного случая. Может быть просто подобрать или сделать вариант отображения счетчиков лайков не в строку с кнопками, а над ними. В случае, описанном в нашей статье, это вообще не потребовалось — у нас кнопки без счетчиков, только иконки — их размер всегда одинаков.

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

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

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

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


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

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

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

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

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

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

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

Information

Founded
1993
Location
Россия
Website
www.softline.ru
Employees
1,001–5,000 employees
Registered
Representative
Softliner