SNSボタンを設置してみた

自分が使用した、SNSボタンの設置方法。

設置方法

facebook like button

http://developers.facebook.com/docs/reference/plugins/like/

上記のURLから自分のサイトのlikeボタンを作成した場合の例が下記。
iframeとxfbmlの2種類がある。個人的にはiframe版の方がよいかと思う。 

<!-- iframe版 -->
<iframe src="http://www.facebook.com/plugins/like.php?app_id=204714862912458&amp;href=http%3A%2F%2Fsites.google.com%2Fsite%2Fdaimyou0410%2F&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:90px;" allowTransparency="true"></iframe>

<!-- XFBML版 -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JS/all.js#xfbml=1"></script>
<fb:like href="http://sites.google.com/site/daimyou0410/" send="false" layout="box_count" width="450" show_faces="true" font=""></fb:like>
mixi check

http://developer.mixi.co.jp/connect/mixi_plugin/mixi_check/spec_mixi_check/

※mixi developerに登録する。その後、サービス登録し、mixiチェックキーを発行してもらい、ページの内容、許可ドメイン等を書く。
下記が自分のサイトでmixiチェックを設置する場合の例。 

<a href="http://mixi.jp/share.pl" data-button="button-1" class="mixi-check-button d_inline" data-key="発行したチェックキー" data-url="http://sites.google.com/site/daimyou0410/" target="_blank">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
twitter tweet button

http://twitter.com/about/resources/tweetbutton

上記のURLから自分のサイトのtweetボタンを作成した場合の例が下記。 

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://sites.google.com/site/daimyou0410/" data-text="#soba" data-count="vertical" data-via="daimyo_wakatono" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

snsのサーバがアクセス可能にする

下記のUser-Agentを見て、アクセス可能にする。
※twitterの場合は、snsサーバ側からコンテンツを取得しにこないので、特に必要はない。

facebook

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

mixi

mixi-check/1.0 (http://mixi.jp/)

Open Graph タグの設置

そのページが何について書かれているかの情報を記述する。
※こちらを参照。 

<meta property="og:title" content="タイトル" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="詳細" />

facebook URLリンターを利用して、どのように解析されるかを確認することが出来る。