ブログとSNSを連携する - mixi連携

ブログとSNSを連携する - Twitter連携では、ツイートボタンの設置について、ブログとSNSを連携する - Facebook連携では、いいね！ボタンとシェアボタンについて説明をしましたが、今回は、mixiとの連携です。

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

「mixiチェック」は、興味・関心を持った情報を、簡単に友人・知人に共有できる『mixi』の新しいコミュニケーション機能です。mixiニュースやミクコレ（mixiコレクション）など、興味・関心を持ったトピックや情報を1クリックで、友人・知人に共有することが可能です。チェックした情報は、友人・知人の『mixi』のTOPページおよび、「最新のチェック」に掲載されます。

mixiチェックはFacebookのシェア（Share）と同等機能かと思います。mixiは殆んど利用していなかったのですが、日本最大のSNSであるmixiの『mixiチェック』もブログに追加してみました。

mixiチェックボタンの追加

mixiチェックを利用するにはmixiのアカウントが必要です。

mixiデベロッパー登録

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

新規サービス登録

Developer Dashboardで、上部の「mixi Plugin」→「新規サービス追加」で設置するブログを登録します。内容は下記の画像を参照してください。




①サービス名

適当な名前でいいかと思います。自分は、mixiチェックと入力しました。

②サービスのURL

自分のブログのURLを入力

③許可ドメインリスト

mixiチェックボタンを付けるブログのURL（ドメイン）を登録していないと、mixiチェックがクリックされてもエラーとなってしまいます。






登録するとチェックキーが発行されます。

mixiチェックボタンの設置

『mixiチェックボタン』の設置方法についての詳細はこちらを参照してください。コードは下記のようになります。

<a class="mixi-check-button" data-button="ボタン種類" data-key="発行されたチェックキー" data-url="サイトURL" href="http://mixi.jp/share.pl">Check</a>
<script src="http://static.mixi.jp/js/share.js" type="text/javascript">
</script>

ボタン種類には下記の5種類があります。

button-1： Check

button-2： Check

button-3： Check

button-4： Check

button-5： Check

mixiチェックはクリックすると下図のように公開範囲とメモ（コメント）を付与することができます。



またチェックした内容は、最新のチェック／自分のチェックに反映されます。

Bloggerに『mixiチェック』ボタンを追加する

自動的にブログ記事のURLを取得するように data-url="サイトURL" の部分を expr:data-url='data:post.url' と変更します。

<a class="mixi-check-button" data-button="button-2" data-key="発行されたチェックキー" expr:data-url="data:post.url" href="http://mixi.jp/share.pl">mixiチェック</a>

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

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/>の下にコードを貼付ける。

今日の一曲

Norah Jones（ノラ・ジョーンズ）、Come Away With Meの13曲目に収録されている『The Long Day is Over』は、仕事に疲れて帰ってきたときにとても似合う曲です。彼女の独特の歌声が疲れた身体にすこしづつ染み込んでいきます。

何年か前にライブを観に行ったときにも演奏していましたが、アジア系女性のコーラスとマッチしていて、とても気持ちよかったのが思い出されます。

当時は20代前半だったかと思いますが、成熟した女性の歌声を聴かせてくれていました。

Norah Jones - Come Away with Me / The Long Day is Over

ブログとSNSを連携する - Facebook連携

ブログとSNSを連携する - Twitter連携では、ツイートボタンの設置について説明をしましたが、今回は、Facebookとの連携です。

ブログに『シェア』（Share）ボタンと『いいね！』（Like）ボタンを追加してみました。

いいね！（Like）とシェア（Share）の違い

いいね！（Like）ボタン

最近のアクティビティにLike（いいね！）をクリックした内容が下記のように表示されます。

シェア（Share）ボタン

クリックするとコメントの書き込みとサムネイル（画像）の表示有無と選択ができます。下記の例ではサムネイルが他に選択できませんが、理由として考えられるのは、ブログの下書きをiPadのBlogPressで作成したのでPicasaに画像がアップされてしまっているからなのでしょうか。

実際にシェアしてみるとFacebook上には下記のように表示されます。

FacebookのFriend（友人）が更にコメントしたり、いいね！やシェアすることができます。

いいね！（Like）ボタンの設置方法

Like Button - facebook developers に『いいね！（Like）』ボタンの作成ページがあります。英語ページですが、２個のパラメータを設定して『Get Code』をクリックするだけです。

① URL to Like
いいね！とクリックしてもらいたいURLを指定します。

② Layout Style

Standard：

Button_Count：


Box_Count：


③ Get Code

クリックするとコードが生成されるので、iframeのコードをコピーして当該ページに貼り付けます。

※上記の方法は、URLを指定しているためにページ毎にURLを指定しなければなりません。
自動的に貼り付けたページのURLを取得する方法は、利用環境によって異なります。（Bloggerでの方法は後説します。）

シェア（Share）ボタンの設置方法

シェアボタンの作成ページは日本語で用意されています。パラメータの『スタイル』と『カウンタ』を変更するとプレビューで確認できます。『シェアするリンク』は元ページのURLを指定すれば貼り付けをしたページのURLが取得されます。

コードを貼り付けると下記のように表示されます。

シェア

Bloggerに『いいね！』（Like）ボタンを追加する

毎回、本文に上記コードを貼り付けるのも面倒なので、ブログ記事の先頭か最後に表示されるように設定します。またブログエントリーのURLを取得するようにしなければなりません。

下記のコードを利用するとブログエントリー毎のURLが自動で取得できます。

<iframe allowtransparency="true" expr:src="&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;" frameborder="0" scrolling="no" style="border: none; height: 40px; overflow: hidden; width: 500px;"></iframe>

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

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/>の下にコードを貼付ける。

Bloggerに『シェア』（Share）ボタンを追加する

『いいね！』ボタンと同様にブログ記事の先頭か最後に表示されるように設定します。その場合にはブログエントリーのURLとタイトルを取得できるようにしなければなりませんので、コードを下記のように修正します。

<a name="fb_share" type="button_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">シェア</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

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

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/>の下にコードを貼付ける。

今日の一曲

YMO散会後の1984年に発売された『S-F-X』は、もう一度、テクノポップは、どうあるべきか、人と機械はどのように融合できるのかを考えさせてくれたアルバムです。

リズム構成、音の作り方、ボーカル、何れもいま聴いても古びていない尖ったセンスを感じさせるアルバムです。また最後のDark Side of The Starでは、アンビエントな世界も示唆しています。

またクレジットには、HARUOMI HOSONO with FRENDS OF EARTHとあり、この時点でFOE結成を考えていたのでしょうか。

今日のオススメは4曲目のStrange Loveです。細かいリズムの組合せも嫌らしさを感じさせず、とてもシュールに仕上がっています。またボーカリスト細野晴臣を堪能できます。

ブログとSNSを連携する - Twitter連携

マーケティングの世界ではソーシャルメディア/SNS（ソーシャルネットワーク）がキーワードとなり、TwitterやFacebookの存在はマーケティング担当者にとって悩ましい存在となっています。

日本のソーシャルメディア利用者数

米国の社会学者ロジャーズ（Everett M. Rogers）のイノベーター理論によれば、イノベーターが2.5%、アーリーアダプターが13.5%で、イノベーターとアーリーアダプターの構成比を合算した16%をイノベーションのブレーク・スルー・ポイントと定義しています。

Nielsenの資料では、2010年4月のインターネット利用人口は、約5,200万人なので、100万人未満であればイノベーター、100万人〜800万人の利用者でアーリーアダプター、800万人を超えるとアーリーマジョリティーです。

mixiとTwitterの利用者は2010年4月時点で1,000万人、Facebookの利用者が200万人となっています。つまりmixiやTaitterは、ブレーク・スルー・ポイントを超えたアーリーマジョリティーまでに成長していますが、Facebookはまだアーリーアダプター（初期採用者）の域にあるということになります。

しかし、世界的にブレークしたFacebookが日本でも普及すると予見してか、日本でも『いいね』ボタンを設置したコンテンツが散見されます。また9月6日から日本最大のSNSであるmixiでも『mixiチェック』というシェアできるサービスがスタートしました。

ということで、ソーシャルメディアであるブログからSNSによってどのように情報が伝搬されるのかを実体験するために、自分のブログにボディ（本文）のトップとボトムに各社のシェアボタンを設置してみました。

ブログにTwitter公式ツィート（Tweet）ボタンを設置する

Twitter/ツィートボタンで簡単にコードを作成することができます。

生成されたコードをブログに埋め込めばいいだけです。本文に上記コードを貼り付けると下記の用に表示されます。

Tweet

BloggerにTwitter公式ツィート（Tweet）ボタンを設置する

毎回、本文に上記コードを貼り付けるのも面倒なので、ブログ記事の先頭か最後に表示されるように設定します。但し、このままのコードでは、ブログタイトルとブログインデックスのURL表記となってしまうために下記のコードを追加します。

expr:data-text='data:title + " :"+ data:post.title'

インデックスページのタイトルではなく、「ブログタイトル: ブログエントリーのタイトル」が表示されるようになります。

expr:data-url="data:post.url"

インデックスページのURLではなく、ブログエントリーのURLが表示されるようになります。

【Before】

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

【After】

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="walkinggiraffe" expr:data-text='data:title + " :"+ data:post.title' expr:data-url="data:post.url">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

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

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

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/> の下にコードを張付ける。

ツイートボタンがクリックされると下記のように表示されます。

Twitterのフォロー（Follow me）ボタンをブログに追加する

ブログにTwitter Counterでウィジェットを作成してTweetした内容を表示していますが、ブログ記事にもフォローボタンを追加しました。自分で画像を作成して自分のTwitterホームにリンクを張ればいいだけですが、数多のボタンデザインを提供しているTWEET BUTTONを利用しました。
『あなたの ID』というテキストボックスに自分のTwitterアカウントを入力して『ゴー』をクリックするだけでコードが生成されます。

このまま利用しても良いのですが、自分のブログは本文の背景色が白のため画像の枠が気になったので、リンク画像の枠線を消すために style="border:none;" を追加した下記のコードを使いました。

<a href="http://twitter.com/walkinggiraffe"><img height="40" src="http://button.tweetbox.jp/images/twitter-5c.gif" style="border: none;" title="ツイートボタン" width="190" /></a>

Bloggerにフォローボタンを追加する

ツイートボタンと同様に下記の何れかの方法でテンプレートにコードを追加します。

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

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/> の下にコードを張付ける。

『Follow me on Twitter』ボタンがクリックされると下記のように自分のアカウントのタイムラインが表示されます。

今日の一曲

Jealous Guy（ジュラスガイ）は、（Jhon Lennon）ジョン・レノンがの曲ですが、Roxy Music（ロキシーミュージック）がジョン追悼として'81年にカバー曲として発表しています。

Bryan Ferry（ブライアン・フェリー）が、嫉妬野郎の悋気の歌詞を切なく歌い上げます。

この曲を聴くと男って女々しい生き物だけど、やはり肩肘張って生きて行かなければならないという一種決意めいた気持ちにかられます。

ジョン・レノンのオリジナルを聴いてもそのような気持ちにはならないのは、ブライアン・フェリーのPVを観て、「おい、おい」と思ったからかもしれません。

Bryan Ferry

The Ultimate Collection - Jealous Guy