¿Cuándo se usa realmente ChannelUrl?

Question

¿Alguien sabe cuando el parámetro ChannelUrl, pasado a FB.init, es realmente utilizado por el fb js sdk? Puedo ver que recibe un golpe en nuestros archivos de registro de nginx y parece ser de usuarios de IE8, pero parece que no puedo recrearlo manualmente. Tengo una aplicación iframe Fan Page, con botones similares y los complementos de comentarios.

Answer 1

puede ver esta publicación. está bien explicado.

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

este enlace post puede actualizar en el futuro. así que estoy copiando y pegando toda la publicación del blog de desarrolladores de FB dando todo el crédito al autor.

---

Cómo hacer: Optimizar Rendimiento Social Plugin por Ankur Pansari - 3 agosto 2011 a las 12:00 am

millones de sitios web utilizan XFBML para hacer plugins sociales. Queríamos compartir algunas de las mejores prácticas que pueden mejorar el rendimiento de estas en sus sitios web. Específicamente, ofrecemos channelUrl personalizado y carga asíncrona que, cuando se utiliza, mejorará los tiempos de carga y reducirá otros problemas, como el doble conteo del tráfico de referencia de Facebook.

El canal personalizado URL es un parámetro opcional en la función FB.init llamada channelUrl. Al inicializar la biblioteca JavaScript, añada el parámetro channelUrl en la función 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> 

puntos El channelUrl a un archivo que se agrega a su directorio local que ayuda a mejorar la velocidad de comunicación en algunos navegadores antiguos. Sin el channelUrl, nos vemos obligados a utilizar soluciones como cargar una segunda copia de la página web en un iframe oculto para cargar correctamente los complementos sociales. Las soluciones temporales aumentan los tiempos de carga e inflan el tráfico de referencia de Facebook.

Para crear un archivo channel.html, añada la siguiente línea al archivo (que se encuentra en http://www.yourdomain.com/channel.html):

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

Si usted tiene la capacidad de ejecutar PHP, recomendamos encarecidamente el establecimiento de un largo caché para el archivo channelUrl para asegurar un rendimiento óptimo. Aquí es un script PHP de muestra que logra esto:

<?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> 

En este caso, también debe configurar el archivo channelUrl a la dirección URL completa, como http://www.yourdomain.com/channel.php.

En nuestras pruebas, agregar un canal personalizadoUrl mejora el rendimiento en Internet Explorer y, por lo tanto, se recomienda su inclusión para todos nuestros desarrolladores. Internet Explorer produce ganancias de rendimiento estadísticamente significativas al incluir el parámetro, donde el tiempo de carga de un sitio web de prueba con 5 complementos XFBML mejora de 1.10 segundos a 0.43 segundos.

La carga asincrónica es otra táctica simple que permite que su página se cargue rápidamente sin bloquear la carga de otros elementos de su página. Tras la carga exitosa del JS SDK, llamamos a la función window.fbAsyncInit. Todas las funciones frontales que dependen de las llamadas a la API de Facebook se deben separar y llamar a través de window.fbAsyncInit. Esto garantiza que las características de Facebook se carguen sin bloqueos y acelerará su renderizado, lo que tiene beneficios positivos de SEO. Al diseñar sus características sociales, debe comenzar con esta mentalidad para comenzar.

Por ejemplo:

<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> 

Hemos actualizado nuestra documentación para reflejar la importancia de estas opciones y cambiamos el código de ejemplo por defecto para incluir un channelUrl. Continuamos actualizando nuestros documentos como parte de Operation Developer Love, así como también compartimos más prácticas recomendadas a través de entradas de blog "prácticas".