Facebook like 버튼을 동적으로 로드된 컨텐츠와 통합합니다.

Facebook like 버튼을 동적으로 로드된 컨텐츠와 통합합니다.

제가 작업하고 있는 웹사이트는 AJAX를 통해 동적으로 로딩되는 아이템들의 목록으로 구성되어 있습니다.페이지를 아래로 스크롤하면 더 많은 항목이 로드됩니다.

이제 제 고객은 각 항목에 Facebook like 버튼(그리고 이 버튼을 좋아한 사람의 수)을 추가하려고 합니다.

기본 좋아요 버튼을 통합하는 것은 문제가 없지만, AJAX를 통해 로딩된 아이템에 좋아요 버튼을 추가하는 방법은 무엇입니까?새로운 아이템이 로드되면 페이스북 API는 DOM 트리에 새로운 좋아요 버튼이 있다는 것을 어떻게 알 수 있으며, 이 버튼을 몇 명이 좋아했는지의 카운트를 가져올 필요가 있습니까?

이것을 해본 경험이 있는 사람이 있습니까?이용 가능한 예가 있습니까?내 검색에는 표준 좋아요 버튼을 통합하는 것 외에는 유용한 것이 나타나지 않았습니다.

답변이 늦었지만 새로운 요소를 로드하는 함수의 콜백에서 Facebook API의 구문 분석 기능을 사용하여 새로운 좋아요 버튼을 렌더링할 수 있습니다.

FB.XFBML.parse();

구문 분석기를 렌더링할 요소로 지정할 수도 있으므로 이미 존재하는 like 버튼을 다시 렌더링하지 않습니다.

FB.XFBML.parse(document.getElementById('foo'));

문서: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/ 에서 직접 확인할 수 있습니다.

답이 늦었지만 누군가가 필요할 경우를 대비해요.

방금 제 프로젝트를 설명한 것과 거의 비슷하게 마쳤습니다.제 페이지는 json 형식으로 ajax를 통해 게시물을 받고, 저는 페이스북 좋아요 버튼, 트윗 버튼, 구글 플러스 원 버튼을 포함한 돔 요소를 만듭니다.제대로 이해하기까지 많은 문제를 겪었습니다.가장 큰 문제는 버튼이 계속해서 기대했던 것처럼 작동하지 않았다는 것입니다.그 후에 나는 실용적인 해결책을 찾았습니다.

facebook js sdk를 사용하고 있습니다.(여기서 유용한 정보를 확인하실 수 있습니다.

<div id="fb-root"></div>
<script>
  var isFBLoaded = false;
  window.fbAsyncInit = function() {
    FB.init({
        appId: ' your api key', 
        status: true, 
        cookie: true, 
        xfbml: false
    });
    isFBLoaded = true;
    ...
    renderFBqueue(); // i ll explain this later
  };
  (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>

아약스 콘텐츠와 FB에 문제가 있는 것 같습니다.XFBML.parse() 메소드 같은 거.fb developers 포럼에서 해결책을 찾았고, 제 요구에 맞게 수정했습니다.그래서 ajax call에서 json content (여러 게시물)을 받은 후 fb like 버튼을 제외한 모든 요소를 jquery로 만듭니다.post url(및 다른 관련 데이터)을 대기열에 넣고 시간 초과 기능을 호출하여 해당 버튼을 생성/파싱합니다.

var fb_queue = [];
...
function getMorePosts(){
    $.get('moreposts.php', params, function(response){
        if (response) createPosts(response);
    }, 'json');    
}
...
function createPosts(data){
    ...
    for (var key in data.posts) {
        ...
        fb_queue.push({ id : data.posts[key].id , url : data.posts[key].url });
    }
    ... // elements are created

}

그리고 마지막으로 fb like 버튼을 만들고 파싱합니다.

function parseFBqueue(){
    if(isFBLoaded){
        if (fb_queue.length==0) return false;
        $.each(fb_queue, function (j, data) {
            window.setTimeout(function () { 
                renderFBLike(fb_queue.shift());  
            }, (j + 1) * 300); 
        });  
    };
}
function renderFBLike(data){
    var fblike = '<fb:like href="'+data.url+'" layout="button_count" ... ></fb:like>'
    $('#fbdiv-'+data.id).append(fblike);
    FB.XFBML.parse(document.getElementById('fbdiv-'+data.id'));    
}

누군가가 이것을 유용하게 생각하기를 바랍니다, 저는 일주일 전에 그럴 것이라는 것을 압니다 :)

은 입니다.<iframe>지면에 중인 실행 중인 "페이스북 API"가 없습니다.입니다 내부 입니다.<iframe>를 됩니다하면 됩니다.srcURL은 브라우저에 의해 로드됩니다.좋아요 버튼의 코드는 다음과 같습니다.

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
        scrolling="no" frameborder="0"
        style="border:none; width:450px; height:80px"></iframe>

으로인 만 <iframe>에 정확한d를 합니다.srcURL, 나머지는 모두 자동으로 처리됩니다.

ajax 완료 후 이 javascript 함수 호출 ;)

fb_sharepro_render()

언급URL : https://stackoverflow.com/questions/5441134/integrate-facebook-like-button-with-dynamically-loaded-content