ブログとSNSを連携する - Tumblrで共有

「Tumblrで共有」ボタン、ウェブサイト運営者向けに提供開始という記事を見かけたので早速ブログにTumblrの共有ボタン（Share on Tumblr）を設置してみました。

Tumblr共有ボタンの設置方法にあるコードを貼り付けるだけです。

Advancedを選択するとTumblrに共有される形式をリンク、引用、写真、ビデオの中から選択することができるようです。

先ずは基本のBasicを選択します。

BloggerにTumblrで共有ボタンを設置する

Tumblr共有ボタンのステップ１にあるJavaScriptを/headの前にコピーします。

<script type="text/javascript" src="http://platform.tumblr.com/v1/share.js"></script>

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

続いてShare button codeにあるコードを貼り付けてみましたが、Tumblrで共有ボタンが表示されません。

ボタン画像のURLが正しく解釈されていないのではと思い、コードをみると画像のURLがアポストロフィで囲まれていましたので、これをクォートに変更してみると『Tumblr共有ボタン』は表示されましたが、表示位置が変です。

再びコードを眺めると<a>タグで「Share on Tumblr」という文字列にリンクをさせているのですが、表示上にこの文字列はありません。text-indent:-9999px という記載があるので、おそらくこれがあり得ない場所に文字列を飛ばしているのではないかと考え、「Share on Tumblr」とtext-indent:-9999pxを外してみました。

するとTumblr共有ボタンが正しく表示されました。（自分の感に万歳！）

下記の【After】がBlogger用に変更した『Tumblrで共有ボタン』のコードです。

【Before】

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a>

【After】

<a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; overflow:hidden; width:81px; height:20px; background:url("http://platform.tumblr.com/v1/share_1.png") top left no-repeat transparent;"></a>

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

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

Tumblr共有ボタンを試す

Tumblr共有ボタンを押すとShare on Tumblrの画面が表示されます。Basicを選択しているとLinkがデフォルトになるようです。左下の『Create post』でTumblrに投稿されます。

BloggerへのTumblr共有ボタンの設置はこれで終了です。

今日の一曲（２曲セットで）

ザ・ベスト・オブ・セックス・ピストルズ

charaのMy Wayを紹介したときにセックス・ピストルズに触れましたが、パンクというジャンルを知らなかった自分が、初めて Anarchy in the U.K. を聴いたときは、頭の回路がショートし、My Wayが脳内で反芻していました。そしてその後のニナ・ハーゲン、戸川純という、自分の趣向に新しいパターンを生み出すきっかけとなったのです。ザ・ベスト・オブ・セックス・ピストルズには、勿論この２曲も収録されています。音量を上げて空気の振動を感じながら聴いてください。

Anarchy in the U.K. - The Sex Pistols
My Way - The Sex Pistols

iPhone/iPod Touchで新聞を読む

以前、『iPhone/iPod Touchで新聞を読む - RSS probe』という記事でYahoo Pipesで作成されたフィードをiPhoneのRSSリーダー（RSS probe）に登録してオフラインで新聞記事の全文を読む方法を掲載していましたが、asahi.com 全文配信改が文字化けするようになってしまったので、別な方法でもRSSリーダー（RSS probe）に登録して新聞記事の全文をオフラインで読んでいます。

iPhoneを使いながらにも、なぜ、こうまでして記事全文をオフラインで読むことに拘るかといえば、通勤で地下鉄区間が長いのでネットに常時繋がる環境ではないということと、「読む」ということを別な動作であまり阻害されたくないという理由からです。

素晴らしき贈り物

そういう意味では、下記に示す、各社の『社説』と『コラム』が一読できるYahoo Pipesで作成されているフィードは自分にとって最高に素敵な贈り物です。

・今日の社説（読売・朝日・毎日・日経・産経）
・今日のコラム（読売・朝日・毎日・日経・産経）

「今日の社説」は、読売、朝日、毎日がRSS Probeで全文ダウンロードできますが、日付表示が不正となります。また朝日新聞の社説は1/2本しか表示されません。「今日のコラム」は、天声人語（朝日）、産経抄（産経）、春秋（日経）が全文でダウンロードできます。 下記も全文ダウンロードができます。 ・天声人語 ・毎日jp 社説 2012年1月28日 更新

社説は事柄だけを伝えるニュースと異なり、記者や新聞社の考え方でまとめられているので「なるほど」と感心したり「それは違うのでは？」などと勝手に批判したりと、自分の意見を形成するのに手頃な題材です。また各社の社説を読むことで捉え方の違いも分かります。iPhoneアプリのRSS probeを使っていれば、Twitter投稿が可能なので、その感想をそのままツイートすることもできます。また天声人語、春秋などのコラムは雑学の宝庫なので、ネタとしてEvernoteに記事を保存することもできます。

また世に流るるニュースチェックのために同じくYahoo Pipesで見つけた、日系 NIKKEI NETとasahi.com 全文配信改もRSSリーダー（RSS probe）に登録していましたが、日経が有料配信してから全文を読める記事が一部に限定され、朝日は文字化けして見られなくなりました（見られるようになりました。 2012/01/28 更新）。有料化に伴う制限は回避できませんが、文字化けであれば回避できる方法があるのではないかと探してみました。見られなくなると、見られる方法を探してしまうのが人の性です。

RSS probe iPhone用フィードリーダ

MediaProbe inc.

¥115 ¥85

Yahoo! PipesでのRSSフィードURLの取得方法

Yahoo! Pipesもいつの間にかモバイル対応がされており、iPhoneで表示すると下記のように表示され、RSSフィードURLが取得できません。

RSSフィードのURLは、PCかiPadで取得します。下記はiPadでURLを取得する場合ですが、『Get as RSS』を長押ししてコピーで取得できます。Google Chromeなら右クリックで『リンクアドレスをコピー』です。このURLをメールでiPhoneに送信します。

RSS Probeへの登録方法は、下記の「RSS Probeに登録」に記載していますので参照願います。

2012年01月28日 追記

日経社説のRSSフィード

Yahoo! Pipesにある「今日の社説」では、日経の社説が読めなくなってしまいました。そこでZou3.netを利用させていただくことにしました。Zou3.netでは、RSS配信をしていない日本経済新聞、東京新聞などをカテゴリ別に自作のPHPスクリプトでRSSフィードとして提供してくれています［陳謝］。

但し、全文配信ではないので下記の「まるごと配信」などで更に全文配信形式に変換してRSS Probeに登録します。

これで日経の社説と春秋（コラム）をRssrobeで全文配信としてダウンロードし、オフライン環境でも読めるようになります。

2012年01月28日 追記

RSS、全文でググる

ニュース「RSS」、「全文」とググるとRSSを全文変換してくれるサービスが見つかります。これらのサービスで変換したRSSフィードをRSS Probeに登録すると全文フィードとして閲覧することができます。

ニューサイトのRSSのURLを調べる

下記はasahi.comの例です。iPhoneやiPodの場合は、『アサヒ・コム速報ニュース』を長押してRSSのURLをコピーします。

asahi.com（朝日新聞社）：RSS/RDFについて

iPhoneでURLをコピーする場合は、対象のニュースを長押しして、コピーをタッチ

リンクの長押しでポップアップ表示

まるごとRSS

まるごとRSSとは、RSSフィードを全文配信に変換してくれるサービスです。全文表示に変換してくれたフィードをRSSリーダーに登録すると、ニュースサイトのRSSフィードを全文記事で読むことができます。最終行に広告が入るのとRSS probeではリンク文字が読みにくくなりますが、不満要素より受けられる恩恵の方が大きいです。

RSSフィードの全文変換方法はとても簡単です。上記で取得した「アサヒ・コム速報ニュース」のURLを『フィードのURL』にペースとして、『GO』ボタンをタップします。

フィードURL入力画面

全文RSSフィード変換の下に変換後のフィードURLが表示されるので、このURLをコピーします。

全文配信変換後のフィードURL

Full Text RSS Feed Builder

こちらもRSSフィードを全文表示に変換してくれる海外のサービスです。広告もなく表示上は綺麗ですが、変換してくるフィード数が5つと制限されているので、記事数の多い新聞社の速報などには向いていません。

RSSフィードの全文変換方法はまるごとRSS同様に簡単です。上記で取得した「アサヒ・コム速報ニュース」のURLを『テキストボックス』にペースとして、『Submit』ボタンをタップします。

フィードURL入力画面

全文表示に変換後のURLが『Your New Full-Text Feed』に表示されますので、このURLをコピーします。

全文配信変換後のフィードURL

RSS Probeに登録する

１） 設定画面の左上にあるプラス（＋）をタップ

RSS Probe - 設定画面

２） フィードのURLを入力をタップ

RSS Probe - フィード追加画面

３） フィードを追加で全文表記変換後のURLをペーストして完了をタップ
（前回登録時のRSSフィードのURLが表示されているので×で削除してからペーストします。）

RSS Probe - フィード追加画面

４） 下段にRSSフィード名が表示されたら完了をタップ

RSS Probe - フィード追加画面

５） 設定画面でasahi.comが追加されているので完了で設定画面を終了

RSS Probe - 設定画面

RSS probeでの表示

下記が実際にRSS probeでの表記例です。

記事一覧

記事内容

Bloggerの表示を最も簡単にiPhoneに最適化する方法

Blogger Touchを使ってスマートフォンに最適化

私自身もBloggerでブログを書いていますが、Bloggerを使ったブログをiPhoneで閲覧していると下記のようにiPhone用の表示に最適化されているサイトが見受けられます。

Blogger Touch オフィシャルブログ

これは、Blogger Touchというサービスを利用して、bloggertouch.appspot.com/xxx（xxxは指定）にリダイレクトさせることによってiPhone用の表示に最適化しています。

Blogger Touchのサービス設定

Blogger Touchのサイトで『Mobile Edition Maker』をクリックすると




Only Three stepsと記載されているように、僅か3ステップで設定することができるとあります。

BloggerのURLを入力

これは３ステップには含まれていないようです。まず自分のブログのURLを入力します。

Step1：リダイレクトさせるURLを決める

Step2：『Add Code』をタップ

Bloggerのページ要素を追加で『ウィジェットを追加』をタップし、ブロガーに組み込みます。

Step3：『Verification』で設定を確認

Bloggerの設定でスマートフォンに最適化

Blogger Touchは、Bloggerを簡単にiPhone用の表示に最適化する方法ではありますが、現時点で最も簡単にiPhoneに最適化するには、Bloggerの 設定>メールとモバイル>モバイルテンプレート（ベータ版）で『モバイルテンプレートを表示する』を『はい』にするだけで、Bloggerをスマートフォン（iPhone, android携帯）に最適化することができます。




実際にスマートフォンでアクセスされた場合にどのように表示されるかは、スマートフォンを保有していなくても『モバイルプレビュー』から確認することができます。下記は、このブログのトップページをiPhoneで表示したものです。




各記事はこんな風に表示されます。




本文中心だけの表示でサイドバーがなくなります。しかし、Blogger Tochでスマートフォンの表示に最適化するとAdSenceが表示されませんが、Bloggerの設定でスマートフォンの表示に最適化した場合には、AdSenceが表示されます。

今日の一曲

My Wayといえば、英国訛りで♪マ～イ、ワイ！とシャウトするセックス・ピストルズ（Sex Pistols）が有名です。このMy Wayが収録されているピストルズのアルバム『Kiss This』は一聴の価値ありですが、iPhoneでインターネットラジオのスォーノ・ドルチェ（Sono Dolce）を聴いていたら、流れてきたのがYen town bandことCharaのMy Wayでした。

iTunesで購入してからCharaのボーカルであることを知りました。彼女の独特の声で切なくMy Wayを歌い上げてくれています。

My Way - Yet Town Band