記事にTwitterのツイートを埋め込む

Blogger では Twitter で投稿されたツイートを記事に埋め込んで表示することができます。ここでは Blogger の記事に Twitter のツイートを埋め込む方法について解説します。

(2022 年 05 月 22 日公開 / 2022 年 05 月 22 日更新)

Twitterの埋め込み用コードを貼り付ける

Twitte のツイートを記事に挿入するには Twitter の画面でツイートの埋め込み用コードを取得し、記事の編集画面で「HTMLビュー」に切り替えてから直接コードを貼りつけます。

では試してみます。 Twitter の画面を開き、記事に貼りつけたいツイートを表示したあとでツイートの右上にある次のアイコンをクリックしてください。

Twitterの埋め込み用コードを貼り付ける(1)

Twitterの埋め込み用コードを貼り付ける(2)

表示されたメニューの中から「ツイートを埋め込む」をクリックしてください。(今回は Twitter にログインしていないのでメニューが一つだけですが、ログインしている場合には他にもメニューが表示されます。その場合でも同じメニューをクリックしてください)。

Twitterの埋め込み用コードを貼り付ける(3)

新しいタブが開き次のような画面が表示されます。

Twitterの埋め込み用コードを貼り付ける(4)

埋め込むツイートの背景をダークにしたり言語を変更したりする場合は「set customization options」をクリックしてください。カスタマイズを行う画面が表示されます。カスタマイズを行った場合は最後に「Update」をクリックして下さい。

Twitterの埋め込み用コードを貼り付ける(5)

Twitterの埋め込み用コードを貼り付ける(6)

埋め込み用コードを取得するには「Copy Code」をクリックしてください。

Twitterの埋め込み用コードを貼り付ける(7)

ツイートの埋め込み用コードをコピーしました。

Twitterの埋め込み用コードを貼り付ける(8)

なお今回取得したコードは次のようなものでした。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはよう!<a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#東山動植物園</a> <a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#シセンレッサーパンダ</a> <a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#レッサーパンダ</a> <a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#ずん</a> <a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#絶滅危惧種</a> <a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#動物園</a> <a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#名古屋</a> <a href="https://twitter.com/hashtag/(省略)?src=hash&ref_src=twsrc%5Etfw">#毎日レッサー</a> 最終日 <a href="https://t.co/ak8UsqMz50">pic.twitter.com/ak8UsqMz50</a></p>— 名古屋市東山動植物園 (@higashiyamapark) <a href="https://twitter.com/higashiyamapark/status/1527439062562398219?ref_src=twsrc%5Etfw">May 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

それでは記事にコードを挿入します。記事の編集画面を表示し、「HTMLビュー」へ切り替えてください。

Twitterの埋め込み用コードを貼り付ける(9)

地図を埋め込みたい位置に先ほど Twitter の画面で取得した埋め込み用コードを貼り付けてください。

Twitterの埋め込み用コードを貼り付ける(10)

「作成ビュー」へ切り替えると埋め込み用コードを貼り付けた位置に Twitter のツイートが埋め込まれているのが確認できます。(ただし編集画面では実際の表示とは異なる形で表示されています)。

Twitterの埋め込み用コードを貼り付ける(11)

記事を更新し、その後でブログに表示された記事を表示してみると、記事に Twitter のツイートが埋め込まれているのが確認できます。

Twitterの埋め込み用コードを貼り付ける(12)

-- --

Blogger の記事に Twitter のツイートを埋め込む方法について解説しました。

( Written by Tatsuo Ikura )

広告
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。