WWW Watch

IFTTT から Blog の更新を自動で画像付きツイートするためにフィードを少し直した件

この Blog が更新された時、IFTTT から自動的に自分の Twitter アカウントに 「画像付きツイート」 を投稿するための IFTTT レシピと、投稿に意図した画像を使ってもらうためにフィード側で行った修正についてまとめました。

IFTTTこの Blog を更新した際、IFTTT から自動的に自分の Twitter アカウントに投稿するっては昔からやっていたんですが、ちょっとそのツイートを画像投稿と合わせた、所謂 「画像付きツイート」 にしようと思って、やってみた件について書いてみたいと思います。

画像付きツイートってのは、Twitter に画像をアップロードして、それへのリンクもついたツイートのことですね。なので記事へのリンクとあわせて、ツイート内に URL が 2つ入ることになります。

具体的には下記みたいなやつ。

ちなみに、この Blog は各記事ごとに Twitter カードの設定はしてありますので、単に記事の URL をツイートするだけでも、Twitter の公式サイトや Twitter カードの表示に対応したクライアントなんかでは画像も表示されます。

例えば下記のような感じで、サイトにツイートを埋め込んだ場合なんかも表示されますね。

ちなみに、Twitter カードについてはちょっと古い記事ですが下記、書いてますのでよろしければどうぞ。

ただ、Twitter 公式サイトとか Twitter 公式アプリなんかでも、タイムライン上では Twitter カードの内容は表示されず、ツイートの詳細を表示させた時に表示されるようになっているため、タイムライン上での見た目はテキストと URL だけのツイートになります。

一方、画像付きツイートにすることで、タイムライン上で画像も表示されるため (Twitter クライアントによっては表示されないかもしれないですが)、目立つことになります。それでどの程度クリックされる率とかが変わるのかも知りたかったので試してみることにしました。

IFTTT からの自動ツイート

まず、通常の自動ツイートを IFTTT からする場合、チャンネルとしては 「フィード」 と 「Twitter」 が有効になっていれば簡単にできますね。

下記のように 「フィードが更新されたら Twitter に投稿」 という IFTTT レシピを作ってやれば簡単です。

「フィードが更新されたら Twitter に投稿」 という IFTTT レシピの例

ただ、これだと、記事のタイトルと URL が投稿されるだけなので、まずはこれを少し変更しないといけません。

IFTTT から 「画像付きツイート」 を自動投稿するレシピ

IFTTT で新規にレシピを作ります。やることは簡単なのですが、まずはトリガーとして、フィードを選択し、「New feed item」 を選択して 「フィードが更新されたら」 というトリガーを作ります。

IFTTT で 「フィードが更新されたら」 というトリガーを作ります

当たり前ですが、フィード URL の部分には自分の Blog のフィード URL を入れますね。

フィード URL には Blog のフィード URL を入れます

次にアクションの設定ですが、チャンネルから Twitter を選択したら、「Post a tweet with image」 を選択します。これで画像付きツイートになります。

アクションでは Twitter チャンネルの 「Post a tweet with image」 を選択して画像付きツイートになるようにします

完成したレシピは下記のような感じになります。「フィードが更新されたら画像付きで Twitter に投稿」 という IFTTT レシピになりますね。

「フィードが更新されたら画像付きで Twitter に投稿」 という IFTTT レシピの例

EntryUrl の後ろに 「 / 」 を入れていますが、これは単にタイムライン上で 2つの URL の区切りがわかりやすいようにしているだけで、必須ではありません。

フィード側の修正

IFTTT の方は前述したレシピさえ作っておけば問題ないのですが、このままだと、画像付きツイートで使われる画像は、本文内に入っている画像で一番最初に出てきたもの (多分最低サイズは見てるっぽい) になります。でも折角、OGP とか Twitter カードを設定してるんだから、そこで指定している画像を使いたいですよね。

でも、その画像は本文内には入らない (少なくとも私の Blog では本文内で使う画像と OGP で指定する画像はほぼ分けてる) ので、意図した通りにならないのと、OGP や Twitter カードで画像は指定しているものの、実際の記事本文内には画像が入っていない場合なども同様に画像が投稿されません。

投稿されませんというか、下記がテストでしくじったやつなんですが、IFTTT の 「画像が見つかりません」 っていう画像が使われて投稿されちゃいました。

上の記事は、もちろん OGP などで画像は指定してあるのですが、本文内には画像が入っていないため、このような結果に。

で、最初は、link rel="enclosure" (当 Blog は Atom フィードなので) を使って、OGP で指定している画像を添付してやればそれ使ってくれるんじゃないかなと思って期待してやってみたら見事に上記の失敗ツイートの状態になりましたので、この手はダメと......

じゃあ、もう仕方ないので、フィード内だけ、content 要素の一番先頭 (本文の前ですね) に、OGP で指定した画像を突っ込んでやるっていう荒技 (だからフィードリーダーとかで読んでいる人にはど頭にデカイ画像が表示されるはず) で対応しましたが、それで意図した通りになりました。

実際のフィードはこちらにありますが、ソースコード見てもらえればなんとなくわかると思います。

本当は link rel="enclosure" を見てもらえるとスマートなんですけどね。まぁ仕方ないのでこれで良しとします。

で、副産物として、Feedly みたいなフィードリーダーでも、意図した画像がサムネイルとして使われるようになったのでまぁよかったかなと。

Feedly で当 Blog のフィードを表示した例。サムネイルとして画像が使われています

関連エントリー

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー