Search

FacebookページのウォールのRSSフィードを取得して可変グリッドでHTML出力
Google Ajax Feed API使用

2011/5/22

http://www.facebook.com/feeds/page.php?id=FacebookページID&format=rss20

FacebookページのウォールのRSS(XMLファイル)を取得して、最近投稿された内容を可変グリットでHTML出力するサンプルです。

JavaScriptでは外部ドメインにあるXMLファイルを取得できないので、それを解消するためにここではGoogle Ajax Feed APIを使用し、ウォールRSSフィードを取得しました。

可変グリット表示には、jQueryプラグイン「jquery.vgrid.js」(MIT License)を使用しています。ブロック要素を雑誌・新聞風のレイアウトに配置するためのプラグインで、ウィンドウサイズを変えると、要素が自動的にウィンドウサイズに合わせて並び変わります。

設置サンプル

例)http://www.facebook.com/feeds/page.php?id=153659178017982&format=rss20

設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.vgrid.0.1.6.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
        <!-- JS -->
        <script type="text/javascript">
            function formatString(str){
                str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
                return str;
            }
            function relativeTime(pastTime){
                var origStamp = Date.parse(pastTime);
                var curDate = new Date();
                var currentStamp = curDate.getTime();
                var difference = parseInt((currentStamp - origStamp)/1000);
                if(difference < 0) return false;
                if(difference <= 5)                return "いまさっき";
                if(difference <= 20)            return "数秒前";
                if(difference <= 60)            return "1分以内";
                if(difference < 3600)            return parseInt(difference/60)+" 分前";
                if(difference <= 1.5*3600)         return "約1時間前";
                if(difference < 23.5*3600)        return Math.round(difference/3600)+" 時間前";
                if(difference < 1.5*24*3600)    return "1日前";
                var dateArr = pastTime.split(' ');
                return (parseInt(difference / 86400)).toString() + '日前';
            }
            $(function(){
            });
        </script>
        <style type="text/css">
#grid-content {
    list-style-type: none;
    margin:0; padding:0;
    overflow:hidden;
}
#grid-content li {
    list-style-type: none;
    width:200px;
    border:1px dotted #ccc;
    outline:1px solid #ccc;
    background:#fff;
    margin:5px;
    padding:5px;
    word-break:break-all;
    box-sizing:content-box;
}
#grid-content li a {
    color:#ff6699;
}
#grid-content li div {
    margin:0 0 5px 0; padding:0 0 5px 0;
    overflow:hidden;
    border-bottom:1px dotted #ccc;
}
#grid-content li span {
    font-size:80%;
    color:#666;
}
#grid-content li span a {
    color:pink;
}
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>例:Google APIでFacebookページのウォールのRSSを取得してHTML出力するサンプルです。<br>可変グリット表示は、<a href="http://blog.xlune.com/2009/09/jqueryvgrid.html">jquery.vgrid.js</a>を使用しています。ウィンドウサイズを変えると要素が自動的に並びます。</p>
<!-- CODE -->
<h2 id="title"></h2>
<ul id="grid-content"></ul>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"></script>
<script type="text/javascript">
    google.load("feeds", "1");
    function initialize(){
        init("http://www.facebook.com/feeds/page.php?id=153659178017982&format=rss20","grid-content","20"); // CNET Japan
    }
    function init(feedurl,obj,feedmax) {
        var feed = new google.feeds.Feed(feedurl);
        feed.setNumEntries(feedmax);
        feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
        feed.load(function(result) {
            var container = document.getElementById(obj);
            var mypage=result.xmlDocument.getElementsByTagName("link")[0].firstChild.nodeValue;
            $("#title").html("<a href='"+mypage+"pjroom/'>"+result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue+"</a>");
            if (!result.error) {
                var items = result.xmlDocument.getElementsByTagName("item");
                var s="";
                for (var i = 0; i < items.length; i++) {
                    var title="";
                    var link="";
                    var pubDate="";
                    var desc="";
                    var author="";
                    //タイトル
                    if(items[i].getElementsByTagName("title")[0].firstChild) {
                        title=items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
                    }
                    //パーマリンク
                    if(items[i].getElementsByTagName("link")[0].firstChild) {
                        link=mypage+items[i].getElementsByTagName("link")[0].firstChild.nodeValue;
                    }
                    //投稿日時
                    if(items[i].getElementsByTagName("pubDate")[0].firstChild) {
                        pubDate=items[i].getElementsByTagName("pubDate")[0].firstChild.nodeValue;
                    }
                    //投稿内容
                    if(items[i].getElementsByTagName("description")[0].firstChild) {
                        desc=items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
                    }
                    //投稿者
                    if(items[i].getElementsByTagName("author")[0].firstChild) {
                        author=items[i].getElementsByTagName("author")[0].firstChild.nodeValue;
                    }
                    if(title!=""){
                        s+="<li>";
                        s+="<div>"+desc+"</div>";
                        s+="<span><a href='"+link+"'>"+relativeTime(pubDate)+"</a></span> | ";
                        s+="<span>"+author+"</span>";
                        s+="</li>";
                    }
                }
                $("#grid-content").html(s).vgrid({
                    easeing: "easeOutQuint",
                    useLoadImageEvent: true,
                    time: 400,
                    delay: 20,
                    fadeIn: {
                        time: 500,
                        delay: 50
                    }
                });
            }
        });
    }
    $(function(){
        google.setOnLoadCallback(initialize);
    });
</script>
<!-- / CODE -->
        </div>
    </body>
</html>

Facebookページの基本情報をJSON形式で取得してHTML出力
Facebook Graph API使用(認証なしのもの)

2011/5/22

Graph APIを使用して、Facebookページの基本情報をJSON形式で取得して、HTML出力するサンプルです。 アイコン画像には、CSS3d.net - CSS3 Ribbon Generatorで作成したCSS3リボンを乗せてみました。

Facebookのソーシャルグラフ内の人、ページ、写真、動画、イベントなどのオブジェクトはユニークなIDを持っているため、いずれも下記の形式で情報を取得可能です。

https://graph.facebook.com/FacebookページID

取得サンプル(JSON)

Facebookページはカテゴリによって登録する情報は異なりますが、「慈善活動またはコミュニティ」から作成した場合は、指定したFacebookページの名前、ユーザー名(pjroom)、ウェブサイトのURL、アイコン画像、所属カテゴリ、いいね!数、説明文などが取得できます。

参照:Core Concepts › Graph API › Page

https://graph.facebook.com/153659178017982
{
   "id": "153659178017982",
   "name": "PHP & JavaScript Room",
   "picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/162000_153659178017982_2823224_s.jpg",
   "link": "https://www.facebook.com/pjroom",
   "category": "Personal website",
   "likes": 250,
   "website": "http://phpjavascriptroom.com/",
   "username": "pjroom",
   "description": "PHP\u3001JavaScript\u3001Ajax\u3001HTML/XHTML\u3001CSS\u3001Web\u30da\u30fc\u30b8\u57cb\u3081\u8fbc\u307f\u306b\u3088\u308b\u97f3\u58f0\u30fb\u52d5\u753b\u306e\u30b9\u30c8\u30ea\u30fc\u30e0\u914d\u4fe1\u65b9\u6cd5\u306a\u3069\u3001Web\u30b5\u30a4\u30c8\u5236\u4f5c\u306b\u5f79\u7acb\u3064\u5b9f\u7528\u7684\u306a\u30d7\u30ed\u30b0\u30e9\u30df\u30f3\u30b0\u30fb\u30c6\u30af\u30cb\u30c3\u30af\u3092\u89e3\u8aac\u3057\u3066\u3044\u307e\u3059\u3002\n\n\u2605\u65b0\u7740\u60c5\u5831\u306f\u300cNews\u300d\u30bf\u30d6\u304b\u3089\u3069\u3046\u305e\u266a\n\n\u26052011/1/27\u3088\u308a\u3001\u300cPHP&JavaScript Room\u300d\u306eURL\u304c\u3001\u65b0URL\u300chttp://phpjavascriptroom.com/\u300d\u306b\u79fb\u8ee2\u3057\u307e\u3057\u305f\u3002\n\n\u65e7\u30b5\u30a4\u30c8\u304b\u3089\u306f\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3067\u5f53\u30b5\u30a4\u30c8\u306e\u8a72\u5f53\u30da\u30fc\u30b8\u306b\u98db\u3076\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u3082\u3057\u304b\u3059\u308b\u3068\u30ea\u30f3\u30af\u5207\u308c\u306b\u306a\u3063\u3066\u3044\u308b\u30da\u30fc\u30b8\u304c\u3042\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002 \u30d6\u30c3\u30af\u30de\u30fc\u30af\u3055\u308c\u3066\u3044\u308b\u65b9\u306f\u304a\u624b\u6570\u3067\u3059\u304c\u65b0URL\u306b\u5909\u66f4\u304f\u3060\u3055\u3044\u3002\n\n\u3053\u308c\u304b\u3089\u3082\u3088\u308d\u3057\u304f\u304a\u9858\u3044\u81f4\u3057\u307e\u3059\u3002"
}

設置サンプル

設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
        <!-- JS -->
        <script type="text/javascript">
            $(function(){
                var url="https://graph.facebook.com/153659178017982&callback={callback}";
                $.getJSONP(url, function(json){
                    var s="";
                    //s+=json.id;
                    //s+=json.username;
                    s+="<dl>";
                    //リンク、画像
                    s+="<dt><img src='"+json.picture+"' />";
                    s+="<div class='ribbon-wrapper'>";
                    s+="<div class='ribbon-front'>facebook page</div>";
                    s+="<div class='ribbon-edge-topleft'></div>";
                    s+="<div class='ribbon-edge-topright'></div>";
                    s+="<div class='ribbon-edge-bottomleft'></div>";
                    s+="<div class='ribbon-edge-bottomright'></div>";
                    s+="<div class='ribbon-back-left'></div>";
                    s+="<div class='ribbon-back-right'></div>";
                    s+="</div></dt>";
                    s+="<dd>";
                    //ページ名
                    s+="<div class='title'><a href='"+json.link+"'>"+json.name+"</a></div>";
                    //ウェブサイト、カテゴリ
                    s+="<p>WEBSITE: <a href='"+json.website+"'>"+json.website+"</a><br>CATEGORY: "+json.category+"</p>";
                    //いいね!数
                    s+="<p><strong>"+json.likes+"</strong>人が「いいね!」と言っています。</p>";
                    //説明文
                    s+="</dd></dl>";
                    s+="<div class='desc'>"+formatString(json.description)+"</div>";
                    $("#graph").append(s);
                });
            });
            // リンク内につぶやきを含むURLに変更
            function formatString(str){
                str = str.replace(/((ftp|http|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
                return str;
            }
        </script>
        <style type="text/css">
            #graph {
                position:reltaive;
                margin:0; padding:0;
                border:1px solid #ccc;
                width:500px;
            }
            #graph dl {
                margin:2px 2px 0 2px; padding:10px 10px 0 10px;
                border:1px dotted #ccc;
                border-bottom:none;
                overflow:hidden;
                position:reltaive;
            }
            #graph dt {
                margin:0; padding:0;
                width:120px; height:120px;
                float:left;
                clear:both;
                position:absolute;
            }
            #graph dd {
                margin:0 0 0 120px; padding:0;
            }
            #graph dd strong {
                font-weight:bold;
                font-size:140%;
            }
            #graph div.title {
                font-weight:bold;
                font-size:120%;
            }
            #graph div.desc {
                margin:0 2px 2px 2px; padding:15px;
                border:1px dotted #ccc;
                background:#eee;
                border-top:0;
            }
            #graph .info {
                position:absolute;
                background:#3B5998;
                display:block;
                z-index:9999;
                color:#fff;
                font-weight:bold;
            }
            /* ribbon style */
            .ribbon-wrapper {
                position:absolute;
                width:110px; height:20px;
                top:50px; left:0px;
            }
            .ribbon-front {
                background-color:#3B5998;
                width:110px; height:20px;
                position:relative;
                left:-5px; top:0px;
                z-index:2;
                color:#fff;
                text-align:center;
                line-height:20px;
                font-size:10px;
            }
            .ribbon-front,
            .ribbon-back-left,
            .ribbon-back-right {
                -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
                -khtml-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
                -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
                -o-box-shadow:0px 0px 4px rgba(0,0,0,0.55);
            }
            .ribbon-edge-topleft,
            .ribbon-edge-topright,
            .ribbon-edge-bottomleft,
            .ribbon-edge-bottomright {
                position:absolute;
                z-index:1;
                border-style:solid;
                width:0; height:0;
            }
            .ribbon-edge-topleft,
            .ribbon-edge-topright {
            }
            .ribbon-edge-topleft,
            .ribbon-edge-bottomleft {
                left:-5px;
                border-color:transparent #5e7bb6 transparent transparent;
            }
            .ribbon-edge-topleft {
                top:-5px;
                border-width:5px 5px 0 0;
            }
            .ribbon-edge-bottomleft {
                border-width:0 5px 0px 0;
            }
            .ribbon-edge-topright,
            .ribbon-edge-bottomright {
                left:100px;
                border-color:transparent transparent transparent #5e7bb6;
            }
            .ribbon-edge-topright {
                top:-5px;
                border-width:5px 0 0 5px;
            }
            .ribbon-edge-bottomright {
                border-width:0 0 0px 5px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>例)Facebookページの基本情報をJSON形式で取得して、HTML出力。</p>
            <p>アイコン画像についているCSS3リボンは、<a href="http://www.css3d.net/ribbon-generator/">CSS3d.net - CSS3 Ribbon Generator</a>で作成したものを当てはめました。</p>
<!-- CODE -->
            <div id="graph"></div>
<!-- / CODE -->
        </div>
    </body>
</html>

Facebookに投稿した写真情報をJSON形式で取得してHTML出力
Facebook Graph API使用(認証なしのもの)

2011/5/22

Graph APIを使用して、Facebookに投稿した特定の写真情報をJSON形式で取得して、HTML出力するサンプルです。

Facebookのソーシャルグラフ内の人、ページ、写真、動画、イベントなどのオブジェクトはユニークなIDを持っているため、いずれも下記の形式で情報を取得可能です。

https://graph.facebook.com/写真ID

※写真IDは、写真ページにアクセスした時に、URLの末尾についている「fbid」パラメータの値になります。

取得サンプル(JSON)

指定した写真のタイトル、パーマリンク、サムネイル、作成日、最終更新日、画像サイズ毎のURLなどが取得できます。

参照:Core Concepts › Graph API › Photo

https://graph.facebook.com/154272851289948
{
   "id": "154272851289948",
   "from": {
      "name": "PHP & JavaScript Room",
      "category": "Personal website",
      "id": "153659178017982"
   },
   "name": "\u30d8\u30c3\u30c0\u3092\u3046\u3055\u304e\u30e2\u30fc\u30c9\u306b\u3057\u307e\u3057\u305f\u30fc\u266a",
   "picture": "http://photos-b.ak.fbcdn.net/hphotos-ak-snc4/36255_154272851289948_153659178017982_326886_2811909_s.jpg",
   "source": "http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc4/36255_154272851289948_153659178017982_326886_2811909_n.jpg",
   "height": 432,
   "width": 720,
   "images": [
      {
         "height": 589,
         "width": 981,
         "source": "http://hphotos-snc4.fbcdn.net/132859_154272851289948_153659178017982_326886_2811909_o.jpg"
      },
      {
         "height": 432,
         "width": 720,
         "source": "http://a2.sphotos.ak.fbcdn.net/hphotos-ak-snc4/36255_154272851289948_153659178017982_326886_2811909_n.jpg"
      },
      {
         "height": 108,
         "width": 180,
         "source": "http://photos-b.ak.fbcdn.net/hphotos-ak-snc4/36255_154272851289948_153659178017982_326886_2811909_a.jpg"
      },
      {
         "height": 78,
         "width": 130,
         "source": "http://photos-b.ak.fbcdn.net/hphotos-ak-snc4/36255_154272851289948_153659178017982_326886_2811909_s.jpg"
      },
      {
         "height": 45,
         "width": 75,
         "source": "http://photos-b.ak.fbcdn.net/hphotos-ak-snc4/36255_154272851289948_153659178017982_326886_2811909_t.jpg"
      }
   ],
   "link": "http://www.facebook.com/photo.php?pid=326886&id=153659178017982",
   "icon": "http://static.ak.fbcdn.net/rsrc.php/v1/yz/r/StEh3RhPvjk.gif",
   "created_time": "2011-01-02T06:47:30+0000",
   "position": 1,
   "updated_time": "2011-01-02T06:47:31+0000"
}

設置サンプル

設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script type="text/javascript" src="/content/lib/jquery/jquery.jsonp.js"></script>
        <!-- JS -->
        <script type="text/javascript">
            $(function(){
                var url="https://graph.facebook.com/154272851289948&callback={callback}";
                $.getJSONP(url, function(json){
                    var s="";
                    //タイトル、パーマリンク
                    s+="<div class='title'><a href='"+json.link+"'>"+json.name+"</a><span> by "+json.from.name+"</span></div>";
                    s+="<div class='cf'>";
                    //サムネイル
                    s+="<img src='"+json.picture+"' class='thumb' />";
                    //作成日、最終更新日
                    s+="作成日: "+relativeTime(json.created_time)+"<br>";
                    s+="最終更新日: "+relativeTime(json.updated_time)+"<br>";
                    s+="</p><p>";
                    //画像サイズ展開
                    s+="画像サイズ: ";
                    for(var i=0; i<json.images.length; i++){
                        s+="<a href='"+json.images[i].source+"' target='_blank'>"+json.images[i].width+"×"+json.images[i].height+"</a> ";
                    }
                    s+="</p></div>";
                    $("#graph").append(s);
                });
            });
            function relativeTime(pastTime){
                var dd = new Date(pastTime);
                var yy = dd.getYear();
                var mm = dd.getMonth() + 1;
                var dd = dd.getDate();
                if (yy < 2000) { yy += 1900; }
                if (mm < 10) { mm = "0" + mm; }
                if (dd < 10) { dd = "0" + dd; }
                return yy + "/" + mm + "/" + dd;
            }
        </script>
        <style type="text/css">
            #graph {
                position:reltaive;
                margin:0; padding:10px;
                border:1px dotted #ccc;
                outline:1px solid #ccc;
                width:560px;
            }
            #graph .thumb {
                float:left;
                display:block;
                border:1px solid #ccc;
                margin:0 10px 0 0; padding:0;
            }
            #graph img {
                max-width:100%;
            }
            #graph p {
                margin:10px 0; padding:0;
            }
            #graph div.title {
                font-weight:bold;
                font-size:120%;
                margin:0 0 10px 0; padding:0;
            }
            #graph div.title span {
                font-size:80%;
                font-weight:normal;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル</h1>
            <p>例)Facebookに投稿した写真情報をJSON形式で取得して、HTML出力。</p>
<!-- CODE -->
            <div id="graph"></div>
<!-- / CODE -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women