Когда используется ChannelUrl?

Кто-нибудь знает, когда параметр ChannelUrl, переданный в FB.init, фактически используется fb js sdk? Я вижу, что он попадает в наши файлы журналов nginx, и он, похоже, принадлежит пользователям IE8, но я не могу его вручную воссоздать. У меня есть приложение фан-страницы iframe с такими же кнопками и плагинами комментариев.

Ответ 1

вы можете видеть этот пост. это хорошо объяснено.

https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/

эта почтовая ссылка может обновиться в будущем. поэтому я скопирую всю запись из блога разработчиков FB с предоставлением полного кредита автору.

Практическое руководство: оптимизация производительности социальных плагинов Анкур Пансари - 3 августа 2011 года в 12:00

Миллионы веб-сайтов используют XFBML для создания социальных плагинов. Мы хотели поделиться некоторыми передовыми методами, которые могут улучшить их эффективность на ваших сайтах. В частности, мы предлагаем пользовательскую функцию channelUrl и асинхронную загрузку, которая при использовании улучшает время загрузки и уменьшает другие проблемы, такие как двойной подсчет реферального трафика из Facebook.

Пользовательский URL канала является необязательным параметром в функции FB.init, называемой channelUrl. Когда вы инициализируете библиотеку JavaScript, добавьте параметр channelUrl в функцию FB.init:

<div id="fb-root"></div>
 <script src="//connect.facebook.net/en_US/all.js"></script>
 <script>
   FB.init({
     appId  : 'YOUR APP ID',
     status: true, // check login status
     cookie: true, // enable cookies to allow server to access session,
     xfbml: true, // enable XFBML and social plugins
     oauth: true, // enable OAuth 2.0
     channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
   });
 </script>

ChannelUrl указывает на файл, который вы добавляете в локальный каталог, который помогает улучшить скорость связи в некоторых старых браузерах. Без channelUrl мы вынуждены использовать обходные пути, такие как загрузка второй копии веб-страницы в скрытом iframe для правильной загрузки социальных плагинов. Обходные пути увеличивают время загрузки и раздувают реферальный трафик от Facebook.

Чтобы создать файл channel.html, добавьте следующую строку в файл (http://www.yourdomain.com/channel.html):

<script src="//connect.facebook.net/en_US/all.js"></script>

Если у вас есть возможность запуска PHP, мы настоятельно рекомендуем установить длинный кеш для файла channelUrl для обеспечения оптимальной производительности. Вот пример PHP script, который выполняет следующее:

<?php
  $cache_expire = 60*60*24*365;
  header("Pragma: public");
  header("Cache-Control: maxage=".$cache_expire);
  header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>

<script src="//connect.facebook.net/en_US/all.js"></script>

В этом случае вы также должны установить файл channelUrl на полный URL-адрес, например http://www.yourdomain.com/channel.php.

В нашем тестировании добавление настраиваемого каналаUrl улучшает производительность в Internet Explorer, поэтому его включение рекомендуется всем нашим разработчикам. Internet Explorer дает статистически значимый прирост производительности при включении параметра, когда время загрузки тестового сайта с 5 плагинами XFBML улучшается с 1,10 секунды до 0,43 секунды.

Асинхронная загрузка - еще одна простая тактика, которая позволяет быстро загружать вашу страницу, не блокируя загрузку других элементов вашей страницы. После успешной загрузки JS SDK мы вызываем функцию window.fbAsyncInit. Все функции front-end, которые зависят от вызовов API Facebook, должны быть разделены и вызваны через window.fbAsyncInit. Это гарантирует, что функции Facebook загружаются неблокирующимся способом и ускорит его рендеринг, который имеет положительные преимущества SEO. При разработке своих социальных функций вы должны подойти к нему с этим менталитетом, чтобы начать.

Например:

<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
  /* All Facebook functions should be included 
     in this function, or at least initiated from here */
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', 
             status: true, 
             cookie: true,
         xfbml: true});

    FB.api('/me', function(response) {
      console.log(response.name);
    });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>
</body>
<html>

Мы обновили нашу документацию, чтобы отразить важность этих параметров и изменили код примера по умолчанию, чтобы включить channelUrl. Мы продолжаем обновлять наши документы в рамках Operation Developer Love, а также делиться более передовыми методами с помощью сообщений "How-To" в блогах.