例）Facebookページの基本情報をJSON形式で取得して、HTML出力。
アイコン画像についているCSS3リボンは、CSS3d.net - CSS3 Ribbon Generatorで作成したものを当てはめました。
<!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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<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>