Facebook粉丝页面供稿

时间:2011-02-09 11:44:34

标签: jquery facebook jquery-ui facebook-graph-api

我想要包含一个小部件,用户将在其中添加facebook粉丝页面的网址,并且他可以获取所有Feed或来自特定页面的最新Feed,它将显示在像facebook粉丝盒这样的框中。但它应该。我该怎么做。我只能在一个特定的Facebook页面上做到这一点。它应该动态添加。所以每个用户都可以输入不同的Facebook粉丝页面链接,他应该能够得到它。

非常感谢

<!DOCTYPE HTML>

Facebook Feed

  
<script src="jquery.ui.core.js"></script> 
<script src="jquery.ui.widget.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){
function fbFetch(){
  //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
  var Baseurl = "http://graph.facebook.com/";
    var search= $("fburl").val();

    //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
    $.getJSON(Baseurl + search + "feed?limit=5&callback=?",function(json){
        var html = "<ul>";
            //loop through and within data array's retrieve the message variable.
            $.each(json.data,function(i,fb){
                html += "<li>" + fb.message + "</li>"; 
            });
        html += "</ul>";


        //A little animation once fetched
        $('.facebookfeed').animate({opacity:0}, 500, function(){

                $('.facebookfeed').html(html);

                                                              });

        $('.facebookfeed').animate({opacity:1}, 500);

    });

});

});
</script> 

</head> 

<body> 
<input type="text" value="facebookurl" name="facebook_feeds" id="fburl"/>
<input type="submit" id="submit" />

    <div class="facebookfeed"> 

    </div> 

</body> 
</html>

1 个答案:

答案 0 :(得分:2)

我得到解决方案这个问题我包括下面的源代码

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript">



function fbFetch(){
  //Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var facebookname= document.getElementById("fname").value;

 alert("You are searching for: " + facebookname);

var url = "http://graph.facebook.com/" + facebookname + "/feed?limit=5&callback=?";

    //var url = "http://graph.facebook.com/jeevan.dongre/feed?limit=5&callback=?";



    //alert(url);
    //Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
    $.getJSON(url,function(json){
        var html = "<ul>";
            //loop through and within data array's retrieve the message variable.
            $.each(json.data,function(i,fb){
                html += "<li>" + fb.message + "</li>"; 
            });
        html += "</ul>";


    //  $('.facebookfeed').html(html).slideDown(200);
        //A little animation once fetched
        $('.facebookfeed').animate({opacity:0}, 500, function(){

                $('.facebookfeed').html(html);

                                                              });

        $('.facebookfeed').animate({opacity:1}, 500);

    });



};

//onload="fbFetch()"
</script>



</head>
    <body >
    <center><h1>Friend's Page Feed</h1></center>
        <table border=1 width="600px" align="center">
            <tr>
                <td width="200px";>
                    Enter Facebook name here:
                </td>
                <td width="400px;">
                    <input type=text name="fname" id="fname" >
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type=submit value=enter onclick="fbFetch()">
                </td>
            </tr>
            <tr>
                <td colspan="2">

                        <div class="facebookfeed">
                            <h2>Content will load here...</h2>
                        </div>
                </td>
            </tr>
        </table>
    </body>