如何添加一个Facebook“赞”button到一个AJAX驱动页面
我已经拖网和堆栈溢出，并没有find这个问题的适当答案。 在开始寻找我自己的解决scheme的试错过程之前，我想我会转向堆栈溢出的脑信任，看看是否已经成功实施。
我有一个AJAX驱动的页面，适合非JavaScript浏览器和SEO正常降级。 AJAX版本中的每次点击都可以用唯一的URL表示。
我想要做的是dynamic地改变button的HREF。 我明白，这个标签在运行时转换为标准的HTML（即到一个讨厌的表/ iframe布局）。
我只是想知道，如果有人有任何的洞察力，如何实现这个FB像button到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> 简单的解决scheme
加载完成后，只parsing触发parsing函数。
如果你使用的是jQuery，那么这个问题就有一个简单而又简单的解决scheme：
$(document).ajaxComplete(function(){ try{ FB.XFBML.parse(); }catch(ex){} });
这是我最终解决的解决scheme：
<!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="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 }
创build像button
<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 Mobile框架 ，则可以运行与jQuery Mobile在显示新页面时使用的pagecontainershow事件中接受的答案相同的代码。
// initialize new pages $(document).on("pagecontainershow", (e, ui) => { try { FB.XFBML.parse(); } catch (ex) { } });
