BloggerをTwitterカードに対応&&IFTTTでTwitterに自動投稿

まずこれが結果。

URL : https://twitter.com/shonanholic

これをやるためにやったことは大きく二つ。

ブログをTwitterカードに対応
IFTTTで自動投稿設定

ブログをTwitterカードに対応

Twitterカードとは、Twitter上で記事の画像、タイトル、概要などがまとまって表示される枠の部分のこと。

これをするにはブログのhtmlタグを少しいじる必要があった。

htmlタグの属性に以下を追加

prefix='og: http://ogp.me/ns#'

次にheadタグ内に以下を追加

<meta content='summary' name='twitter:card'/>
<meta content='@shonanholic' name='twitter:site'/>
<meta content='@maaaaaaeda' name='twitter:creator'/>
<meta content='data:blog.url' property='og:url'/>
<b:if cond='data:blog.postImageUrl == &quot;&quot;'>
<meta content='https://4.bp.blogspot.com/-8fvk-2oThZs/WLlHBWjnKEI/AAAAAAAAH_w/rui46WzJiFwP1WRZAMXSmFlP40uhACROwCK4B/s151/10881490_835995916457812_2409058102452638914_n.jpg' property='og:image'/>
</b:if>

やったことは以上。

上記の追加により、Twitterカードに表示されるものは以下のとおり。

記事内の最初の画像（youtubeのサムネイル含）が表示される。

youtubeのサムネ含む、記事内の画像を表示することに関してはmetaタグで指定しなくてもtwitterがよしなにやってくれる模様。
上記metaタグにて、記事内の画像がない場合（postImageUrlが空の場合）はプロフィール画像を表示するように指定している。（挙動の確認結果は以下参照）これをしないと、記事内に画像がない場合、twitterカード内に画像が何も表示されなかった。

記事タイトルが表示される。

metaタグで指定していないがtwitterがよしなにやってくれる模様。

記事概要が表示される。

Bloggerの記事作成時に[検索向け説明]に記入した内容がここに表示される。
[検索向け説明]を記入しなかった場合は、ブログ全体の説明文言がここに表示される。

ドメインが表示される。

metaタグで指定したとおり。

以下は確認ツール（https://cards-dev.twitter.com/validator）で各投稿パターンを確認した時のもの。

ブログのトップURL（https://shonanholic.blogspot.jp/）の場合は、プロフィール画像が表示される。概要のところにはブログ全体の説明文言が表示される。

記事内に画像がない場合（https://shonanholic.blogspot.jp/2010/12/p.html）は、プロフィール画像がカード内に表示される。

記事内に画像がある場合（https://shonanholic.blogspot.jp/2017/03/blog-post_1.html）は、画像がカード内に表示される。

記事内にyoutube動画が貼ってある場合（https://shonanholic.blogspot.jp/2017/03/blog-post_5.html）は、youtubeのサムネイル画像がカード内に表示される。

これでTwitterカードはおk。

IFTTTで自動投稿設定

Twitterで自動投稿するのにfeedburnerも使ってみたけどURLが短縮されてTwitterカードが表示されなかったのでイマドキ風のいけてるIFTTTを使ってみた。
（feedburnerはbloggerの記事に指定されたラベルをハッシュタグとして投稿内に設置してくれる機能があるっぽかったけどそれも動かなかったorz... オワコンなのかも）

IFTTTは登録から設定完了まで一瞬で終わった。

使ったレシピはこれ。
https://ifttt.com/applets/29284p-share-your-new-blogger-posts-to-twitter

まずTwitterとBloggerの認証通してから.....

Turn on

からの

投稿内容の設定。
ここでは単純にPostContent（投稿内容）とPostUrl（URL）をTwitterに投稿させるようにした。URLが投稿できればTwitterカードが表示されるので。

※以下の画像では +Ingredient ボタンの下に、投稿内に含められるBlogger記事情報を表示している。ImageUrl（記事内の最初の画像のURL）や、Labels（コンマ区切りのラベル文字）などが取得できる模様。
（参照 : https://ifttt.com/channels/blogger/triggers/133-any-new-post）

最後に、念のためにIFTTTの設定で、URLが短縮されないようにしておいた。（feedburnerのgoo.glでtwitterカードが表示されなかったので...）

たつおの日記

このブログを検索