象と散歩

Post Date：2010年9月28日　

ブログと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．テンプレートから<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です。細かいリズムの組合せも嫌らしさを感じさせず、とてもシュールに仕上がっています。またボーカリスト細野晴臣を堪能できます。

Post Date：2010年9月21日　

ブログと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/ツィートボタンで簡単にコードを作成することができます。

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

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．テンプレートから <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

Post Date：2010年9月7日　

BlogPress ver2.0.1 - tumblrでブログを書く

iPadでBlogPressを使ってブログを更新で紹介したBlogPressがver2にアップデートされました。Blogger利用者にはとても便利なアプリですが、今回のアップデートでtumblr（タンブラー）もサポートされました。

iPad/iPhoneのSafariでは、写真をアップすることができないのと、ソフトウェアキーボードに矢印キーがないのでテキストボックスでの編集に向いていません。