今回はBloggerにTwitter Cardsを設定する方法についての記事です。
Bloggerのカスタマイズに詳しい方は、適当にそこら辺にある記事を漁れすぐわかるものでしょう。
でも、僕は今まで
「Bloggerのタグなんざ学んでも他のとこで使えねーから絶対やらんぞ!!」
っていうスタンスだったので、予想以上に時間がかかりました。
たしか夕方から初めて6時間ほど。
いまこうして記事を書いてるのも深夜です。
眠い。そして寒い。
怠惰が余計な時間を取らせました。
急がば廻れ。
遠回りこそ最大の近道である。
コピペで一発!!Twitter Cards for Blogger!!
簡潔にいきます。
まずTwitter Cardsに関しての概要は以下参照。
Twitter Cards — Twitter Developers
https://dev.twitter.com/cards/overview
今回は「Summary Card」を使いますので、そこらへんに関して重点的に目を通してみて下さい。
すると、サンプルコードには色々な設定項目があります。
どうやらこういうものをBloggerに貼り付ければいいらしい、と。
しかし、このコード通りだと、静的なCardsしか作れません。
つまるところ、動的なものにしたい場合、自分で色々いじらないといけないわけです。
で。
その値の取得をするためにはサービスごとに独自の設定方法を学ぶ必要がありまして。
こちらが値の取得などについて書かれた、Bloggerのカスタマイズ全般に関するドキュメントなります。
「Blogger レイアウトデータタグ」
https://support.google.com/blogger/answer/47270?hl=ja
「Blogger レイアウト用ウィジェットタグ」
https://support.google.com/blogger/answer/46995?hl=ja&ref_topic=6321969
とはいっても、コードをみるだけでは僕みたいな専門家でも何でもない人間にはちんぷんかんぷん。
いつも通りGoogle大先生に訪ねました。
そんでもって、いろいろ見て回った結果、こちらのブログに到着。
ただ、このままだとTwitterCardsに表示される内容に難があったので、公式ドキュメントを参考にコードを書き換え。
そして実際に使用中のコードがこれ。
<!-- Twitter Cards-->
<meta content='summary' name='twitter:card'/>
<meta content='@自分のTwitterID' name='twitter:site'/>
<b:if cond='data:blog.pageType == "index"'>
<meta content='Indexページ用固定画像のURL' name='twitter:image'/>
<meta expr:content='data:blog.title' name='twitter.title'/>
<b:else/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:blog.pageName + " | " + data:blog.title' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
「自分のTwitter〜」と「Indexページ〜」の部分を各々書き換えて、これを上のブログ通りの場所に貼り付ければおーけー。
あとはTwitter Cardの公式ドキュメントにあるようにCard validatorでテストしましょう。
Card validator
https://cards-dev.twitter.com/validator
以下、実際の動作。
■Indexページの場合
■記事などの個別ページの場合
このコードの問題点としては、各ページに貼り付けられた最初の画像を拾ってTwitter Cardsに表示するので、そのページに画像がない場合はImageに何も表示されなくなるところ。
なので、その場合は別に指定してあげる必要があります。
もし記事に画像を貼らない場合は、if分岐させないで、単一の画像を指定してあげればよいかと。
それ以外の方法は調べるなりなんなりして試してみて下さい。
では、これにて。
健闘を祈ります。