WordPress関連コラム  2020.8.6

ワードプレスのツイッター埋め込みはコピペで簡単!すぐできる埋め込み方法

ワードプレスの記事の中にツイッターの埋め込みをしたいけど、方法が分からないという方もいるのではないでしょうか。

ツイッターの埋め込み方法は複数あり、ツイッターを埋め込むことでフォロワーが増えたり信頼性も高まるというメリットも得られます。

ここではワードプレスにツイッターを埋め込む方法をご紹介し、メリットや注意点もお話ししていきます。

ブログとツイッターを連動させ、より魅力あふれたワードプレスになるようにツイッター埋め込みの知識を学んでいきましょう。

ワードプレスでツイッターの埋め込みをする方法

ではさっそくワードプレスにツイッターを埋め込む方法をお話ししていきます。

ご自身のツイッターはもちろん他の方のツイートを埋め込みすることも可能です。

ワードプレスでのツイートの埋め込み方法は、旧エディタ(Classic Editor)と新エディタ(Gutenberg)で異なるので、それぞれの方法を見ていきましょう。

旧エディタ(Classic Editor)でツイートを埋め込む方法

旧エディタでツイートを埋め込む方法は2種類あります。

  • URLをコピペして埋め込む
  • コードをコピペして埋め込む

URLをコピペして埋め込む方法は、ワードプレス限定の埋め込み方法で簡単に埋め込むことができます。

一方コードを使って埋め込む方法は、ワードプレス以外のウェブサイト作成やブログに埋め込む場合にも使える方法です。

すぐにツイートの埋め込みをしたい人は、①のURLをコピペして埋め込み、ウェブサイトなどの知識をつけたい人は②のコードをコピペして埋め込む方法を知っておくと良いでしょう。

方法1.URLをコピペして埋め込む

まずURLをコピペしてワードプレスに埋め込む方法です。

この方法はとても簡単なので、PC初心者の方にも取り入れやすいやり方です。

まず埋め込みをしたいツイートを表示します。

このときアカウントのページでは埋め込むことができないので、ツイートを開きURLをコピーしてください。

ワードプレスのツイッター埋め込み方法

ワードプレスの新規追加を開き、ビジュアルエディタで埋め込みたいところにペーストします。

ペーストするとすぐにツイート画面が現れます。

ワードプレスのツイッター埋め込み方法

これだけで埋め込みは完了!

きちんと表示されるか確認も忘れず行いましょう。

方法2.コードをコピペして埋め込む

続いてコードをコピペしてワードプレスに埋め込む方法です。

埋め込みをしたいツイートを表示して、右上にある「∨」をクリックします。

ワードプレスのツイッター埋め込み方法

その中の「ツイートを埋め込む」を選択します。

ワードプレスのツイッター埋め込み方法

コードが表示されるので「Copy Code」をクリックするとコピーされます。

ワードプレスのツイッター埋め込み方法

そして、ワードプレスの新規追加を開き、テキストエディタで埋め込みたいところにペーストをします。

ワードプレスのツイッター埋め込み方法

ビジュアルエディタを見ると埋め込みされています。

ワードプレスのツイッター埋め込み方法

こちらのやり方はワードプレス以外にも利用できるので、2つのやり方を覚えて置いて損はないでしょう。

新エディタ(Gutenberg)でツイートを埋め込む方法

Gutenbergでは、ツイッターやインスタグラムなどの主要なSNSを簡単に埋め込むことができます。

まず始めに埋め込みたいツイートのURLをコピーしておきましょう。

ワードプレスのツイッター埋め込み方法

ワードプレスの新規追加を開き、ブロック追加の【+】ボタンを押します。

埋め込みの欄から「Twitter」を押します。

ワードプレスのツイッターの埋め込み方法

「埋め込むURLをここに入力」のところに埋め込みたいツイッターのURLを貼り付けします。

ワードプレスのツイッターの埋め込み方法

「埋め込み」ボタンを押すと、ツイートの埋め込みが完了です。

ワードプレスのツイッターの埋め込み方法

Gutenbergでは、You TubeやFacebook、Instagramなども簡単に埋め込むことができます。

ツイッターのタイムラインをワードプレスに埋め込む方法

ツイッターのタイムラインをワードプレスに埋め込むことも出来ます。

ツイッターのタイムラインとは、複数のツイートが並ぶ画面のことです。

ツイートと違いそのままURLをコピペするだけでできるというわけではなく、少し手間がかかります。

旧エディタ(Classic Editor)でタイムラインを埋め込む方法

まず、タイムラインを埋め込むためには「Twitter Publish」というサイトを利用します。

サイトにアクセスをしたら、埋め込みたいタイムラインのツイッターアカウントURLを入力し、「→」を押します。

ワードプレスのツイッタータイムライン埋め込み方法

「Embedded Timeline(埋め込みタイムライン)」と「Twitter Buttons(ツイッターボタン)」を選択する画面が表示されるので、「Embedded Timeline(埋め込みタイムライン)」を選びます。

ワードプレスのツイッタータイムライン埋め込み方法

「Copy Code」を押してコードをコピーします。

ワードプレスのツイッタータイムライン埋め込み方法

次にワードプレスの投稿で挿入したい場所のテキストエディターにペーストします。

ワードプレスのツイッタータイムライン埋め込み方法

これで投稿にツイッターのタイムラインが埋め込まれます。

ワードプレスのツイッタータイムライン埋め込み方法

このように出ていれば埋め込みができていますが、一度プレビューで確認してみてください。

サイズや色を変えたいとき

タイムラインを埋め込みする場合、サイズや色、表示言語をカスタマイズすることができます。

Twitter Publish」でコードをコピーする前に【set customization options】をクリックしてください。

ワードプレスのツイッタータイムライン埋め込み方法

以下のような画面が出てくるので、高さ・横幅・背景の色(黒・白)・表示言語を設定し、「Update」ボタンを押します。

ワードプレスのツイッタータイムライン埋め込み方法

アップデートしたものを「Copy Code」を押して、コピーします。

ワードプレスのツイッタータイムライン埋め込み方法

ワードプレスのテキストエディタに貼り付けます。

ワードプレスのツイッタータイムライン埋め込み方法

タイムラインの埋め込みができているか、プレビューで確認してください。ワードプレスのツイッタータイムライン埋め込み方法

 

サイズや色もカスタマイズできるのは、便利ですね。

ご自身のサイトに合わせて設定してみてください。

新エディタ(Gutenberg)でタイムラインを埋め込む方法

新エディタでタイムラインを埋め込むときは、ツイートを埋め込むときと変わりありません。

ツイッターのタイムラインの状態でURLをコピーします。

ワードプレスのツイッタータイムラインの埋め込み方法

Gutenbergのブロック追加の「+」ボタンを押します。

埋め込みの欄から「Twitter」を押します。

「埋め込むURLをここに入力」のところに埋め込みたいツイッターのURLを貼り付け、「埋め込み」ボタンを押します。

ワードプレスのツイッタータイムラインの埋め込み方法これで、タイムラインの埋め込みが完了です。

ワードプレスのツイッタータイムラインの埋め込み方法

プレビューでも確認してみてください。

ツイッターの埋め込みってなに?

そもそもツイッターの埋め込みとは、ブログの中にお気に入りのアカウントを紹介したり、ピックアップしたいツイートを表示することです。

ワードプレスでは、ツイートとタイムラインを埋め込むことができます。

だらだらと文字だけ羅列しているブログでは読むのに疲れてしまうこともあるため、アクセントとしてツイッターの埋め込みがあるとより魅力的なものになります。

特定のツイートを埋め込む

特定のツイートを埋め込む際も上記でご紹介したURLをコピペするか、コードを表示しコピペするかどちらかの方法で埋め込むことが出来ます。

ツイートの埋め込みは、商品の口コミをしているツイートや良い方法を紹介しているツイートをブログやサイトに載せたいときに便利です。

どのツイートを埋め込むかによって、ご自身のブログにプラスになるのかよく吟味して選ぶようにしましょう。

自分のツイッターアカウントのタイムラインを埋め込む

ご自身のツイッターアカウントのタイムラインを埋め込むことも出来ます。

タイムラインはサイトのサイドバーやフッターに埋め込むことができ、サイトを見ている人にご自身のツイートを見てもらうきっかけになるでしょう。

タイムラインは、ご自身のツイッターのものしか埋め込むことができないので、注意してください。

ツイッタ−の埋め込みをするメリットとは?

ではツイッターの埋め込みをするメリットとはどんなものがあるでしょうか。

ここでは考えられる3つのメリットをご紹介します。

  • フォロワーが増える
  • 信頼性が高まる
  • 口コミやリアルな声を反映できる

メリットを詳しくみていきましょう。

メリット1.フォロワーが増える

メリットの1つ目は、フォロワーが増えることです。

例えば、ブログに自分のツイートを載せたとします。

ブログ読者にとって興味深いツイートであれば、ツイッターの方もチェックをしてくれて、フォロワーになってくれるかもしれません。

もしくはご自身のブログに他の人のツイートを載せた場合でも、ブログ読者にとって有益な情報が得られると思ってもらえれば読者の定着にも繋がります。

アフィリエイトのような利益が発生するブログ運営をする場合は、とにかく読者の定着がものを言いますから、ファンを増やすという意味でもツイッターの埋め込みは効果的でしょう。

メリット2.信頼性が高まる

メリットの2つ目は、サイトの信頼性が高まることです。

ご自身のブログで紹介したい商品があったとします。

その商品の効果や良心的な料金等、素晴らしいことをアピールしても、その魅力は伝えきれないかもしれません。

そんな時は、専門家や有名人のツイートを埋め込んでみましょう。

信頼をおける人のツイートを載せることで信頼性が高まり、購買意欲にも繋がります。

メリット3.口コミやリアルな声を反映できる

メリットの3つ目は、口コミやリアルな声を反映できることです。

商品を紹介するブログでは、口コミのツイートを埋め込むのが効果的です。

ご自身で使ってみた感想を載せるのは限界がありますし、より多くの人が「この商品は良い!」とアピールしていれば信憑性も高まります。

またご自身では気付かなかった着眼点から商品を評価している人もいるはずです。

口コミのツイートを載せる際は良いツイートばかり載せるのもありですし、リアルな声としてマイナス面を載せるのもありです。

「良いことばかり書いていて怪しい」と思う人もいるので、リアルな声を届け、有益な情報を載せていると読者も惹かれるでしょう。

ツイッターを埋め込む際の注意点

続いてツイッターを埋め込む際の注意点をお話ししていきます。

埋め込み作業が簡単なだけに、つい多用してしまうこともあるでしょう。

ただし以下の点に注意をしておかないと最悪裁判沙汰…なんてことになってしまうかもしれません。

  • 埋め込む数によってページの表示速度が変わる
  • 著作権や肖像権に気をつける
  • 記事削除の依頼には丁寧に応える
  • ツイッターのスクショはNG

今後ブログを幅広く展開していこうとお考えの方は頭に入れておいて損はないでしょう。

それでは、順に見ていきましょう。

注意点1.埋め込む数によってページの表示速度が変わる

まず埋め込む数によってページの表示速度が変わることがあります。

1つ2つのツイートであればページが重たくなることはありませんが、複数のツイートを埋め込んだ場合なかなか表示されなくなることがあります。

皆さんも一度は経験があると思うのですが、読み手側からするとページの表示速度が遅いことはストレスになるのです。

待ってまで読みたい価値のある内容であれば話は別ですが、読者離れになってしまうことは十分に考えられます。

では、表示速度が遅くなってしまった場合はどうしたら良いのでしょうか。

まずツイートの埋め込みはコードで行います。

その際2つ目以降の埋め込みでは、要らない部分があるのです。

一番下の のところは1つ目のツイートだけ必要になるため、2つ目以降は削除していきましょう。

小さなことですが、表示速度の改善に繋がるので試してみて下さい。

注意点2.著作権や肖像権に気をつける

著作権や肖像権にも気を付けなければなりません。

埋め込みは言い方を変えれば他人のツイートを転写するのですから、埋め込みをするときにツイートを発信した人に許可を取らなくても大丈夫なのか?という疑問が発生します。

結論から言ってしまうと、他人のツイートを埋め込みすることに問題はありません。

なぜならツイッターの利用規約で転写を許可しているからです。

ただし著作権や肖像権に関わるツイートは別で、問題になってしまうこともあります。

特に注意しなければいけないのは画像や動画です。

例えば芸能人の画像などは要注意。

公式アカウント(ご本人)で上げているツイートなら問題ありませんが、一般人が載せている場合は著作権や肖像権に関わる可能性があります。

そんなツイートの埋め込みは「無難に避ける」もしくは「どうしても載せたい場合はツイート主に確認」をとった方が安全と言えます。

注意点3.記事削除の依頼には丁寧に応える

著作権や肖像権等に十分注意していても、思わぬところで触れてしまうことがあるかもしれません。

またツイッターの利用規約では埋め込みOKとしていても「自分のツイートを勝手に利用されているのは嫌だ」と感じる人がいる場合もあります。

そんな時は「私のツイートを削除してくれませんか?」と依頼が来るはずです。

削除依頼が来たにも関わらず、放置していると、裁判沙汰になってしまった…なんてケースにもなりかねません。

削除依頼が来てしまった際は、早急に埋め込みをしたツイートを削除し対処するようにしましょう。

注意点4.ツイッターのスクショはNG

ツイッターをスクリーンショットして掲載することは、認められていません。

ツイッターのサービス利用規約で、以下のように定められています。

ユーザーは、本サービスまたは本サービス上のコンテンツの複製、修正、これに基づいた二次的著作物の作成、配信、販売、移転、公の展示、公の実演、送信、または他の形での使用を望む場合には、Twitterサービス、本規約またはhttps://developer.twitter.com/en/developer-termsに定める条件により認められる場合を除いて、当社が提供するインターフェースおよび手順を使用しなければなりません。

この当社が提供するインターフェースおよび手順というのがここで紹介した埋め込み方法になります。

この埋め込み以外の方法で、ツイッターを転載する場合は、違反となるのです。

サイドバーやフッターにタイムラインを埋め込む方法

ツイッターのタイムラインをサイドバーやフッターに埋め込むこともできます。

基本的な操作は記事内に埋め込む方法と同じです。

Twitter Publish」にアクセスし、タイムラインを表示したいツイッターアカウントのURLを入力します。

ワードプレスのツイッタータイムライン埋め込み方法

左側の「Embedded Timeline」をクリック、コードをコピーします。

ワードプレスのツイッタータイムライン埋め込み方法

ダッシュボードから外観・ウィジェットを開きます。

ウィジェットの中の「テキスト」からサイドバーかフッターを選びます。

ワードプレスサイドバーにツイッターを挿入する方法

タイトルを入力し、コピーしたコードを貼り付けして「保存」を押します。

ワードプレスサイドバーにツイッターを挿入する方法

サイドバーやフッターにツイッターを埋め込む場合もサイズや背景をカスタマイズできるので、コードをコピーする前に設定しておきましょう。

まとめ

ワードプレスにツイッターを埋め込む方法をご紹介しました。

コピペでツイートもタイムラインも埋め込むことができ、手軽に利用できます。

ブログにツイッターを引用することで、読者が増えたり信頼性が高まったりとメリットも大きいです。

口コミやリアルな声を反映することで、ご自身では気付けなかった面も読者に伝えらます。

ツイッターの埋め込みはブログの幅も広がり、文章だけのブログよりも魅力的になることでしょう。

ただし著作権や肖像権等には注意を払わなければなりません。

安全にブログ運営が行えるよう、埋め込むツイートはしっかりと選び、トラブルの元にならないよう気を付けてください。

他のSNSの埋め込み方法は以下の記事をご覧ください。

ワードプレスでのインスタ埋め込み方法!メリットとおすすめプラグイン
ワードプレスにインスタ画像の埋め込みが出来ることをご存知でしょうか? インスタの画像を埋め込むことでブログに色が加えられ、読者の興味を引くことが出来ます。 埋め
ワードプレスでYouTubeを埋め込みたいときにすぐできる2つの方法
ワードプレスでサイト作成をしている際、「ここに動画が入ったらもっと良くなる!」とYouTubeを埋め込みたいと思うことがありますよね。 YouTubeを埋め込むことで