반응형
AJAX 기반 페이지에 Facebook "좋아요"버튼을 추가하는 방법
나는 그물과 스택 오버플로를 트롤링했지만이 질문에 대한 적절한 답을 찾지 못했습니다. 자체 솔루션을 찾는 시행 착오 프로세스를 시작하기 전에 Stack Overflow braintrust로 전환하여 이미 성공적인 구현이 있는지 확인하려고 생각했습니다.
비 자바 스크립트 브라우저 및 SEO에 대해 제대로 저하되는 AJAX 기반 페이지가 있습니다. AJAX 버전의 각 클릭은 고유 한 URL로 표시 될 수 있습니다.
내가하고 싶은 것은 버튼의 HREF를 동적으로 변경하는 것입니다. 이 태그가 런타임에 표준 HTML로 변환된다는 것을 이해합니다 (즉, 불쾌한 테이블 / iframe 레이아웃).
이 FB와 같은 버튼을 AJAX 기반 페이지에 구현하는 방법에 대한 통찰력이있는 사람이 있는지 궁금합니다.
미리 건배 :)
편집하다:
내가 함께 해킹 한이 방법에 대해 어떻게 생각하세요? 큰 문제가 보이십니까?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("a#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("div#Container").empty().append(elem);
FB.XFBML.parse($("div#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
간단한 솔루션
로드가 완료되면 구문 분석이 구문 분석 기능을 트리거합니다.
jQuery를 사용하는 경우이 문제에 대한 정말 쉽고 매끄러운 솔루션이 있습니다.
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
http://developers.facebook.com/docs/reference/plugins/like/
이것이 내가 끝낸 해결책입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery/jquery.js" type="text/javascript"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script language="javascript" type="text/javascript">
$("document").ready
(
function ()
{
CreateNewLikeButton("http://www.yahoo.com")
$("#ChangeToGoogle").click
(
function (e)
{
e.preventDefault();
CreateNewLikeButton("http://www.google.ca")
}
);
}
);
function CreateNewLikeButton(url)
{
var elem = $(document.createElement("fb:like"));
elem.attr("href", url);
$("#Container").empty().append(elem);
FB.XFBML.parse($("#Container").get(0));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
</div>
</form>
</body>
</html>
당신은 이것을 어렵게 만들고 있습니다-새로운 iframe 기반을 렌더링하십시오.
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function()
{
$( '#ChangeToGoogle' ).click( function( event )
{
event.preventDefault();
$( '#Container' ).empty().append( $('<iframe />')
.attr( 'src', 'http://www.facebook.com/plugins/like.php?href=www.google.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80' )
.attr( 'scrolling', 'no' )
.attr( 'frameborder', 'no' )
.attr( 'style', 'border:none; overflow:hidden; width:450px; height:80px;' )
.attr( 'allowTransparency', 'true' )
);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<a id="ChangeToGoogle" href="#">Change To Google</a>
<div id="Container">
<iframe src="http://www.facebook.com/plugins/like.php?href=www.yahoo.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:450px; height:80px;"
allowTransparency="true">
</iframe>
</div>
</form>
</body>
이것이 내가이 상황을 만났을 때 처리 한 방법입니다. 잘 작동하는 것 같습니다.
// Set Facebook Like Button with jQuery
setFBLikeButtons = function (container,url,send,layout,width,show_faces,font) {
// Set Default Args
if(!send) { send = "false"; }
if(!layout) { layout = "button_count"; }
if(!width) { width = "100"; }
if(!show_faces) { show_faces = "false"; }
if(!font) { font = "arial"; }
$(container).empty(); // Remove current like button
$(container).html('<fb:like href="'+url+'" send="'+send+'"
layout="'+layout+'" width="'+width+'" show_faces="'+show_faces+'"
font="'+font+'"></fb:like>');
FB.XFBML.parse(); // This is the magical syrup
}
버튼처럼 만들기
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("span");
for(var i=0; i<divs.length i++){
if(divs[i].className == "likes"){
if(divs[i].title){ var Href = divs[i].title; }else{ var Href = window.location; }
var fb_like = document.createElement("fb:like");
fb_like.setAttribute("href", Href);
fb_like.setAttribute("layout", "box_count");
fb_like.setAttribute("show_faces", "false");
fb_like.setAttribute("width", "55");
document.getElementById("likes2").appendChild(fb_like);
}
}
}
</script>
</head>
<body>
<span class="likes" title="www.bzzs.me"></span>
</body>
창이로드 된 후로드하면 다음과 같이 작동합니다.
$(window).load(function(){
$.getScript('http://connect.facebook.net/en_US/all.js', function() {
try{
FB.XFBML.parse();
} catch(ex) {}
});
});
당신이 사용하는 경우 jQuery를 모바일 프레임 워크를 당신은에서 허용 대답과 같은 코드를 실행할 수 pagecontainershow는 새 페이지를 표시 할 때 jQuery를 모바일에서 사용하는 이벤트를.
// initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
try
{
FB.XFBML.parse();
} catch (ex) { }
});
참고URL : https://stackoverflow.com/questions/4219729/how-to-add-a-facebook-like-button-to-an-ajax-driven-page
반응형
'program story' 카테고리의 다른 글
| Angular CLI 6 : angular.json에서 Sass 컴파일을 어떻게 추가합니까? (0) | 2020.11.10 |
|---|---|
| jQuery 객체에서 기본 요소 가져 오기 (0) | 2020.11.10 |
| HTML iframe-스크롤 비활성화 (0) | 2020.11.10 |
| 신속한 언어에서 null / nil (0) | 2020.11.10 |
| .NET 5 RC1을 제거 할 수 없습니다. (0) | 2020.11.10 |