[Javascript] Facebookの「好き」ボタンをAJAX駆動ページに追加する方法


Answers

これが私が解決した解決策です:

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

私はネットとスタックオーバーフローを罠に掛け、この質問に対する適切な答えを見つけていない。 私自身の解決策を見つける試行錯誤のプロセスを始める前に、私は braintrustに目を向けると、すでに成功した実装が存在するかどうかを確かめました。

私は非ジャバスクリプトブラウザとSEOのために適切に劣化するAJAXの動力を与えられたページを持っています。 AJAXバージョンの各クリックは、一意のURLで表すことができます。

私がしたいのは、ボタンのHREFを動的に変更することです。 私はこのタグが実行時に(すなわち、厄介なテーブル/ iframeレイアウトに)標準HTMLに変換されることを理解しています。

私は誰もAJAXの動力を与えられたページにこのようなFBのようなボタンを実装する方法についての洞察力を持っていたかどうか疑問に思っていた?

事前に乾杯:)

編集:

私はちょうど一緒にハッキングしたこの方法についてどう思いますか? 何か大きな問題があるのを見てください。

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



ウィンドウがロードされた後にロードしてください。これは私にはうまくいきます:

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



これは私がそれに遭遇したときにこの状況をどのように処理したかで、うまくいくようです。

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



Links