ツイッターのツイートをブログに組み込む方法は案外カンタン

ほかの人のブログにツイッターの四角い枠が表示されていて、それを私もやってみたいの。
と、質問を受けました。

ツイッターの投稿記事が、ブログに表示されているのを見て、かっこいいので自分もそれをやってみたいんそうです。
こんなのです。　↓

春が来たー！
札幌にも春が来たー！

パンジーもビオラも咲いてました。
お花をみると、ウキウキわくわくしますね。
花のパワーを感じて、お仕事がんばるよー。

会社近くのアパートで咲いてました。#菊水 pic.twitter.com/3Yw3VDkoCm

— 白藤沙織 小さな会社のWeb屋 (@writersakko) April 18, 2019

こんにちは。小さな会社のWeb屋さおりんこと、白藤（しらふじ）沙織です。
ツイートをブログに表示させるのは割りとカンタン。

さっそくやってみましょう～～♪
あっ、ツイッターのスマホアプリではできないみたいなので、パソコンで操作してくださいね。
ここでは、ワードプレスを例にあげて書いてみます。

なお、専門家ぽくいうと「ツイートを埋め込む」と表現します（この埋め込みってコトバをなんとなく覚えておくと、Web屋とも話が通じやすくなり何かと便利だよ）

手順1 ブログに埋め込みたいツイートを表示する

まずはWebブラウザでツイッターを表示して、埋め込みたいなって思っているツイートを表示します。自分のツイートでも、ほかの人のツイートでも同じ方法で埋め込むことができます。

ツイートの右上をよーく見ると、矢印が表示されています。その矢印をクリックして【ツイートをサイトに埋め込む】を選択します。

手順2 表示されたコードをコピーする

【このツイートをサイトに埋め込む】ウィンドウが表示されます。

ここまでがツイッターで行う作業です。

で、コピーしたら、すぐにワードプレスの管理画面を開きます。
なぜ「すぐ」かというと、ここで「そうだメールを確認しなきゃ」とか別のことをしちゃうとついつい違うものをコピーして、いざ貼りつけるときに別の文字が貼りつけられたってことになるからです。（私だけですか）で、もう一度ツイッターでやり直しする羽目になるという。。。(^▽^;)

手順3 ワードプレスの管理画面を開いて、ツイートを埋め込みたいブログ記事を表示する

ワードプレスの管理画面にアクセスして、ツイートを埋め込みたいブログ記事を開きます。
もしくは、新しくブログ記事を書きます。
ここからHTMLコードを扱うので、新しくブログを書きながらツイートを埋める方がカンタンかな。コードを見ながら文章の途中に入れるのは、慣れないと難しいかもしれないから。

ブログ本文を入力している欄の右上に【ビジュアル】と【テキスト】というタブがあることを確認します。

【ビジュアル】タブの画面は、人間が文字を入力しやすくするための機能が搭載されています。マイクロソフトのワードのように、文字に色をつけたらその色になったり、文字の大きさを変えると文字が大きくなったり、だいたいWebブラウザからブログをみたときと同じように表示されます。いつもはみなさま、この画面でブログを書いていますよね。きっとね。

一方、【テキスト】タブの画面は、HTMLソースといってホームページやブログを作るときのコードを入力しながらブログを書く画面です。Web屋はたいていこの画面の方が好きです。正確に自分のしたいことが表現できるからです。

ツイートを組み込むために、コードをコピーしたので、まずは【テキスト】タブの画面に切り替えます。

【テキスト】タブをクリックします。
そうすると、HTMLのコードも確認できます。<>で囲まれている記号がHTMLコードです。

手順4【テキスト】タブの画面にコピーしたコードを貼り付ける

埋め込みたい場所をクリックしてカーソルを表示します。次にコピーしたコードを貼り付けます。
HTMLコードがさらに増えて見えます。下のような感じになったら成功です。

手順5【ビジュアル】タブに戻って表示を確認する

【ビジュアル】タブをクリックして、いつも編集している画面に戻ります。
ツイートが表示されています。

えーーーーっ、これはイメージしてるツイートの表示と違う!!
って思いますでしょう。

ワードプレスの編集画面上ではツイートのイメージを表現できないので、こんな感じになってます。
ちゃんとツイッターと同じようにWebブラウザで表示されるか確認するには、ワードプレスの【プレビュー】ボタンをクリックします。

ここまでがんばって操作したので、いったん【下書保存】してからブログの続きを書くのが賢いやり方。

あとはブログの続きを書いて、公開したらOKです。

どうやら失敗したらしいときは

プレビューにうまく表示されていないときは、【ビジュアル】タブの画面でコードを貼り付けちゃったときです。
【ビジュアル】タブの画面にコードを貼り付けると、そのままコードが文字と判断されて表示されます。

こうなったときは、<blockquote>から</script>って書いてある部分を全部削除してから、【テキスト】タブ画面に切り替えて、もう一度コードを貼り付けてくださいね。
【テキスト】タブの画面は、この<blockquote>から</script>までを、ワードプレスがツイッターなんだと判断しているんです。

以上で、操作は終わりです。

慣れるまではなんだかドキドキするかもですが、トライしてみてくださいね。
あっ、うまくいかなったときは、お気軽に連絡くださいね～～♪♪
Facebookでも、ツイッターでもどうぞ～～～

コメント

comments