2010年9月19日

Movable Typeに5つのソーシャルメディアクリップを設置する方法

この記事を読むのに 約9分0秒 かかります

Movable Typeに5つのソーシャルメディアクリップを追加する方法について。

Facebookの「いいね!ボタン」に倣ってなのかどうかわからないけど、各ソーシャルメディアサービスが似たクリップ、シェア機能をリリースしている。これらをブログに導入したので、その方法を記事にしておく。

今回取り上げるものは以下の5つ。1つずつ説明。

ちなみに、このブログにそれぞれ設置しているが、このブログは2010/09/18現在、Movable Typeでバージョンは4.27。それぞれアーカイブテンプレートの個別記事に埋め込まれるようにしている。

Twitterの「ツイートボタン」

Twitterはクリップというよりはツイートでミニブログなのだけど、まあソーシャルでクリップでシェアリングでしょ。5つ挙げるもののうち、現在、最も重要なサービスではないだろうか。

Twitterの「Twitter / ツイートボタン」に、コード作成フォームがある。この内容をテンプレートモジュールとして登録しておいて、個別記事のテンプレートから<MTInclude>して使う。
tweetmemeを使っていたときのものが、<MTIgnore>と</MTIgnore>の間に残っているけれど、そちらが良ければそちらを有効に。

<MTIgnore>
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<$MTEntryPermalink$>';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</MTIgnore>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Twitterの「ツイートボタン」の場合は、ページ内容ごとに設定する必要があるパラメータがないので、かつブログ記事のページをphp化しているのであれば個別にファイルを作成して部品化し、使う箇所で読み込ませてもいい。これは他のボタンの場合も同じ。

Facebookの「いいね!ボタン」

Facebookの「いいね!」ボタンは、Likeボタン、今回紹介するの中では老舗。
Facebookのユーザ数は4億人を超えていて、日本でも今後増えていくと予想している。

Facebookの「Like Button - Facebook開発者」に、コード作成フォームがある。この内容をテンプレートモジュールとして登録しておいて、個別記事のテンプレートから<MTInclude>して使う。リンク先は、<$MTEntryPermalink encode_url="1"$>にすること。

<iframe src="http://www.facebook.com/plugins/like.php?href=<$MTEntryPermalink encode_url="1"$>&amp;layout=button_count&amp;show_faces=true&amp;width=75&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:150px; height:21px"></iframe>

Facebookには他にも様々なソーシャルプラグインがある。


mixiの「mixiチェック」

Check

日本国内最強SNSといわれているmixiが提供するクリップサービス。

「技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)」に、設置方法の記載がある。こちらの「mixi チェックボタンの設置(PC 向け)」の中に、

mixi チェックボタンの設置方法は簡単です。数行の HTML を追加するだけです。

と書かれている。確かにwebページ側には数行書くだけ。だが、この中に書く必要がある「mixi チェックキー」を得るのとmixiチェックできるようにするためには、mixiのDeveloper登録して、mixiチェックを使うブログをサービスとして追加することが必要。

mixiの技術仕様に従って記載した内容をテンプレートモジュールとして登録しておいて、個別記事のテンプレートから<MTInclude>して使う。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">Check</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxの部分は自分で取得したmixi チェックキー。

また、記事タイトルは自動的に取得されるが、本文の概要は指定する必要がある。mixiチェックの技術仕様によると以下のようなタグを指定せよとのこと。

<html xmlns:og="http://ogp.me/ns#"
      xmlns:mixi="http://mixi-platform.com/ns#">
<head>
  <title>...</title>
  <meta property="og:title" content="..." />
  <meta property="og:description" content="..." />

Movable Typeでdescriptionを指定する場合は、記事の概要を記載していてそれを指定する場合、以下を個別記事テンプレートのヘッダに指定する。

<meta name="description" content="<$MTEntryExcerpt convert_breaks="0" $>" />

自分は記事の概要は書いていないので、本文から抜き出すことにした。

<meta name="description" content="<$mt:EntryBody convert_breaks="0" strip_tags="1" words="60"$>..." />

GREEの「Social Feedback」

mixiに追随するGREE。mixiにあるならGREEにも。

「Social Feedback - GREE Developer Center(グリー デベロッパーセンター)」に、設置方法の記載とコード作成フォームがある。この内容をテンプレートモジュールとして登録しておいて、個別記事のテンプレートから<MTInclude>して使う。

<iframe src="http://share.gree.jp/share?url=<$MTEntryPermalink encode_url="1"$>&amp;type=0&amp;height=16" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px; height:16px;" allowTransparency="true"></iframe>

”url=”で示されるURLは、<$MTEntryPermalink encode_url="1"$>にすること。

Evernoteの「Site Memory(Clip)」

Clip to Evernote

Evernoteは「すべてを記憶する」を謳っているクリッピングサービス。

Evernote Site Memory | Evernote Corporationに設置方法とコードサンプルがある。 また、Evernote Site Memory | Evernote Corporationに設置コード作成用のフォームがある。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({styling:'full',contentId:'entry',providerName:'BBBLOG'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>
Site Name(providerName)だけBBBLOGと指定している。

今まではURLをクリップ、共有するというのは、ソーシャルブックマークサービスが提供してきていたが、最近になって、ソーシャルメディア側がこの機能を提供してきている。将来的には、これらのデータと人間関係が組み合わさって、新しいかたちのサービスが出来ていくのではないかと。

Posted by BB at 2010/09/19 01:56
Category : Movable Type | Trackbacks [1]

 
Related Posts Plugin for WordPress, Blogger...

この記事を読んだ人が読んだ他の記事

去年の今頃に書かれた記事

トラックバック

» ページアップデート、改善リスト from 西アフリカ、マリ共和国にて
やりたいこと 外見 ページ改定履歴(初稿、最終更新日)を表示 コメント数トラックバック数の表示 カレンダーの導入 タグクラウドアーカイブページほか、各アー... 続きを読む