Как добавить кнопку «Мне нравится» на странице, управляемой AJAX.

Я трал сеть и переполнение стека и не нашел адекватного ответа на этот вопрос. Прежде чем приступить к пробному и ошибочному процессу поиска моего собственного решения, я подумал, что я перейду к Braintrust Stack Overflow и посмотрю, была ли уже успешная реализация.Как добавить кнопку «Мне нравится» на странице, управляемой AJAX.

У меня есть страница с питанием от AJAX, которая деградирует должным образом для браузеров, не относящихся к JavaScript, и для SEO. Каждый клик в версии AJAX может быть представлен уникальным URL-адресом.

Что я хочу сделать, это динамически изменять HREF кнопки. Я понимаю, что этот тег преобразуется в стандартный HTML во время выполнения (а именно в неприятный макет таблицы/iframe).

Мне просто интересно, есть ли у кого-нибудь представление о том, как реализовать эту кнопку FB на страницах с AJAX?

Приветствия заранее :)

EDIT:

Что вы думаете об этом методе я просто взломал вместе? Видите огромные проблемы с этим?

<!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>

источник

2010-11-18 nokturnal

Вы говорите, что используете XFBML-версию подобной кнопки? Почему бы просто не использовать iframe? –

Кажется громоздким, чтобы разобрать DOM, чтобы динамически изменять HREF кнопки. Я просто хотел посмотреть, есть ли способ изменить его с помощью XFBML. – nokturnal

Ваше решение помогло мне много, спасибо! –

134

ПРОСТОЕ РЕШЕНИЕ

Просто синтаксический вызвать функцию разбора, когда нагрузка завершена.

Если вы используете JQuery, есть реальное легкое и скользкое решение этой проблемы:

$(document).ajaxComplete(function(){ 
    try{ 
     FB.XFBML.parse(); 
    }catch(ex){} 
});

http://developers.facebook.com/docs/reference/plugins/like/

источник

2011-09-17 22:14:56 Zorox

очень простой^_^ – Populus

Sweet! Должно быть принято решение! –

+1 потому что это просто, мало и отлично работает! –

Вы делаете это тяжело для себя - просто визуализируйте новый, основанный на 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&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;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&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> 
    </div> 
    </form> 
</body>

источник

2010-11-18 22:23:57

Добавление iFrame работает, но кнопка iframe из Facebook довольно глючит. Лучшие варианты - разместить HTML5, за которым следует XFBML. –

Это решение, которое я в конечном итоге происходит с:

<!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>

источник

2011-04-25 18:07:58 nokturnal

Спасибо за это решение. По большей части, он работает хорошо, но, похоже, он вызывает проблемы с утечкой памяти в Firefox (тестируется только в версии 3.6 до сих пор). Делайте это в десятки раз, и вы увидите, что объем памяти Firefox растет, и он не возвращается. Chrome очень хорош. Я также видел утечку памяти с IE8, но не так плохо, как Firefox. –

Вы можете улучшить свои селекторы, избавившись от тега от них. Например, # ChangeToGoogle должен быть просто #ChangeToGoogle, поскольку идентификатор уникален. Нет необходимости сначала искать все теги, то же самое с div. –

@BWRic: Я внедрил эти изменения. – nokturnal

Это, как я справилась с этой ситуацией, когда я столкнулся с ним - кажется, работает хорошо.

// 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 
}

источник

2011-07-23 03:16:50 rycaps

создать кнопку, как

<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>

источник

2011-10-29 06:15:06

нагрузки это после того, как окна нагрузок , это то, что работает для меня:

$(window).load(function(){ 
    $.getScript('http://connect.facebook.net/en_US/all.js', function() { 
      try{ 
       FB.XFBML.parse(); 
      } catch(ex) {} 
     }); 
});

источник

2011-11-29 22:02:40

Если вы используете jQuery Mobile framework, вы можете использовать тот же код, что и принятый ответ, в событии pagecontainershow, которое использует jQuery Mobile при отображении новой страницы.

// initialize new pages 
$(document).on("pagecontainershow", (e, ui) => 
{ 
    try 
    { 
     FB.XFBML.parse(); 
    } catch (ex) { } 
});

источник

2014-05-31 20:42:24

Как добавить кнопку «Мне нравится» на странице, управляемой AJAX.

ответ

Смежные вопросы