Quando viene effettivamente utilizzato ChannelUrl?

Question

Qualcuno sa quando il parametro ChannelUrl, passato a FB.init, viene effettivamente utilizzato da fb js sdk? Vedo che viene colpito nei nostri file di registro nginx e sembra provenire da utenti di IE8, ma non riesco a ricrearlo manualmente. Ho un'app iframe Fan Page, con pulsanti simili e plugin per i commenti.

Answer 1

Puoi vedere questo post. è ben spiegato.

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

questo link post può aggiornare in futuro. quindi sto copiando incolla l'intero post dal blog degli sviluppatori di FB dando il pieno credito all'autore.

---

How-To: Ottimizzare Plugin performance sociale da Ankur Pansari - 3 Agosto 2011 alle 12:00 am

milioni di siti web usano XFBML per rendere i plugin sociali. Volevamo condividere alcune best practice che possono migliorare le prestazioni di questi sui tuoi siti web. In particolare, offriamo channelUrl personalizzato e caricamento asincrono che, se utilizzati, miglioreranno i tempi di caricamento e ridurranno altri problemi come il conteggio doppio del traffico dei referral da Facebook.

L'URL del canale personalizzato è un parametro facoltativo nella funzione FB.init denominata channelUrl. Quando si inizializza la libreria JavaScript, aggiungere il parametro channelUrl nella funzione 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> 

punti Il channelUrl a un file che si aggiunge alla vostra directory locale, che aiuta a migliorare la velocità di comunicazione in alcuni browser meno recenti. Senza channelUrl, siamo costretti a utilizzare soluzioni alternative come il caricamento di una seconda copia della pagina Web in un iframe nascosto per caricare correttamente i plug-in sociali. Le soluzioni alternative aumentano i tempi di caricamento e aumentano il traffico di riferimento da Facebook.

Per creare un file channel.html, aggiungere la seguente riga al file (che si trova a http://www.yourdomain.com/channel.html):

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

Se avete la possibilità di eseguire PHP, vi consigliamo vivamente di impostare una lunga cache per la file channelUrl per garantire prestazioni ottimali. Ecco uno script PHP di esempio che compie questo:

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

In questo caso, si dovrebbe anche impostare il file channelUrl per l'URL completo, come http://www.yourdomain.com/channel.php.

Nei nostri test, l'aggiunta di un canale personalizzatoUrl migliora le prestazioni in Internet Explorer e pertanto la sua inclusione è consigliata per tutti i nostri sviluppatori. Internet Explorer produce guadagni prestazionali statisticamente significativi includendo il parametro, in cui il tempo di caricamento di un sito Web di test con 5 plugin XFBML migliora da 1,10 secondi a 0,43 secondi.

Il caricamento asincrono è un'altra semplice tattica che consente di caricare rapidamente la pagina senza bloccare il caricamento di altri elementi della pagina. Al caricamento corretto di JS SDK, chiamiamo la funzione window.fbAsyncInit. Tutte le funzioni front-end che dipendono dalle chiamate dell'API di Facebook dovrebbero essere separate e chiamate tramite window.fbAsyncInit. Ciò garantisce che le funzionalità di Facebook vengano caricate in modo non bloccante e accelereranno il rendering, con vantaggi SEO positivi. Quando progetti le tue caratteristiche sociali, dovresti avvicinarti a questa mentalità per iniziare.

Ad esempio:

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

Abbiamo aggiornato la nostra documentazione per riflettere l'importanza di queste opzioni e cambiato il codice di esempio predefinito per includere un channelUrl. Stiamo continuando ad aggiornare i nostri documenti come parte di Operation Developer Love, nonché a condividere altre best practice tramite i post dei blog "How-To".