1. 홈
  2. 질의 응답
  3. 실제로 ChannelUrl은 언제 사용됩니까?

실제로 ChannelUrl은 언제 사용됩니까?

2012-01-23 2 views
10

FB.init에 전달 된 ChannelUrl 매개 변수가 fb js sdk에서 실제로 사용되는 경우를 아는 사람이 있습니까? 우리의 nginx 로그 파일에 충돌하는 것을 볼 수 있고 그것은 IE8 사용자 들인 것처럼 보이지만 수동으로 재현하는 것 같지 않습니다. 팬 페이지 iframe 앱과 같은 버튼과 댓글 플러그인이 있습니다.실제로 ChannelUrl은 언제 사용됩니까?

출처

2012-01-23 Jackson

+0

내 페이지가로드되는 동안 네트워크 트래픽을 검사 할 때 FF와 Chrome에서도로드되는 것을 확인할 수 있습니다. ** **로드 될 때, 나는 모른다. – DMCS

답변

19

이 게시물을 볼 수 있습니다. 그것은 잘 설명되어 있습니다.

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

이 게시물에 링크는 향후 업데이트 할 수 있습니다. FB 개발자 블로그의 전체 게시물을 복사하여 저자에게 전체 크레디트를 제공합니다.

는 방법 현재 위치 : Ankur Pansari에 의해 사회 플러그인 성능 최적화 - 웹 사이트의 오전 12시

수백만에 2011년 8월 3일 소셜 플러그인을 렌더링 XFBML을 사용합니다. 웹 사이트에서 이들의 실적을 향상시킬 수있는 모범 사례를 공유하고자했습니다. 특히, 우리는 사용자 정의 channelUrl과 비동기로드를 제공합니다.이로드를 사용하면로드 시간이 향상되고 Facebook에서 추천 트래픽의 이중 계산과 같은 다른 문제가 줄어 듭니다.

맞춤 채널 URL은 channel.rl이라는 FB.init 함수의 선택적 매개 변수입니다. 당신이 자바 스크립트 라이브러리를 초기화하면 FB.init 기능에 channelUrl 매개 변수를 추가 :

<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에 있음) 파일에 다음 행을 추가하려면 : 당신이 PHP를 실행할 수있는 능력이있는 경우 

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

, 우리는 강하게에 대한 긴 캐시를 설정 조언 channelUrl 파일을 사용하여 최적의 성능을 보장합니다. 다음은이를 수행하는 샘플 PHP 스크립트입니다 :

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

이 경우, 당신은 또한 http://www.yourdomain.com/channel.php으로 정규화 된 URL에 channelUrl 파일을 설정해야합니다.

우리의 테스트에서 사용자 정의 channelUrl을 추가하면 Internet Explorer의 성능이 향상되므로 모든 개발자가이를 포함하도록 권장합니다. Internet Explorer는 5 개의 XFBML 플러그인이있는 테스트 웹 사이트의로드 시간이 1.10 초에서 0.43 초로 향상되는 매개 변수를 포함하면 통계적으로 중요한 성능 향상을 가져옵니다.

비동기 로딩은 페이지의 다른 요소 로딩을 차단하지 않고도 페이지를 빠르게로드 할 수있는 간단한 방법입니다. JS SDK를 성공적으로로드하면 window.fbAsyncInit 함수가 호출됩니다. Facebook API 호출에 의존하는 모든 프런트 엔드 함수는 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"블로그 게시물을 통해 모범 사례를 공유합니다.

출처

2012-01-24 14:12:04

+0

링크를 이용해 주셔서 감사합니다. 그것은 문제를 해결했습니다 :) –

+2

링크가 시간이 지남에 따라 죽을지도 모르기 때문에 조금 더 배경을 제공하는 것이 가장 좋을 것입니다. –

+2

음 ... 나는 조금 게으르다! :) .... 귀하의 제안에 감사드립니다. 다음 번엔이 문제를 기억할 것입니다. –

관련 문제

 관련 문제