07.Facebook


簡單來說,meta的效果就是再定義FB可辨識的標籤, 當你按分享時, FB便會抓取已定義的標籤內容作為他的分享抬頭圖片連結描述等等

Demo page

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>${name}</title> <!-- for plurk and twitter -->


<!-- facebook like start -->
<meta property="og:title" content="${name}"/> <!-- for facebook -->
<meta property="og:type" content="activity"/>
<meta property="og:url" content="${url}"/>
<meta property="og:image" content="http://example.com/hello.jpg"/> <!-- full absolute url need -->
<meta property="fb:admins" content="100000063646030"/> <!-- facebook user id -->
<meta property="og:site_name" content="wallto"/>
<meta property="og:description" content="${description}"/>
<!-- facebook like end -->


<!-- facebook share start -->
<meta name="title" content="title" />
<meta name="description" content="description" />
<link rel="image_src" href="http://example.com/hello.jpg" / >
<!-- facebook share end -->

</head>
<body>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style ">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_plurk"></a>
<a class="addthis_button_email"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4d831e7d4379750e"></script>
<!-- AddThis Button END -->
</body>
</html>



Reference