2010-12-27 6 views
2

나는 facebook 팬 페이지에 버튼과 같은 것을 추가하는 방법을 알아 내려고 노력해 왔습니다. 이 일을하는 방법이 있다는 것을 압니다. 예를 들어이 페이지는 버튼과 같은 종류의 버튼을 구현했습니다. http://www.facebook.com/JimBeam?v=app_100742133310820facebook 팬 페이지 탭에 facebook을 삽입하는 것

이 두 페이지 모두 애플리케이션을 사용하며 일반적으로 사용하는 정적 FBML 페이지가 아닙니다. 그래서 나는 아름답게 작동하는 응용 프로그램을 만들었습니다.

이 응용 프로그램에서와 같은 버튼이 작동합니다. 그러나 페이스 북 페이지의 탭에 추가하려고하면 "iframe"태그를 렌더링하는 동안 HTML 오류가 발생합니다. 맛이 금지 된 iframe TabFBM "iframe은 렌더링이 허용되지 않습니다. 그러나 분명히이 문제를 둘러싼 방법들이 있습니다. 다른 페이지에서 어떻게했는지에 대한 단서가 있습니까?

저는 정말로 대답에 감사 드리며, 누군가 짐 빔의 페이지에서 같은 버튼을 어떻게 재구성했는지 알아낼 수 있는지 궁금합니다.

+0

하나의 링크 만 추가 할 수 있으므로 두 개의 다른 링크가 있습니다. 이것은 탭에서 좋아하는 것을 구현 한 또 다른 페이지입니다 : http://www.facebook.com/FanpageHelpCenter?v=app_23744633048 이것은 내가 만든 응용 프로그램입니다 : http://apps.facebook.com/pioneerofyear /? fb_page_id = 475652665494 – Jonathan

답변

2

Facebook 페이지 탭은 FBML입니다. 그리고이 페이지에는 like 버튼 (fb : like 또는 다른 것)을 직접 추가 할 수 없습니다. 그러나 이것을 수행하는 "트릭"이 있으며 다음을 구현하는 페이지가 있습니다.

버튼을 얻는 유일한 방법은 iframe에로드하는 것입니다. 그러나 iframe은 페이지의 FBML에서도 금지되어 있습니다. 따라서 트릭은 fb : like 버튼이있는 iframe이 포함 된 AJAX (fbjs 호출)가있는 html 페이지를로드하는 것입니다. 페이스 북이 자바 스크립트 자동 포화를 금지하기 때문에 html의 iframe을로드하기 위해 ajax 호출을하기 전에 클릭 할 수있는 것과 같은 그림이 필요합니다. 이것은 주로 엉덩이에 통증이 있습니다.

그래서 여기에 개념 증명 코드가 있습니다.

첫 번째 파일 : index.html을 :

<script type="text/javascript"> 
<!-- function launch_code() { 
    var ajax = new Ajax(); 
    ajax.responseType = Ajax.FBML; 
    ajax.requireLogin = false; 

    ajax.ondone = function(data) { 
     document.getElementById('content').setInnerFBML(data); 
    } 

    document.getElementById('content').setTextValue('Loading, please wait.'); 

    ajax.post('http://example.com/greatpageapp/iframe.html'); 
    return false; } 

//--> </script> 

<div id='content'> 
    <input type='button' onclick='launch_code(); return false;' value='click on me' /> 
</div> 

그리고 iframe.html 내용 : 지금 작업 테스트

<center> 
<table valign="top" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td valign="top" width="520" height="1500"> 
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fgoogle.com%2F&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> 
    </td> 
    </tr> 
</center> 

. 희망이 도움이됩니다.

+0

질문에 답변 해 주셔서 감사합니다.하지만 불행히도 작동하지 않습니다. iframe.html은 완벽하게 작동하지만 버튼을 클릭 할 때마다 아무 일도 일어나지 않습니다. ajax.post에서 코드를 변경하고 iframe.html에 올바른 코드를 넣었습니다. 그래서 난 정말 작동하지 않는 이해할 수 없다 ... – Jonathan

+0

브라우저에서 자바 스크립트 콘솔을 확인하십시오. 디버깅에 도움이되는 console.log 문을 추가하십시오. 파이어 폭스를 사용한다면 파이어 버그를 설치하십시오. 파이어 폭스를 사용하면 디버깅에도 도움이 될 수 있습니다. 난 그냥 일을 수정하지 않고 C/P 작업 코드 (그냥 URL). – Patrick

관련 문제