【Blogger】画像クリックでリンクに飛べるカード形式で、Twitterへ記事の自動投稿をする方法・2022年版

ここまでのあらすじ


日々ブログを更新して、Twitterで自動投稿するようにセットしているのですが、リンクをクリックしにくくて見辛いよな...と薄々感じていました。

Twitterの投稿
このでっかい画像をタップしても記事に飛べるわけじゃなかった。


よく見かける、サムネイルをタップするとそのまま記事に飛べるリンク、ありますよね。

あれをやりたいぞ( ˘ω˘ )

ということで調べてみました。



手順

1. IFTTTのアカウントを登録し、BloggerとTwitterのレシピを生成

本記事ではIFTTT側のアカウント登録方法や、詳細な設定手順については割愛します。

こんな感じで、「Bloggerに新規投稿があったら、ツイートする」というレシピを作っておきましょう。

※この時、「画像と共にツイートする(Post a tweet with image)」を選ばないように!
画像なし(Post a tweet)の方を選びましょう。

IFTTTのBloggerとTwitterの連携設定画面


投稿内容はご随意に。
必ず、Add ingredientからPostUrlを含めるようにしましょう。

IFTTTのTwitter設定画面



2. Blogger側での設定

テーマ > HTMLを編集を開き、
以下のコードを</head>の直前に埋め込みます。

Twitterアカウント(4行目)と、画像が見つからない場合のサムネイル画像URL(18行目)は、適宜変更してください。



3. Card Validatorで動作確認

無事に設定できたかは、わざわざ新しい投稿をいくつも作って確認しなくても大丈夫です。

Twitterの開発者向けツールの、Card Validatorを開き、自分の過去のブログ記事のURLを適当に貼ってみましょう。

これでカードが想定通りに表示されればOKです!

TwitterのCard Validator
そうそうこういう感じに出したかった!!!



4. いざ投稿

IFTTT側で設定した投稿文言と、リンクから生成されるTwitterカード、どちらもいい感じに表示されるか、テスト投稿です。

Bloggerでブログ記事更新時に、Twitterカード形式で自動投稿する方法
できてる!!!!!


やったね!!!!



まとめ

今回ちゃんと調べてみるまで、Twitterカード形式で表示するには、
IFTTT側で色々設定する必要があるかと思っていたのですが、
Webサイト側で設定すればよかったんですね。

また一つ賢くなれたね٩( 'ω' )و

ますますTwitterから読みやすく設定できたので、よかったよかった。



参考