ソーシャルメディアに共有するボタンの設置方法（Twitter、facebook、mixi、GREE、Evernote）

» tips » MovableType | [2010年9月14日 10:56]

最近、ソーシャルメディアの各サービスがこぞって「いいね！」などの共有ボタンをリリースしています。このブログにも一挙に導入してみましたので設置方法をまとめてみたいとおもいます。対象となるボタンは・・・

の５サービスを導入してみました。
それでは、早速始めます。

とりあえず保存する？→

Check

Twitter「Tweet Button」

・Twitter / ツイートボタン

「Tweet Button」はページのタイトルと t.co で短縮されたURLをツイッターにポストできるボタンです。ボタンはカウンターの位置などで３種類から選べます。

Twitter / ツイートボタンページにアクセス
ボタンの種類を選択
フォローするのにおすすめのユーザーを選択(オプション)
ボタンをプレビューにて確認後、コードを取得すれば完了です!

出力されたコードは以下のようになります。

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="yager" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Aタグを後からscriptで書き換える方式です。

細かいカスタマイズなどは下記のページを参考にしてください。（英語）
・Tweet Button | dev.twitter.com

Facebook「Share」「Like（いいね！）」

ソーシャルメディアボタンの先駆けとなったのがFacebookの「いいね！」ボタンです。その前から「share」機能も持っていたので合わせて紹介しようと思います。まずは、「Share」ですがカウンターの有無などで4種類から選べます。

Facebook | シェアのジェネレーター画面にアクセス
スタイルを選択
カウンターを選択
シェアするリンクを選択（基本は「元のページのURL」）
プレビューを確認
コードをウェブサイトに貼り付ける

出力されたコードは以下のようになります。

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">シェア</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Aタグを後からscriptで書き換える方式です。

細かいカスタマイズなどは下記のページを参考にしてください。（英語）
・Facebookシェア - Facebook開発者

続いて「いいね！」ボタンも紹介します。こちらもカウンターの有無などのスタイルをジェネレーターで設定できます。

Like Button - Facebook開発者（英語）のジェネレーター画面にアクセス
「URL to Like」は指定なしで見ているページをLikeしてくれます
「Layout Style」で3種類からスタイルを選択します
「Show Faces」ボタンのしたにプロフィールアイコンを表示するか選択します
「Width」で横幅を指定します（Styleによってはこれを調整しないと見た目が悪いです）
「Verb to display」で表示するテキストを選択します（likeかrecommend）
「Font」でフォントファミリーを選択できます
「Color Scheme」でアイコン色の濃淡を選択できます
各選択を変更するたびにプレビューが更新されるので確認します
Get Codeでコードを取得したらウェブサイトに貼り付けます

出力されたコードは以下のようになります。

<iframe src="http://www.facebook.com/plugins/like.php?layout=box_count&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=65" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:65px;" allowTransparency="true"></iframe>

iframeタグで表示する方式です。

詳しい説明もジェネレーターのページに記載されていますので参考にしてください（英語）
・Like Button - Facebook開発者

mixi「mixiチェック」

・[mixi] チェック新登場

国内大手SNSのmixiもオープン化の流れで「mixiチェック」というサービスを公開しました。デベロッパー登録が必要など、手順が少々面倒な部分はありますが誰でも登録できますので導入してみます。ボタンは5種類から選ぶことができます。

（デベロッパー登録されていない場合）Developer登録画面から登録します。（要携帯メールアドレス）
mixi Developer Centerのmixi Developer Dashboardからチェックキーの発行を行ないます
トップメニューから「mixi Plugin」にアクセスします
左メニューから「新規サービス追加」をクリックします
必要な情報を入力して登録します
チェックキーが発行されるのでそれを使ってコードを生成します
コードをウェブサイトに貼り付けます

最も簡単なコードは以下のようになります。

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="チェックキー" data-button="button-1">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

ページのタイトル・URLは自動的に取得されますが、ページの概要を表示したい場合はmeta要素の指定などが必要です。一番簡単な方法はmeta descriptionを指定することですが、MovableTypeであれば下記のようなコードを個別ページのテンプレートに挿入すればよいでしょう。

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

本文の概要にあたるMTEntryExcerptをmeta descriptionに指定する方法です。

それ以外の詳細なカスタマイズ方法は下記ページを参考にしてください。
・技術仕様 << mixi Developer Center (ミクシィデベロッパーセンター)

チェックキーの発行方法はこちらが詳しいです。
・ブログにmixiチェックを設置 - F.Ko-Jiの「一秒後は未来」

※デベロッパー登録で（ガラパゴス）携帯メールアドレスを要求する仕様は何とかならないのだろうか...。

GREE「Social Feedback（いいね！）」

・Social Feedback - GREE Developer Center（グリーデベロッパーセンター）

mixiと時を同じくしてGREEもソーシャルボタンを発表しました。facebookと同じ「いいね！」という表現ですが、ドキュメントの位置が分かりにくかったので注意が必要です。画像は文言とサイズのパターンで15種類もあります。

Social Feedbackにジェネレーターがあるのでアクセスします
iframe出力ツールを見つけて、種類、高さを選択します
「コードを取得する」を押してプレビューを確認します
コードをコピーしてウェブサイトに貼り付けます

出力されたコードは下記のようになります。

<iframe src="http://share.gree.jp/share?url={RFC3986エンコードされたURL}&type=0&height=20" scrolling="no" frameborder="0" marginwidth="0" marginheight="0" style="border:none; overflow:hidden; width:100px; height:20px;" allowTransparency="true"></iframe>

urlパラメーターは省略可能かもしれませんが、MovableTypeでは下記のように指定しました。

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

Social FeedbackはOpen Graph protocol準拠のmeta要素を記述することで詳細な情報を登録できます。詳しい説明は下記ページを参考にしてください。
・Social Feedback - GREE Developer Center（グリーデベロッパーセンター）

Evernote「Site Memory（Clip）」

・Evernote Site Memory | Evernote Corporation

ソーシャルメディアとの連携という意味では少し違ってしまうのですが、同じ"クラウド"に共有するという意味でEvernoteの新しい機能である「Site Memory」も導入してみることにしました。アイコンには日本語ユーザーをたくさん持っているEvernoteらしく始めから「クリップ」という日本語のカワイイ画像が用意されています。

Evernote Site Memoryのジェネレーター画面にアクセスします
ボタンの種類を選択します
クリップ対象となるHTML要素のIDを指定します
サイト名、保存するノートブック名、アフィリエイトコードなどを入力してカスタマイズします
プレビューを確認します
コードをコピーしてウェブサイトに貼り付けます

もっともシンプルなコードは下記のようになります。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>

カスタマイズ内容によって、Evernote.doClipに渡すオブジェクトのパラメータが異なります。
カスタマイズ方法は公式のドキュメント（英語）がありますが、HeartLogicの小林さんが日本語で紹介されていますのでそちらの方が分かりやすいかもしれません。
・Evernoteの新Webクリップ機能「Site Memory」をブログに貼り付ける（Movable Typeでのカスタマイズ） :Heartlogic

まとめ

URLを共有というのはソーシャルブックマークが担っていた機能だと思うのですが、プラットフォーム化している各ソーシャルメディアサービスがそれぞれに同等の機能を出してきているのはトレンドだなぁと感じます。SBMの機能を全て網羅しているわけではないので、これらのサービスはある程度の棲み分けをしていくのだと思いますが、こういったトレンドにいち早く対応するのもウェブマスターとしての醍醐味かなと思います。