Twitterをブログ記事に埋め込む方法


twitter-1566735_1280.png

1  ブログにTwitterのツイートを埋め込みたい
ブログの記事中に、Twitterの内容を使いたいときに、リンクは分けるけど、ツイートそのものをブログに埋め込む方法を紹介したいと思います。

その方法はTwitterのヘルプセンターに次のように書かれています。

ウェブサイトやブログにツイートを埋め込む方法

1 ツイート内に表示される アイコンをクリックします。

2 メニューから [ツイートを埋め込む] を選びます。

3 publish.twitter.comが開くので、[set customization options(カスタマイズ設定のオプション)] をクリックして、埋め込みツイートのデザインをカスタマイズできます。

4 そのツイートが別のツイートへの返信である場合は、[Hide Conversation(会話を非表示)] をチェックして元のツイートを非表示にできます。

5 埋め込みツイートのデザインが決まったら、[Copy Code(コードをコピー)] ボタンをクリックして表示されるコードをコピーします。 コードをブログやウェブサイトに貼り付けます。

引用元:Twitterヘルプセンター
と、説明されています。

この引用の説明では、1~5までの5ステップあるようですが、(3と4を飛ばして)「1、2、5」の3つのステップで埋め込み出来ます。
3と4のステップは、どうしても修正が必要な時にやればOKだと思います。



2  説明に従ってやってみる
では、引用の説明に従って実際にやってみましょう。

例として、最近の話題で「首相官邸のコロナウイルス」に関するツイートを取り上げました。
Twitter_kantei.JPG
ツイート画像は首相官邸(災害・危機管理情報)より

これは画像ですが、この実際のツイート画面を、ブログに直接埋め込んでみたいと思います。

引用1の説明の、画像の右上の「∨」のようなアイコンをクリックします。



3  すると・・・
次のようなポップアップが出ます。

引用2の説明の、一番上の「</> ツイートを埋め込む」を選びます。
Twitter_kantei02.JPG


4  引用付きのコピー画面が出る

Twitter_kantei03.JPG
こんな画面になりますので、引用の5の説明の、
画面の右の方にある青色に白抜きの「Copy Code」をクリックして、
自分のブログに貼り付けます。


Twitter_kantei04.JPG
なお、途中でこんなコピー完了のメッセージ画面が出ますが、右上の「☓」をクリックして閉じてください。



5  埋め込み結果
次の画面が、上の「項目4まで」での作業のTwitterのツイートのブログへの埋め込み結果です。
これで、ブログへの埋め込みが完了です。

埋め込んだツイート画面


このツイート画面の、各所の「リンク部分」や「❤いいね」や下段の「メッセージ」をクリックすると、実際のその画面が開きます。
それ以外のアイコンも、全て機能します。



6  埋め込み結果のソース
「5 埋め込み結果」は次の引用付きのソースで記述されています。

埋め込んだツイートのソース
<p class="marquee-anima">
<span>
<blockquote class="twitter-tweet">
<p lang="ja" dir="ltr">
【<a href="https://twitter.com/hashtag/%E6%96%B0%E5%9E%8B%E3%82%B3%E3%83%AD%E3%83%8A%E3%82%A6%E3%82%A4%E3%83%AB%E3%82%B9?src=hash&ref_src=twsrc%5Etfw">
#新型コロナウイルス</a> 関連肺炎について】<br>
新型コロナウイルス関連肺炎に関するプレスリリースを掲載しました。<br><br>
■横浜港に寄港したクルーズ船内で確認された新型コロナウイルス感染症について
<a href="https://t.co/XVhmS1kePI">https://t.co/XVhmS1kePI </a></p>— 厚生労働省 (@MHLWitter) 
<a href="https://twitter.com/MHLWitter/status/1225223007297138689?ref_src=twsrc%5Etfw">February 6, 2020</a>
</blockquote> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8">
</script>
</span>
</p>

なお、「首相官邸(災害・危機管理情報)」には沢山のツーイートがありましたので、項目「5 埋め込み結果」のツイート画面はすぐ下のツイートのコードをコピーしてしまったようです。
後で気づきましたが、「まあいいか!」でお許しください。



7  埋め込み画面の修正

上の引用3と引用4の説明は飛ばしたのですが、その部分を再度下に表示します。

3 publish.twitter.comが開くので、[set customization options(カスタマイズ設定のオプション)] をクリックして、埋め込みツイートのデザインをカスタマイズできます。

4 そのツイートが別のツイートへの返信である場合は、[Hide Conversation(会話を非表示)] をチェックして元のツイートを非表示にできます。


この引用部分には、埋め込みのデザインをカスタマイズする方法が書かれています。

項目「4 引用付きのコピー画面が出る」の画面の右上の「[set customization options」をクリックすると、カスタマイズ画面が現れますので、カスタマイズしたい事項をこの画面で選択してください。

なお、引用3に書かれている「publish.twitter.com」をクリックすると、
Twitter_kantei05.JPG
の画面が現れ、この画面に首相官邸(災害・危機管理情報)のツイートのアドレスの「https://twitter.com/MHLWitter/status/1225223007297138689」を入力すると、結果的にはカスタマイズ画面になります。



 以上、首相官邸(災害・危機管理情報)のツイートを例にして、Twitterのツイートをブログに埋め込む方法を説明しました。
参考になれば、ありがたいです。 

なお、Twitterのアイコンはアニメーション効果を付けると、iPhoneでは適正に表示されないようです。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 99

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • tor

    こんばんは。
    昨日拝見して気持玉ポチッだけでした。
    Twitterを埋め込んでいるブログ見かけますが
    こうやっているのですね。
    写真を傾ける方法とともに
    いつかチャレンジするかもと。
    2020年02月07日 20:45
  • わけい

    torさんへ
    コメントどうもありがとうございます。
    まあ利用する機会はそうはないかも知れませんが、人によっては多用してTwitterの内容に絡めて記事を書いている方もいます。
    もし、torさんがグルメ関係などで、Twitterの〇〇(レストラン、食堂名)に行った感想が書かれていると、それを記事で引用するなどの使い方が思い浮かびました。
    ニュースなどでもインタビューの代わりにTwitterのツイートを引用しているのも見かけます。(これは埋め込みとは無関係ですが、利用されている点は共通ですね)

    YouTubeの動画やInstagramの埋め込み方法はご存知ですか?
    こっちの方が簡単に出来ます。
    これらも取りあげようかと思いましたが、長くなりそうなのでやめました。
    Facebookまで埋め込みができるそうです。
    実際に使うかは別として、使い方は簡単なので知ってて損はないと思います。

    「写真を傾ける」は、写真を一切加工していないので、傾けたり、トリミングしたり、枠を付けたりと、1枚の写真をアップするだけで違った感じで何回でも利用でき、利用容量は増えません。
    チャレンジを楽しみにしています。

    ※塩・ゆでピーナッツは、行動範囲が狭いせいか、まだ手に入りません。
    2020年02月07日 21:49
  • ジュン

    多分・・・私出来ないと思いますが
    成程と読ませていただきました
    更新なさって出来ることもあると思い
    楽しみに拝読させていただきます
    2020年02月08日 09:49
  • わけい

    ジュンさんへ
    コメントどうもありがとうございます。
    「多分、私出来ない・・・」と、腰が引けてるようですが、いえいえ、そんなことはないと思います。
    ジュンさんのブログ記事を見ている限りでは、問題なく出来るはずです。
    ただ、使う機会があるか無いかは別ですが。
    具体的な利用方法は、今は思いつきませんが、考えれば色々ありそうな気がしますが、そのうちに使ってみたいと思います。

    2020年02月08日 21:05
  • winga

    おはようございます。
    す、す、すごーーい!!
    わけいさん凄い!!
    私でも出来そうです。丁寧な説明が非常にありがたい。
    やった!一つ賢くなりましたヽ(^o^)丿
    有難うございました<(_ _)>
    2020年02月09日 07:42
  • わけい

    wingaさんへ
    コメントどうもありがとうございます。
    そういっていただき、嬉しいです、ありがとうございます。
    wingaさんはこの画面をPCでご覧ですか?
    PCやスマホのアンドロイドならTwitterのアイコンがアニメしてるはずですが、iPhoneでは表示がちょっと変です。
    (アニメーションをやめればちゃんと表示できますが、今回はそのままにしておきました。)
    グルメやタレントや話題の〇〇などで、Twitterの埋め込みぜひ使ってみてください。
    2020年02月09日 11:09