>--> 連携 | クリボウの Blogger Tips

クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

Home > 連携

連携

Blogger ブログを Twitter Cards に対応させる方法

Posted at: 2013-06-15 Label: , , 130

このブログに

いつも楽しく拝読しています。
ところで、Twitter CardsのSummaryができるかBloggerへMetaタグを入れてみたのですがサムネイル画像が出なく、クリボウ様のサイトに情報ないかなぁと思い来てみた次第です。
もし、次のネタが決まっていないのなら、この辺りを記事にしていただければ嬉れしゅうございます m (_ _) m
というコメントが入っていたので、やってみたところ

Twitter Cards (Summary) を Blogger に適用する方法

できました。導入方法をこちらでまとめておきたいと思います。


Twitter Cards って何?

最初に Twitter Cards についてです。上の画像を見て分かるかと思いますが、Twitter のツイートに URL が含まれたときにそのリンク先ページのタイトルや要約、画像を自動的に挿入してくれるのが Twitter Cards の機能です。

これを表示させるためには、リンクされるブログの方で Twitter Cards に対応したメタタグをブログテンプレートに記載しておかないといけません。Facebook の OGP(Open Graph Protocol)と同じようなものと言うと理解しやすいかもしれません。

今回はシンプルな Summary Card の導入についてみていきます。参考にさせてもらったのはこちらのサイト。ありがとうございます!


導入方法

早速、Twitter Cards 用のメタタグを用意します。クリボウが使用したのは次のタグです。

<meta content='summary' name='twitter:card'/>
<meta content='@kuribo_blogger' name='twitter:site'/>
<meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
<meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>

2 行目赤字部分には、ブログに関する Twitter のアカウント名を入力します。これはオプションなので、特にアカウントがない場合には行ごと削除してかまいません。他の行は、どのブログでも通用するよう Blogger のテンプレート用データタグを使用しているので、そのまま使えるはずです。これらのメタタグを Blogger の管理画面「テンプレート > HTML の編集」で <head> のすぐ後に貼り付けて保存します。

その後、Twitter Developers で Twitter Cards の申請を行います。

「Card Catalog」のポップアップが出たら「Summary」を選択、「Validate & Apply」タブを押して、自分のブログの好きな投稿の URL を入力して「Go!」を押してください。

Twitter Cards (Summary) を Blogger に適用する方法

ここで、ブログの Twitter Cards 対応状況が確認できます。右側にはプレビューが表示されます。「Standard Tags」の項目がグリーンだったら、ブログ側の設定は問題なしです。

「Request Approval」を押して申請画面を開きます。Twitter アカウントなど、必要事項を記入して(ほとんど入力済みだと思います)「Register Domain」ボタンを押します。これで全作業が終了です。意外と簡単なんじゃないでしょうか。

これで Twitter 経由のアクセスが少しでも増えるといいですね。


技術的なことなど

ここから先は、気になる人だけ読んでください。先ほどのメタタグについての解説です。

1: <meta content='summary' name='twitter:card'/>
2: <meta content='@kuribo_blogger' name='twitter:site'/>
3: <meta expr:content='data:blog.pageName + &quot; | &quot; + data:blog.title' name='twitter:title'/>
4: <meta expr:content='&quot;http://bloggerspice.appspot.com/postimage/&quot; + data:blog.url' name='twitter:image'/>
5: <meta expr:content='data:blog.metaDescription' name='twitter:description'/>

Twitter Developers のドキュメントで例示されていたメタタグを Blogger ブログ用に調整してみました。タグ内の属性が読みにくいのは、Blogger の HTML エディタが属性をアルファベット順に並べ替えてしまうので、混乱を避け最初からその順にしているためです。


1.まず、どの行でも、meta タグの最後に / を入れておきます。こうしておかないと Blogger の HTML エディタが

XML の解析中にエラーが発生しました。行 ***、列 ***: The element type "meta" must be terminated by the matching end-tag "</meta>".

と、meta タグが閉じていない旨のエラーを出してしまいます。


2.3 行目のページタイトル欄は、Blogger のテンプレート用データタグを使って「(投稿タイトル) | (ブログタイトル)」という設定にしています。区切りの文字「|」は変更可能です。Blogger 標準のページタイトル「(ブログタイトル): (投稿タイトル)」を使いたい場合は青字部分を data:blog.pageTitle に変えるといいと思います。

参考:
3.4 行目のページの画像については、BloggerSpice という Web アプリを利用しています。http://bloggerspice.appspot.com/postimage/ に投稿 URL を付加して(メタタグ内ではページの URL を示すデータタグ data:blog.url を連結)アクセスすると、投稿内の最初の画像へとリダイレクトしてくれます。これがめちゃくちゃ便利です。

参考: ちなみに、data:blog.postImageThumbnailUrl というデータタグを使って、投稿のサムネイルを取得するという方法もあるにはあるんですが、その場合 Blogger 以外にアップロードした画像が反映できないのと、画像サイズが 72 x 72 ピクセルで小さいのとで、今回は採用しませんでした。


4.最後の行では、そのページの説明文を指定しています。Blogger では、2012 年から投稿ごとのメタデータ(descriptions)を投稿エディタから指定できるようになりました(参考1・参考2)。そのデータを持って来られないかな?と思い data:blog.metaDescription というデータタグを入れてみたところ、上手くいきました。めでたしめでたし。

Blogger の投稿から Google+ へのメンションが可能に

Posted at: 2012-12-22 Label: , , 5

Blogger の投稿編集画面を開くと、こんなお知らせが。

ブログから Google+ プロフィールやページを呼び出して、投稿について知らせることができるようになりました。開始するには、ブログを Google+ に接続します。詳細についてはこちらをご覧ください。
Blogger に、Google+ のプロフィールやページへメンションを飛ばすための新機能が登場したようですね。

実際にどのように動くかについては、次の動画の 02:16 あたりから見ると分かりやすいと思います。


投稿編集画面の本文中に @ や + をつけた Google+ プロフィール名や Google+ ページ名を記述すると、簡単にリンクを張れるようになっています。メンションを付けられたユーザーには、Google+ ページ内で通知が届く、はず。

Google+ と Blogger との連携がどんどん進んでいきますね。Blogger アカウントを Google+ と接続させているユーザーは、一度試しにやってみたらいいんじゃないでしょうか。(Google+ ページ +クリボウの Blogger Tips 宛てに実験してみるというのも可です。)

Google+ に日本の Blogger ユーザーのためのコミュニティが登場

Posted at: 2012-12-10 Label: , 5

Google+ Community Blogger Japan

今月、Google+ に新しくコミュニティ機能が追加されたんですが、

Bloggerのコミュニティはいっぱいあるけど、Japanは無いんだな…… +クリボウの Blogger Tips さんが作ってくれないかなー。
というつぶやきをいただいたので、さっそく作ってみました。「登場」とか書いておきながら、自分の作成したコミュニティなんです、はい。

作成した Google+ コミュニティ「Blogger Japan」は、日本の Blogger ユーザーのためのコミュニティです。現在用意している投稿のカテゴリは、「はじめまして」、「Blogger 情報」、「質問・回答」、「その他」の 4 種類。 参加は、Google+ の個人アカウント、Google+ ページアカウントのどちらでも可能です。カテゴリ「はじめまして」への投稿も特に必須というわけではないので、気軽にコミュニティに参加してもらえるとうれしいです。

なお、Google+ のスパム判定がけっこう厳しいようで、投稿してもすぐには公開にならない場合があります。投稿したはずなのに本文が表示されないという場合は、管理者が承認するまでしばらくお待ちください。

コミュニティ管理者のアカウントですら、このありさまですから…涙

Google+ Community Spam Detection

ということで、新しい Google+ コミュニティ、どうぞよろしくお願いします。

Blogger 公式 Android アプリ、iOS アプリがともにアップデート

Posted at: 2012-11-24 Label: , , , 1

Image by Blogger Buzz

Blogger 公式の Android アプリ、iOS アプリがどちらも更新されています。どちらもバージョンは 2.0。

Blogger Buzz によると、

  • 画面横向きの投稿作成をサポート
  • Google+ へ簡単に共有できる
  • スケジュール投稿の時刻表示
  • 30 以上の言語に対応
  • iPad に対応
といった点が新しくなったとのこと。すでに
  • 投稿を作成して下書きとして保存したり、すぐに公開する
  • 保存した投稿や公開した投稿の一覧を表示する
  • アカウントやブログを切り替える(複数ご使用の場合)
  • ギャラリーから画像を埋め込んだり、アプリで直接写真を撮る
  • 投稿にラベルを付ける
  • 場所情報を追加する
といったことはできるようになっているので、パソコンでのブログ更新とほぼ同じことがスマートフォンからも行えるということかと。

それぞれのアプリのダウンロード&インストールはこちらからどうぞ。

あと、iOS 版は端末からアプリを更新しても使えないという情報もあったり。削除して、インストールし直すのが吉だとか。

YouTube の動画共有先選択肢に Blogger が出なくなっています

Posted at: 2012-09-30 Label: , 12

Blogger が共有先に含まれなくなった YouTube の「共有」オプション画面

こちらの記事で知った情報。(ありがとうございます。)

YouTube の動画共有先の選択肢に Blogger が含まれなくなっていますね(以前はこんな感じ)。共有先最上部には Facebook、Twitter、Google+ の 3 つしか出ていないので、「その他」を選んでみたところ、そこにも Blogger は見当たらず。Ameba、楽天ブログ、mixi、tumblr、Yahoo! Japan、ウェブリブログ、goo なんかはあるんですけどね…。

今後、Google の中で Blogger がどう位置付けられていくのか、ちょっと心配になったり。

ちなみに、実際に Blogger ブログへ YouTube 動画埋め込みたいときには、上記 YouTube 画面「共有」ボタンから、「埋め込みコード」ボタンを押し、表示されたコードを直接 Blogger の投稿エディタの投稿本文欄に貼り付ければ OK です。

FeedBurner で購読者数が 0 になる不具合

Posted at: 2012-09-24 Label: , , 8

Blogger が ATOM フォーマットでしかフィードを発行していなかった時代、RSS フィードを発行するために FeedBurner を使うというのが一つの定石のようになっていました。Google による FeedBurner の買収、その後の Blogger 公式の FeedBurner へのフィードリダイレクト機能の追加、FeedBurner による AdSense For Feeds 開始といった流れの中で、現在 FeedBurner のサービスを利用している Blogger ユーザーはかなりの数に上るはず。

FeedBurner で購読者数が 0 になる不具合

そんな FeedBurner で、フィードの購読者数やリーチ数が 0 と表示されるという不具合が起きています。これを知ったきっかけはこちらのブログ。ありがとうございます。

実際に FeedBurner サイトを見に行ってみると、上の画像の通り、クリボウのブログのフィード購読者数もすべて 0 になっていました。このブログ「クリボウの Blogger Tips」のフィードを選んでみても、この通り。

FeedBurner で購読者数が 0 になる不具合

「September 17」に「24,910 subscribers」あったグラフが、「September 18」には「0 subscribers」になってしまっています。フィード自体はちゃんと機能しているようなのでクリボウは特に困っていないんですが、日々の購読者数やリーチ数のチェックを日課にしている人なんかには痛手かと。

FeedBurner に関連していうと、feedburner.jp ドメインの失効(2012 年 7 月、参考)、Twitter 上の FeedBurner アカウントの更新停止(2012 年 7 月、参考)、AdSense For Feeds ブログの更新停止(2012 年 7 月、参考)、FeedBurner API の停止(2012 年 10 月予定、参考)と、ここのところ立て続けに停止・停止予定が相次いでいます。そのため、今回の不具合も FeedBurner 自体がサービス停止する予兆なのでは?という憶測が一部インターネットで流れていますが、今のところそういう事実はないようです。

FeedBurner の公式ブログ

によると、FeedBurner チームもこの問題を調査し、現在回復に向けて取り組んでいる最中だとのこと。FeedBurner の恩恵に与っている Blogger ユーザーとしては、回復を信じて気長に待つしかないようです。


追記(2012-09-30):

Ataka さんから、FeedBurner の統計機能が復活したとのコメントいただきました。(ありがとうございます。)
この間の FeedBurner の統計機能の状況変化については、Ataka さんの記事が参考になると思います。

Google Reader に「Send to Blogger」機能

Posted at: 2009-08-14 Label: 5

で知った Google Reader の新機能。

Send to Blogger on Google Reader

画像のように、Google Reader で閲覧している記事の末尾に「Send to」リンクが表示されます。リンクをクリックし「Blogger」を選ぶと、Blogger の「BlogThis!」ページが表示されて、見ていた記事の内容が入力欄に記入されます。他人の記事に刺激を受けたその場で、Blogger の投稿画面が開けるのがいいですね。

この「Send To」機能、今のところ Google Reader の表示言語を英語にしておかないと有効にできないようです。機能を有効にするには…

Send to Blogger on Google Reader

1.Google Reader を開き「設定 > 各種設定」画面の「言語」を「英語 - English」にします。
2.再び「Settings(設定)」から「Send To」タブを開いて、「Blogger」のチェックボックスにチェックを入れます。

これでおしまいです。「設定を保存」なんかのボタンもありません。Google Reader を使っている人はぜひ一度お試しください。

Blogger に Google Gadgets 貼り付け機能が正式採用

Blogger ブログへの Google Gadgets 貼り付け機能については、Draft に登場したときにこのブログで一度記事にしたんですが、ついにこの機能が Draft を卒業して、正式採用されました。

YouTube にも解説動画が上がっています。



個人的に気になったのは、ガジェット追加の手順についてです。
Blogger in Draft にこの機能がついた当初は、

ブログへのガジェットの追加は、Blogger in Draft からブログの管理画面「テンプレート > ページ要素」画面を開いて「ページ要素を追加」リンクをクリック。
(画像略)
ガジェットウィジェットの「ブログに追加」ボタンを押すと…
(画像略)
何万ものガジェットの中から、ブログに追加するものを選ぶことができます。
という手順だったんですが、今回の機能では

 1.ブログの管理画面「レイアウト > ページ要素」画面を開いて「ガジェットを追加」リンクをクリック。
 2.ブログに追加するガジェットを選択し「+」アイコンをクリックする。

という方法に変わっています。
1クリック減っただけかというとそうではなくて…。1の「ガジェットを追加」リンクを押して出てくる画面を見てもらうとわかるんですが、



これまでこのブログで「ウィジェット」と呼んでいた(Blogger では「ウィジット」と表記していた)、「ブログリスト」「ラベル」「ブログアーカイブ」のような Blogger 標準のページ要素も全て、「基本ガジェット」と呼ばれるようになったということ。これらの要素を追加する場合にも「ガジェットを追加」リンクを経ることになります。

これまでだと、ガジェット追加にはガジェットウィジェットを利用していたので「Google ガジェットを Blogger ウィジェットとして貼り付け」という表現ができたんですが、ウィジェットもガジェットに含まれるということになると、それもできませんね。

今後「ウィジェット」という言葉自体が「ガジェット」に書き換えられていくのかも知れません。Blogger 関連の記事を書く人は注意が必要かと。


一人で勝手に考え込んでしまったんですが、ともかく、Google Gadgets のブログ貼り付け機能、ぜひ活用してみてくださいね。

Blogger in Draft で Google ウェブマスターツールへの登録が簡単に

ご存知のとおり、Google ウェブマスターツールは、Google 検索エンジンに自分のブログやサイトの情報を伝えるためのサービスです。

以前このブログでも登録の仕方を紹介したんですが、今回 Blogger in Draft からブログの登録ができるようになりました。



Blogger in Draft マイレポート の下の方に、「その他の項目」として「ウェブマスターツール」というリンクが追加されています。ここから確認画面に進んで承諾すると、自分のブログ全てが Google ウェブマスターツールに登録されます。しかも、その後新規作成したブログも次々にウェブマスターツールに追加されていきます。これはなかなか便利です。

これで、Google 検索経由のアクセスが増えるといいですね。


関連:

iGoogle で Blogger 投稿ができるガジェット「Blogger Post Gadget」

Posted at: 2008-06-09 Label: , , 8



iGoogle をブラウザのデフォルトページに指定している人も多いと思うんですが、iGoogle で簡単に Blogger の記事を投稿できるガジェットが、Blogger in Draft ブログ上で公開されています。

導入は、上記リンク先の「+ Google」リンクから。もちろんこのガジェットを利用するためには iGoogle で使用しているアカウントと Blogger ブログのアカウントが一致している必要があります。

現在、このガジェットがサポートしている機能はこちら。

  • 記事のタイトル、本文、ラベルの HTML 編集。
  • ドロップダウンメニューから投稿ブログを選択可。
  • 「すぐに公開」「下書き」を選択可。
文字以外の、画像投稿、動画投稿、リッチテキスト編集などには対応していないので、それらを使いたい場合には、「下書き」を選択して、後でその記事を編集するといいらしいです。…って少し手間ですね。

このガジェットの注意点はこちら。

  • ログインの関係上、今のところ iGoogle 以外の場所では機能しない。
  • このガジェットは、JavaScript Google Data API for Blogger を利用しているため、現在 Apple の Safari では動かない。
  • 現在、Internet Explorer では動かないという報告もあり。
このガジェットの、これから改良の可能性がある箇所はこちら。

  • Blogger の全言語への対応(各項目の「Title」「Body」「Labels」などの表記。タイトルや本文自体は、日本語も難なく通ります。)
  • ラベル指定のオートコンプリート機能。
  • 投稿自動保存機能
  • リッチテキスト編集
色々と制約はあるものの、思い立ったときに気軽に投稿できるところがいいですね。ぜひぜひ一度お試しくださーい。

Blogger に Google Gadgets 貼り付け機能が追加

Blogger in Draft に新しいウィジェットが追加されています。その名も「ガジェットウィジェット」。Blogger ブログに Google Gadgets が簡単に貼り付けられるようになったというわけです。

ブログへのガジェットの追加は、Blogger in Draft からブログの管理画面「テンプレート > ページ要素」画面を開いて「ページ要素を追加」リンクをクリック。



ガジェットウィジェットの「ブログに追加」ボタンを押すと…



何万ものガジェットの中から、ブログに追加するものを選ぶことができます。

もちろん以前お伝えした Blogger Play もブログに追加することが可能。Blogger Play がガジェットになったとき、Blogger Buzz のサイドバーに Blogger Play が表示されていたのが気になっていたんですが、どうやらこの新ウィジェットのテストだったみたいです。

このガジェットウィジェットを活用すれば、Blogger ブログのカスタマイズの幅は非常に大きくなりますね。ということで、ぜひぜひどうぞ。

「Blogger Play」が iGoogle 用ガジェットに

Posted at: 2007-10-13 Label: , , 10

Blogger ブログで投稿された画像のスライドショー「Blogger Play」が、iGoogle 用のガジェットになりました。

ガジェットの追加はホームページのカスタマイズからどうぞ。

Blogger Play Gadget

このガジェット、Blogger Play サイトと違うのが次の点。

  • 「戻る」「再生/停止」「進む」「表示速度」のメニューはカーソルを合わせるまで出てきません。
  • 呼び出す画像が小さい(サイトは最大 720 ピクセル、ガジェットは 320 ピクセル)のでサクサク表示。
クリボウはもっぱら iGoogle で Blogger Play を楽しむことになりそうです。みなさんもぜひどうぞ。


関連:

Blogger から FeedBurner へのリダイレクトが可能に

Posted at: 2007-07-12 Label: , , 7

Blogger と FeedBurner

Blogger ブログに RSS フィードがついたのは 2006 年の 5 月。それまでは Blogger で RSS を使うのに、みんな外部の FeedBurner を利用していました。当時は Blogger Help でも「RSS は FeedBurner を使ってね」と書いていましたしね。

フィード管理がとても便利なので、Blogger 標準で RSS が用意されている現在でも、FeedBurner のフィードを利用しているユーザーは多いはず。

そんな FeedBurner なんですが、Google に買収されたとの発表が、先月ありました。


Blogger から FeedBurner へのリダイレクト

そして、今回のニュースです。Blogger フィードから FeedBurner フィードへのリダイレクトができるようになりました。いずれ統合されるとは思っていましたが、思ったより対応が早かったですね。

たとえば「クリボウの写真日記」で言うと、kuribo-photo.blogspot.com/atom.xml や kuribo-photo.blogspot.com/feeds/posts/default にアクセスするとそのまま FeedBurner で作ったフィード feeds.feedburner.com/kuribophoto に飛ばしてくれます。

フィードへのアクセスを一元化することができるので、どこからのアクセスが多いかなど、FeedBurner でアクセスの統計をみるのに便利です。リダイレクトの場合、読者にフィードリーダーに登録しているフィードを変更してもらわなくてもいいので、便利ですね。

ちなみにこのリダイレクトのステータスコードは「302 Moved Temporarily」。「301」のようにフィードリーダー内のフィード URL 情報が書き換えられてしまうことはないので、いつでも元に戻せて安心です(参考)。


フィードのリダイレクト設定方法

前置きが長くてすみません。設定方法です。



Blogger 管理画面「設定 > サイトフィード」ページ、「Post Feed Redirect URL」(まだ日本語化されていません)項目のテキスト入力部分に、FeedBurner で作ったフィードの URL を入力して「設定を保存」ボタンを押すだけ。

(この仕組みを使えば、FeedBurner 以外にも Yahoo! Pipes を通したフィードにリダイレクトさせるなんてことも可能です。)


「FeedBurner をもっと活用したい!」という人はぜひぜひお試し下さい。

Blogger の画像投稿が Picasa ウェブアルバムと連携

Posted at: 2007-03-09 Label: , , 8

Picasa ウェブアルバムが大幅にバージョンアップしています。

気になる変更点がこちら。
  • 容量アップ。
  • 検索機能の追加。
  • Blogger の画像投稿機能との統合。
容量の拡大

無料ユーザーの画像の容量が 250MB から 1GB になりました。1GB とは太っ腹。枚数に制限はないようなので、一画像あたりのファイルサイズを抑えれば、写真が何千枚とアップできますね。

検索機能

これまで Picasa Web Albums では自分のアップロードしたアルバムの URL を他人に教えるというぐらいで、他の人の写真を検索するということが出来ませんでした。これで Flickr みたいに、写真で世界中の人とつながることができそうですね。
今のところ、Picasa Web Albums の表示言語を英語にしないと検索窓が出てこない模様。また、自分の写真を他人から検索できるようにするには、英語表示にした後「Settings」から設定を変更する必要があります↓

  

Blogger との連携

Blogger ブログへ投稿した画像が Picasa Web Albums で管理できるようになりました。記事投稿画面からの画像投稿の手順は今までどおりですが、登録した画像が自分のアルバムに表示されます↓
Blogger の画像アップロード画面に表示されていた謎の Picasa 規約にもやっと納得がいきました(参考:@aka さんの記事)。今のところ Blogger に投稿した画像のアルバムの方も、表示言語を英語にしないと見られないようです。

  

これだけ便利になると、今後 Flickr から Picasa へと、ユーザーの移動が増えそうです。そのついでに Blogger 人口も増えるといいですね。

(ちょうど Flickr から Picasa への引越し作業中だったので、今回のニュースにはびっくりしました。クリボウのウェブアルバムはこちら。写真の方もたまに見てもらえるとうれしいです。)

© 2005-2014 Kuribo. Powered by Blogger.