Какой самый эффективный способ добавить кнопки «Мне нравится» и «+1» в социальные сети на ваш сайт? - PullRequest
Новая
       9

Какой самый эффективный способ добавить кнопки «Мне нравится» и «+1» в социальные сети на ваш сайт?

5 голосов
/ 17 февраля 2012

Задача звучит тривиально, но терпите меня.

Вот кнопки, с которыми я работаю:

  • Google (+1)
  • Facebook (Like)
  • Twitter (Tweet)
  • LinkedIn (Share)

После небольшого тестирования на webpagetest.org я обнаружил, что это невероятно неэффективно, если вы берете фрагментот каждого из этих сервисов, чтобы разместить эти кнопки на вашей странице.В дополнение к самим изображениям вы также эффективно загружаете несколько файлов JavaScript (в некоторых случаях несколько файлов JavaScript для одной кнопки).Общее время загрузки кнопки «Нравится» Facebook и связанных с ней ресурсов может составлять до 2,5 секунд при подключении DSL.

Теперь несколько лучше использовать службу типа ShareThis, поскольку вы можете получить несколько кнопок из одного источника.,Тем не менее, они не имеют надлежащей поддержки Google +1.Если вы получите код от них для кнопки Google +1, она по-прежнему будет извлекать все эти ресурсы из Google.

У меня есть одна идея, которая заключается в загрузке всех кнопок, когда нажимается общая кнопка «Поделиться».Таким образом, это не увеличивает время загрузки страницы.Я думаю, что это может быть достигнуто с использованием кода, описанного здесь в качестве отправной точки.Возможно, это было бы хорошим решением, но я решил спросить здесь, прежде чем идти по этому пути.

Ответы [ 2 ]

6 голосов
/ 17 февраля 2012

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

https://plusone.google.com/_/+1/confirm?hl=en&url={URL}
http://www.facebook.com/share.php?u={URL}
http://twitter.com/home/?status={STATUS}
http://www.linkedin.com/shareArticle?mini=true&url={URL}&title={TITLE}&summary={SUMMARY}&source={SOURCE}

Вам просто нужно вставитьсоответствующие параметры.Это не становится намного проще или легче, чем это.Конечно, я бы по-прежнему использовал значки для каждой кнопки, но в этом случае я мог бы использовать CSS-спрайты для еще большей экономии.Я действительно могу пойти по этому пути.

ОБНОВЛЕНИЕ

Я реализовал это изменение, и время загрузки страницы изменилось с 4,9 секунды до 3,9 секунды на 1,5 Мбит / с DSL.И количество запросов изменилось с 82 до 63.

У меня есть еще несколько оптимизаций интерфейса, но это был большой шаг в правильном направлении.

2 голосов
/ 17 февраля 2012

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

И простопотому что мне было любопытно, вот еще один способ:

Вот фрагмент соответствующего кода из javascript доли в StackOverflow на Facebook: 

facebook:function(c,k,j){k=a(k,"sfb=1");c.click(function(){e("http://www.facebook.com/sharer.php?u="+k+"&ref=fbshare&t="+j,"sharefacebook","toolbar=1,status=1,resizable=1,scrollbars=1,width=626,height=436")})}}}();

Minified, потому что, эй, я не стал переделыватьcode.

Похоже, что инженеры StackOverflow просто вызывают страницу при нажатии.Это означает, что это просто текст, пока вы не нажмете на него, что динамически вытягивает все в ленивом порядке.

...