Facebook fan page feeds_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-10 00:19 出处：网络

I want to include a widget where the user will add a url of the facebook fan page and he shoudl be able to get all the feeds or the recent feeds from the particular page and it will开发者_JS百科 displayed in a box like facebook fan box. But it should. How do I do that.I was able to do that for only one particular facebook page. It should be added dynamically. so each user can enter a different facebook fan page link and he should be able to get it.

Thanks alot

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

I got the solution this problem I am including the source code below

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