Translate

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)』ボタンの作成ページがあります。英語ページですが、2個のパラメータを設定して『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です。細かいリズムの組合せも嫌らしさを感じさせず、とてもシュールに仕上がっています。またボーカリスト細野晴臣を堪能できます。
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.テンプレートから <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
2010年9月7日

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

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

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


tumblr.でブログを書かれている方にもBlogPressは便利なアプリとなるのではないでしょうか。

tumblr.の設定

設定の「デフォルトブログ」にある「もう一つのブログを更新する」をタップ。


「あなたのブログサプライヤー」の『>』をタップ


一覧からTumblr(下から二番目)を選択


ユーザ名(メールアドレス)とパスワードを入力。右上の『保存』をタップ


Tumblrが追加されました。ブログの特長でTwitterとFacebookのIDを登録しているとtumblrに公開した内容がtweetされます。


tumblr.でブログを書く

iPadにiPhoneで撮った写真を転送するには、BluetoothをサポートしているiFilesが便利ですが、この程度の内容であればiPhoneで十分にかけますね。


右上の『保存』をタップして、「すぐに発布!」で公開されますが、Facebookと連携していると下記のメッセージが表示されます。右下の『公開』をポチッとしてください。


成功のメッセージが表示されます。「はい」をタップするとsafariでtumblrが立ち上がります。


以上で、終了です。

BlogPress

iPhone、iPod Touch、iPad
・オフラインでブログ作成ができる
・画像がアップロードできる
・htmlタグの挿入ができる
価格: ¥350


オフィシャルサイト

-- from iPad

アクセス上位(過去7日間)