ブログとSNSを連携する - mixi イイネ！ボタン

mixi「イイネ！」ボタンがオープン化されたというニュースがあったので、当ブログにもmixi「イイネ！」ボタンを追加してみました。

下記は、2010年12月8日にmixiからプレスリリースされた内容です。

イイネ！ボタンは、ニュースサイト、通販サイト、グルメサイトなど様々なWebサイトにおいて、興味・関心を持ったトピックスや情報などを1クリックで簡単に友人に共有できる『mixi』の新しいコミュニケーション機能です。「イイネ！」したトピックスや情報は、そのページにmixiでつながっている友人が訪れた際に、自分の友人の誰が、また何人が「イイネ！」したかが一目で分かるようになるほか、友人のmixi TOPページのフィード及び自身の最新のチェックにも掲載されます。最新のチェックに表示された友人からのフィードに対して、さらにイイネ！やコメントなどのフィードバックができるため、これをきっかけに、友人との新たなコミュニケーションが生まれます。

『mixi』外のWebサイトにおいて、 1クリックで簡単に友人・知人にコンテンツを共有できる「イイネ！ボタン」を公開

mixiもクローズドの殻を破りオープン化の道を歩み出すのでしょうか。前日のMarkZine（マーケジン）に東京広告協会が首都圏の大学生を対象に行った「SNS（ソーシャル・ネットワーキング・サービス）に関する意識調査」の結果が掲載されていました。

最も利用者の多いSNSは「mixi」で96.6％と圧倒的な強さを見せている。続いて「モバゲー」（18.4％）、「GREE」（14.3％）などが続いている。SNSでの交流メンバーは「同じ大学の中のいい人」という回答は9割近くにおよび、「小中高などの地元の人」「同じサークル・部活の人」が続いている。

大学生の9割がmixiを利用、ツイッター利用は2割強

mixiが現在の若者に圧倒的な支持を得ていることを考えると、この世代がある日突然Facebookに移行するということは考えづらいです。余地があるとすると、上記の調査結果ではコミュニケーションそのものがリアルでの閉じた関係性と連携しているので、コミュニケーションのオープン化に必然性が見いだされたときなのでしょうか。学生から社会人といった変化も関係性のオープン化のきっかけになります。そういう意味でもmixiは近いうちにオープン化を選択しなければならなくなるのではないでしょうか。

mixi「イイネ！」ボタンの設置

「mixiチェックの設定方法」にも記載していますが、mixiチェックを利用するには、mixiデベロッパー登録が必要となります。登録方法はこちらを参照してください。登録確認が携帯からとなっているので、携帯のメアドが必要になります。iPhoneのメールアドレス（i.softbank.jp）でも利用可能です。

チェックキーまでの取得については、「mixiチェックの設定方法」の「新規サービス登録」を参照してください。

イイネ！ボタンのhtmlを発行

下図は、『mixiチェック』というサービスが追加されている状態です。

サービス名称をクリックし『イイネ！ボタンHTMLタグ発行』欄に必要項目を入力します。

1. 対象URL

   mixiイイネ！ボタンを設置するブログのURLを記載します。ここに記載するURLのドメインは、「mixiチェックの設定方法」の「新規サービス登録」にある許可ドメインに設定されていなければなりません。

2. 横幅

   『プロフィール画像を表示』がチェックされていなければデフォルト値は140pixですが、70pixあれば十分だと思います。

3. ③プロフィール画像を表示

   チェックするとイイネ！をクリックしたユーザのプロフィール画像が表示されます。

『タグ取得』をクリックすると下部にhtmlコードが表示されます。このタグをブログに貼り付ければ下記のようにイイネ！ボタンが表示されます。

mixiチェックとmixiイイネ！ボタンの違い

「mixiチェック」は、「ブログとSNSを連携する - mixi連携」で記載したようにボタンをクリックするとコメントの記入が促されます。一方、mixiイイネ！ボタンはクリックするだけです。何れもmixiのチェックに表示されますが、mixiチェックは情報共有、mixiイイネ！ボタンは共感といった違いを感じます。これは、Facebookの「シェア」と「いいね！」と同関係です。

Bloggerにmixiイイネ！ボタンを追加する

下記のコードの発行されたチェックキーを取得したキーに置換して利用してください。data:post.urlでブログエントリーのURLを取得します。注意点としては、オプションの&service_key，&show_faces等の&を「&」ようにエスケープしないとエラーとなってしまいます。

<iframe allowTransparency='true' expr:src='"https://plugins.mixi.jp//favorite.pl?href=" + data:post.url + "&service_key=発行されたチェックキー&show_faces=false"' frameborder='0' scrolling='no' style='overflow:hidden; border:0; width:70px; height:20px'/>

ブログ（本文）の前に表示する

1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2. テンプレートから<div class='post-header-line-1'>を検索
3. <div class='post-header-line-1'>の下にコードを貼付ける。

ブログ（本文）の後に表示する

1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2. テンプレートから<data:post.body/>を検索
3. <data:post.body/>の下にコードを貼付ける。

今日の一曲

クラムボンのヴォーカル&鍵盤担当の原田郁子のソロアルバム「銀河」に納められている1曲目でアルバム名にもなっているこの曲は、闘病生活直前の忌野清志郎が作曲し、コーラスとアコギで参加しています。クラムボンというバンドの曲も原田氏の曲も聴いたことはなかったのですが、清志郎が参加しているということで聴いてみました。清志郎の微妙にアンマッチな声の被せ方にゾクゾクとする緊張感があります。リピートして聴いていると次第にその緊張感が安堵感に変化し、心地よさを感じさせます。アルバムに収録されている原曲は、13'45"という長い曲ですが、iTunesにショートバージョンがあります。夜空を見上げながら聴いてみてください。

銀河 (short version) - Ikuko Harada

直帰率の改善（関連記事の表示）

Bloggerで関連記事（関連ブログ）を表示するで、直帰率改善のためにSmart Related Posts Widget for Google Blogger - v2.0を使って関連するブログ記事を掲載する方法を記しましたが、関連記事を表示するようになってから直帰率が改善がされているかを計測してみました。

結果から述べると、直帰率が85.75％から83.62％と2.1ポイント改善することができました。

下表がその結果となります。

直帰率の改善：（Google Analytics）

期間	直帰率			変化率
	訪問者全体	新規訪問者	再訪問者	訪問者全体	新規訪問者	再訪問者
設置前（前月）	85.75%	85.39%	86.85%
サイドバーに設置	85.13%	85.23%	84.94%	-0.72%	-0.19%	-2.20%
ボディー部に設置	83.62%	83.47%	84.19%	-1.77%	-2.07%	-0.88%

※ 前月･･･4週間、サイドバーに設置･･･2週間、ボディー部に設置･･･2週間

関連記事を記事の最後（ボディー部）に挿入することがうまくできなかったので、最初の2週間はサイドバーにだけ表示されていました。しかし、この結果、改善にあたっての仮説を補う面白いことに気が付くことができました。

直帰率改善の仮説

直帰率改善にあたっての仮説は、下記のデータから導き出したものです。

1. 来訪者のうち新規訪問者（新規ユーザー）は75％
2. 流入の80％は検索エンジンからである

【仮説】

検索エンジンを経て何かを調べるためにこのブログに初めて訪れた新規訪問者は、サイト構成もしらなければ、他にどんな内容が掲載されているかを知らない。そのため能動的に他の記事を検索する人は少ないはず。しかし関連する記事が他にもあるということが目に留まればもう１ページ閲覧する可能性がある。

結果の考察

上記の仮説に基づき関連記事を表示するように変更しました。サイドバーに関連記事を表示すると再訪問者の直帰率は下がりましたが、新規訪問者では大きな変化は見られませんでした。新規訪問者はボディー部へ関連記事を表示するようになってから大きく改善されました。これは新規訪問者では、本文を読む目の導線上になければ気が付かれないということだと思います。

トータルの変化率でみると再訪問者が3.1ポイント、新規訪問者が2.2ポイントと、変化が大きかったのは再訪問者でした。再訪問者の直帰率が大きく改善されるとはいうのは予想外でした。また再訪問者は記事の最後に関連記事を表示してからも直帰率が改善される結果となりました。

変化率とは

Google Analyticsでも期間比較を行うと変化率が表記されています。変化率とは前と比べてどのくらい変わったかという割合です。前年比120％というような言い方と同様です。

e.g. Aくんは、毎月のお小遣いが800円だったのが1,000円になりました。またBくんは1,000円が1,250円になりました。どちらの方が前と比べて改善された（変化が大きい）のでしょうか。

金額で見るとBくんのお小遣いの増加額の方が大きいです。

Aくん 800円 → 1,000円 200円UP
Bくん 1,000円 → 1,250円 250円UP

しかし、増加比率で比較してみると、共に125%です。

1,000円÷ 800円×100=125％
1,250円÷1,000円×100=125％

変化率は、上で求めた比率から100％をマイナスした値になります。つまり、二人の変化率は共に25％で、二人とも以前よりお小遣いが25％アップしたと言えます。

次にお小遣いが減額された場合のケースを考えます。

Aくんは、毎月のお小遣いが1,000円だったのが800円になりました。またBくんは1,250円が1,000円になりました。

Aくん 1,000円 → 800円 200円Down
Bくん 1,250円 → 1,000円 250円Down

変化率を計算します。

800円÷1,000円×100-100％=-20％
1,000円÷1,250円×100-100％=-20％

共に変化率は-20％となります。

Bloggerで関連記事を表示する

Bloggerで関連記事（関連ブログ）を表示するで関連記事について記載していますが、related posts widget でオプション記載部をエスケープしていないと正しく認識されないということが分かり下記のように（赤字部分）変更することで解決しました。

<!-- related posts --> <h4>関連記事</h4> <div class='related-posts-widget'> &lt;!-- { related_title:'' ,thumbs:0 } --&gt; loading.. </div> <!-- related posts -->

このコードをテンプレートに埋め込みます。

ブログ（本文）の前に表示する

1. Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2. テンプレートから <div class='post-header-line-1'> を検索。
3. <div class='post-header-line-1'> の下にコードを張付ける。

ブログ（本文）の後に表示する

Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。

テンプレートから <data:post.body/> を検索。

<data:post.body/> の下にコードを張付ける。

今日の一曲

ビートルズの中で好きなアルバムは、と、問われれば迷わずこのREVOLVERをあげます。特にTomorrow Never Knowsは、ワンコードで作られ、テープループを用いたアバンギャルドな一曲となっています。まさにミニマムミュージックの原点がこの曲にあります。リンゴスターのドラムのリフの入り方もとっても格好良いですし、ボーカルの中域を持ち上げたラジオチックな録音の仕方もステキです。限られた機材で工夫を凝らしているこの曲は、昨今のDTMのアンチテーゼとして聴こえてきます。

The Beatles - Tomorrow Never Knows / Revolver

Evernoteにクリップするボタンを追加する

SNS連携ではありませんが、日頃お世話になっているEvernote（エバーノート）なので、ブログに簡単にコンテンツをクリップできるEvernoteサイトメモリーのボタンを追加してみました。

Evernoteサイトメモリーページにある『GET STARED』をクリックするか、画面をスクロールして『サイトメモリーを設置する』で幾つかのパラメータをセットするだけで簡単にコードが生成されます。

Evernoteサイトメモリーの使い方（設定方法）

ボタンの選択

ブログに使用するボタンを選択します。

クリッピングの設定

『Webサイト名』にブログ名（ブログタイトル）を入れます。説明にあるように設定していないとクリップするときにドメイン名となります。

『クリップするコンテンツ』は「main」とします。設定していないとブログ全体がクリッピング対象となります。このブログの場合は、設定していないとサイドバー含めてクリップされてしまいます。

コードのコピー

コードをテスト＆コピーとありますが、カット＆コピーの間違いでしょうか。





生成されたコードは下記となります。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" /></a>

このコードをそのまま利用してもよいのですが、画像に枠線が残るため、<img>タグに style='border: none' を追加します。

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'象と散歩',contentId:'main'}); return false;"><img src="http://static.evernote.com/article-clipper-jp.png" alt="Clip to Evernote" style="border: none" /></a>

BloggerにEvernoteサイトメモリーを設置する

Blogger利用者が、Evernoteサイトメモリーを設置する場合には下記の手順により、ヘッダー部に表示されます。クリップされたときの題名には、<title>タグに設定されている内容が反映されます。

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから <div class='post-header-line-1'> を検索。
3．<div class='post-header-line-1'> の下にコードを張付ける。

Evernoteクリップボタンを試してみる

ブログに表示されたEvernoteサイトメモリーを試してみます。





クリップがクリックされると、Evernoteにログインしていなければ、ログイン画面が表示されます。





Evernoteにログインするとクリップの確認画面が表示されます。『Clip from』には、上記設定の『Webサイト名』が表示されます。左下の『クリップ』をクリックするとEvernoteの新規ノートに登録されます。





クリップが成功すると下記の画面が表示されます。






-- iPadから送信