実録!小さな会社の経営者とアラフィフ女子の夢を叶えるお手伝い 白藤沙織(さおりん)のブログ Webとブログ、SNSで、お仕事も人生も大逆転しましょう。自分らしく輝いて生きるために。実録!小さな会社の経営者とアラフィフ女子の夢を叶えるお手伝い 白藤沙織(さおりん)のブログ Webとブログ、SNSで、お仕事も人生も大逆転しましょう。自分らしく輝いて生きるために。

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

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

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

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

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

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

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

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

パソコンの画面
埋め込みたいツイートを表示

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

右側にメニューが出たところ。
「ツイートをサイトに埋め込む」を選んでね

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

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

コードはすべてコピーしてくださいね。
□メディアを含めるのチェックも忘れずにしてください。

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

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

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

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

ブログ記事を書きます。

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

【ビジュアル】と【テキスト】タブがあります。

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

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

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

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

【テキスト】タブをクリックしたところ。
HTMLのコードが表示されます。

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

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

コードを貼り付けたところ。わけのわからんコードがたくさん出てきたら成功です

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

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

こんな感じの表示になったら成功です

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

プレビュー画面で、こんな風に表示されたらOK

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

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

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

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

貼り付けつたコードがこんな風に表示されていたら失敗です。
【テキスト】タブ画面に切り替えて、やり直してね。

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

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

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

【募集中】SNS活用&コトバの選び方 セミナー
2019年4月20日(土)13時~16時まで、めぐっちょ&さおりん プレゼンツ SNS活用&コトバの選び方 セミナーします。

【日時】4月20日(土)13:00~16:00 (開場12:30)
【参加費】5,000円(当日会場にて承ります)

*終了後、ミニ懇親会として近くのカフェでお茶会ができたらと考えています(実費参加)

詳しくはFacebookのイベントページを見てください
https://www.facebook.com/events/428632634611782/

■Web解析のお仕事しています
Web解析はホームページやブログの健康診断のようなもの。会社経営にたとえると、決算書のようなもの。
現状を把握することで、ビジネスにホームページやブログをどう活かすかも考えやすくなります。目標を決めて、数値を追いながら行動していくって、経営もダイエットも同じ。

毎月解析レポートを作成して施策を提案するコンサルコース
単発で解析してアドバイスするコース
年間3回とか回数を決めて解析するコース

いろいろあります。

ご興味があれば、下記のフォームからお問合せくださいね。
https://www.websuccess.jp/saorin/request/

コメント

comments

  • このエントリーをはてなブックマークに追加
  • 8 follow us in feedly

 この記事の投稿者

白藤沙織

テニスとヨガとピアノが好き。そして4コマ漫画のサザエさんをこよなく愛するWebプロデューサー「さおりん」です。

考えをはっきり言うズバリスト。その性格を生かして、Webのこと、生き方のこと、本のことなどなど、ずばり言います。

小さな会社の経営者と、アラフィフ女子がキラキラと輝くためのむお手伝いがしたい。そんな思いで日々活動中です。

プライベートでは、ひとり娘のシングルマザー。仕事と子育てとめいっぱいがんばってきたので、人生のパートナーができるといいなぁと密かに夢見ています

上級ウェブ解析士、エクスマ59期・65期、エヴァ16期

ページ最上部へ