javascript - Cómo agregar un botón "Me gusta" de Facebook a una página controlada por AJAX
jquery (7)
He rastreado la red y Stack Overflow y no he encontrado una respuesta adecuada a esta pregunta. Antes de comenzar el proceso de prueba y error para encontrar mi propia solución, pensé en recurrir al braintrust de Stack Overflow y ver si ya había una implementación exitosa.
Tengo una página activada por AJAX que se degrada correctamente para navegadores que no son javascript y SEO. Cada clic en la versión AJAX se puede representar con una URL única.
Lo que quiero hacer es cambiar dinámicamente el HREF del botón. Entiendo que esta etiqueta se convierta en HTML estándar en tiempo de ejecución (concretamente en un diseño desagradable de tabla / iframe).
Me preguntaba si alguien tenía alguna idea sobre cómo implementar este botón FB like en las páginas con tecnología AJAX.
Saludos de antemano :)
EDITAR:
¿Qué piensas de este método que acabo de hackear juntos? ¿Ves algún gran problema con eso?
<!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>
Así es como manejé esta situación cuando me encontré con ella, parece funcionar bien.
// 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
}
Cargarlo después de que se cargue la ventana, esto es lo que funciona para mí:
$(window).load(function(){
$.getScript(''http://connect.facebook.net/en_US/all.js'', function() {
try{
FB.XFBML.parse();
} catch(ex) {}
});
});
Estás haciendo esto difícil para ti mismo, solo renderiza uno nuevo basado en 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>
Esta es la solución a la que terminé yendo:
<!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>
SOLUCIÓN SIMPLE
Simplemente analice desencadenar la función de análisis cuando la carga se complete.
Si está utilizando jQuery, hay una solución realmente fácil y hábil para este problema:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
Si está utilizando el marco jQuery Mobile puede ejecutar el mismo código que la respuesta aceptada en el evento pagecontainershow que jQuery Mobile usa cuando muestra una página nueva.
// initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
try
{
FB.XFBML.parse();
} catch (ex) { }
});
crear como botón
<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>