▶ え!?なにこれ超簡単!!WordPressの始め方

徹底解説!WordPressにTwitterを埋め込む方法(基本の埋め込みからカスタマイズまで)

WordPressにTwitterを埋め込むのはめちゃくちゃ簡単です!

プラグイン不要で初心者でも簡単にできてしまうので、ぜひ参考にしてみてください。

また、リプライ元のツイートを非表示にしたり、背景色を変えたり、サイドバーなどにタイムラインを表示するなどの応用テクニックについては、ご存知の方はあまり多くないと思います。

今回はそのへんのカスタマイズ方法もふくめて紹介します!

よめちゃん

え!?Twitterの埋め込みに応用テクなんてあるんだ!?

サンツォ

知らなかったでしょ?

目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
ブログ部でも使っている超おすすめテーマ「SWELL」はこちら!

TwitterをWordPressへ埋め込む基礎知識

WordPressへのTwitterの埋め込みとは、Twitterのツイート(つぶやき)をWordPressで作成した投稿(記事)内などの特定の場所に表示させることです。

Twitter上で公開されているツイートであれば、フォローしている・していないに限らず、WordPressに埋め込むことができます。

WordPressにはどんなツイートの種類が埋め込める?

ではWordPressにはどんな種類のツイートが埋め込めるのでしょうか?

ツイートには全部で5つの種類がありますが、それぞれ埋め込めるかどうかを下記にまとめてみました。

種類 説明 埋め込み可否
ツイート通常のツイート(つぶやき)。
リプライ他人のツイートに対する返信のツイート。コメント。(元のツイートを表示することもしないこともできる)
リツイート他人(もしくは自分)のツイートを、コメントをつけずに再びツイートすること。(できるが、元のツイートをそのまま埋め込むのと同じ)
引用リツイートタイムライン上のツイートに自分のコメントを付けた上でリツイートできる機能(できるが、引用元を非表示にすることはできない)
タイムラインツイートの一覧。

すべてのツイートの種類を埋め込むことが可能ですが、コメント無しの「リツイート」に関しては元のツイートが表示されるだけなので「△」にしています。

今回紹介するTwitterの埋め込み方法

この記事で紹介するWordPressへTwitterを埋め込む方法は下記のとおりです。

使う機能 埋め込み方詳細
WordPressのデフォルト機能 ツイートURLを直接貼り付け、ツイートを埋め込む埋め込みたいツイートのリンクURLを、WordPressで作成した投稿(記事)の任意の箇所にコピペするだけ。
TwitterブロックにツイートURLを貼り付け、ツイートを埋め込むWordPressのブロックエディターの機能「Twitterブロック」に、埋め込みたいツイートのリンクURLをコピペする。
Twitter Publish」を使う コードをカスタムHTMLブロック貼り付け、ツイートを埋め込む「Twitter Publish」で生成された埋め込みたいツイートのHTMLコードを、「カスタムHTMLブロック」にコピペする。
元のツイートを非表示にして埋め込む「Twitter Publish」では、リプライ元の表示・非表示を切り替えることができる。
ツイートの背景色を変えて埋め込む「Twitter Publish」では、貼り付けるツイートの背景色を変えることができる(白・黒)
タイムラインをサイドバーなどに埋め込む「Twitter Publish」では、タイムラインを埋め込むことができる。
フォローボタンをサイドバーなどに埋め込む「Twitter Publish」では、あなたのTwitterアカウントのフォローボタンを埋め込むことができる。

【基本テク】WordPress初期機能でTwitterの埋め込みをする!

Twitterフォロワーの増やし方、増やす方法

まずはWordPressにデフォルトで搭載されている機能だけでTwitterを埋め込む、超基本的な方法から。

これには下記の2種類の方法があります。

どちらの方法を選択しても、実際の表示に違いはありません。

よめちゃん

じゃあなんでTwitterブロックがあるの? URLコピペすれば一発じゃん。

サンツォ

…知らん。

本文内にTwitterのURLを直接記載する

やり方は「Twitterの投稿のリンクを記事の本文内にペタッと貼りつける」だけ。

サンツォ

コピペするだけだからめっちゃ簡単だよ!

まずは、下の画像のようにTwitterの埋め込みたい投稿(ツイート)の共有ボタンをクリックします(PCもスマホも同じ手順です)。

WordPressへのTwitter埋め込み001_Twitterの埋め込みたい投稿(ツイート)の共有ボタンをクリック

すると下記のようなウィンドウが出てくるので、「ツイートのリンクをコピー」を選びます。

WordPressへのTwitter埋め込み002_共有からツイートのリンクをコピーする

次に、WordPressの投稿画面で、Twitterを埋め込みたい場所(下記の赤枠の部分)にコピーしたURLをペースト(貼りつけ)します。

WordPressへのTwitter埋め込み002.5_WordPressの投稿画面でTwitterを埋め込みたい場所にコピーしたURLをペースト

すると、下記のようにTwitterのツイートが表示されます。

WordPressへのTwitter埋め込み004_WordPressの投稿画面でにTwitterを埋め込み完了

これで完了! まじで簡単!

WordPressエディターの「Twitterブロック」を使う

次に、WordPressのエディター(みなさんがいつも使っている記事の文章を書く機能のこと)にあるブロックの機能を使ってTwitterを埋め込む方法です。

当然ですが、この方法はブロックエディター(新エディター、グーテンベルク)を利用していないと使えません。

まずは投稿画面で、下記のようにTwitterを埋め込みたい位置に「+」マークをクリックしてブロックを追加します。

下記の画像の矢印のやつです。上下どちらでもいいですが、今回は下の「+」をクリックします。

WordPressへのTwitter埋め込み003_WordPressの投稿画面で、Twitterを埋め込みたい場所にコピーしたURLをペースト

追加するのは「Twitterブロック」です。

WordPressへのTwitter埋め込み005_WordPressのTwitterブロックを挿入

Twitterブロックが出てこない場合は、上の検索窓に「Twitter」と入力して検索してください。

WordPressへのTwitter埋め込み006_WordPressのTwitterブロックを検索する

Twitterブロックが表示されるので、埋め込みたいツイートのURLを貼りつけます。

WordPressへのTwitter埋め込み007_Twitterブロックが表示されたら埋め込みたいツイートのURLを貼りつけ

URLを貼りつけたら、「埋め込み」ボタンをクリックします。

WordPressへのTwitter埋め込み008_URLを貼りつけたら埋め込みボタンをクリック

すると下記のようにツイートが表示されます。

WordPressへのTwitter埋め込み009_Twitterブロックを使ってツイートの埋め込みが完了

これで完了です。こっちも簡単!

【応用テク】「Twitter Publish」でTwitterの埋め込み&カスタマイズをする!

単純にWordPressにTwitterを埋め込みたいだけなら、ここまで説明したやり方で十分。

でも、もし「元ツイートを表示せずにリプだけを埋め込みたい」「ツイートの背景色を変えたい」「タイムラインを表示したい」「フォローボタンを埋め込みたい」…という時には、

Twitter Publish」というツールがめちゃくちゃ便利です!

WordPressへのTwitter埋め込み010_Twitter Publishのトップページキャプチャ

「Twitter Publish」を使用すれば、通常の埋め込みはもちろん、埋め込みの表現方法をより自由にカスタマイズすることができます。

ツイートをふつうに埋め込む

まずは、Twitter Publishを使ってただ単純にツイートを埋め込む方法です。

Twitter Publishを開いたら、中央の入力欄に埋め込みたいツイートのURLをコピペし、「→」マークをクリックします。

WordPressへのTwitter埋め込み011_Twitter Publishを開いたら中央の入力欄に埋め込みたいツイートのURLをコピペし「→」マークをクリック

すると画面が勝手に下にスクロールし、下記のような表示が出てきます。

矢印部分の「コードをコピーする」ボタンをクリックします。

WordPressへのTwitter埋め込み012_矢印部分の「コードをコピーする」ボタンをクリック

すると下記のような画面が表示され、コードがクリップボードにコピーされました。

(たまに真っ白な画面になりますが、コードはちゃんとコピーされているのでご安心を)

WordPressへのTwitter埋め込み013_Twitter Publishのコードがクリップボードにコピーされた

続いて、Wordpressの投稿画面で、ツイートを埋め込みたい部分に「カスタムHTML」のブロックを挿入します。

WordPressへのTwitter埋め込み014_Wordpressの投稿画面でツイートを埋め込みたい部分に「カスタムHTML」のブロックを挿入

カスタムHTMLのブロックが表示されたら、コピーしたコードをペースト(貼り付け)します。

WordPressへのTwitter埋め込み015_カスタムHTMLのブロックが表示されたらコピーしたコードをペースト

これで完了ですが、一応プレビューで表示を確認してみましょう。

WordPressへのTwitter埋め込み016_Twitter Publishで通常ツイートの埋め込みが完了

はい、ちゃんとツイートが表示されました。

よめちゃん

……面倒くさくない? さっき説明した方法のほうが簡単だよね。

サンツォ

まあまあ。Twitter Publishが便利なのはここからだから。

元のツイートを非表示にして埋め込む

Twitter Publishでは、元のツイート(リプライ元)を表示するかしないかも選択することができます。

リプライ(Reply):他の人のツイートに対して返信するメッセージ、コメント。略して「リプ」。

たとえば下記みたいな感じで、誰かのツイートへのリプライを埋め込んだ場合、普通の方法では元のツイートも含めて表示されてしまいます。

WordPressへのTwitter埋め込み017_誰かのツイートへのリプライを埋め込んだ場合普通の方法では元のツイートも含めて表示されてしまう

リプライの部分だけを表示させる(元のツイートを表示させない)には下記の手順で進めます。

まず、埋め込みたいリプライのURLをTwitter Publishの入力欄にコピペし、「→」マークをクリックします。

下に出てくる「カスタマイズオプションを設定する。」のテキストリンクをクリックしてください。

WordPressへのTwitter埋め込み018_Twitter Publishの「カスタマイズオプションを設定する。」のテキストリンクをクリック

すると下記のような画面になるので、「会話を隠す」の部分にチェックを入れ、「アップデート」ボタンをクリックします。

WordPressへのTwitter埋め込み019_Twitter Publishの「会話を隠す」の部分にチェックを入れ「アップデート」ボタンをクリック

コードが生成されるので、「コードをコピーする」ボタンをクリックします。

WordPressへのTwitter埋め込み020_Twitter Publishでコードが生成されるので「コードをコピーする」ボタンをクリック

WordPressの投稿画面を開き、先ほどコピーしたコードを、カスタムHTMLブロックにペースト(貼り付け)します。

WordPressへのTwitter埋め込み021_WordPressの投稿画面を開き先ほどコピーしたコードをカスタムHTMLブロックにペースト

これで完了ですが、プレビューで見てみましょう。

WordPressへのTwitter埋め込み022_元ツイートが非表示になりリプライだけが表示され

元ツイートが非表示になり、リプライだけが表示されました。

大成功ですね。

ちなみに、下記のような「引用リツイート」の場合は、たとえカスタマイズオプションで「会話を隠す」にチェックを入れても、元のツイートは表示されてしまいます。

引用リツイートは引用元も含めて1つのコンテンツであり、会話ではないから、でしょうね。

WordPressへのTwitter埋め込み023_「引用リツイート」の場合はたとえカスタマイズオプションで「会話を隠す」にチェックを入れても元のツイートは表示される

背景色を変えて埋め込む

Twitter Publishでは、埋め込むツイートの背景色を変更することができます。

といっても「光(白背景)」か「暗い(黒背景)」の2択ですけどね。

初期設定では「光(白背景)」になっていますが、「暗い(黒背景)」にするには下記のように設定します。

まずは先ほどと同じように、Twitter Publishに埋め込みたいツイートのURLを入力し、「→」マークをクリックします。

下に出てくる「カスタマイズオプションを設定する。」のテキストリンクをクリックしてください。

下記のような画面になるので、「これをどのように見せたいですか?」の部分のプルダウンを開きます。

WordPressへのTwitter埋め込み024_Twitter Publishでは埋め込むツイートの背景色を変更することができる

プルダウンから「暗い」を選択し、「アップデート」ボタンをクリックします。

WordPressへのTwitter埋め込み025_ツイートの背景色を「光(白背景)」か「暗い(黒背景)」から選ぶ

「コードをコピーする」ボタンをクリックします。

WordPressへのTwitter埋め込み026_ツイートの背景色を選択したら「コードをコピーする」ボタンをクリック

WordPressの編集画面で、カスタムHTMLブロックを挿入し、コピーしたコードをペースト(貼り付け)します。

WordPressへのTwitter埋め込み025_ツイートの背景色を変えたコードをコピーしたらWordPressの編集画面でカスタムHTMLブロックを挿入しコピーしたコードをペースト

これで完了です。実際の表示は下記のようになります。

WordPressへのTwitter埋め込み027_ツイートの背景色を変更完了

こんな感じに暗い(黒い)背景になります。

よめちゃん

これ…… 使う?

サンツォ

う~ん、少なくても僕は始めて使ったかな。
ツイートを特別に目立たせたい場合にはいいんじゃない?

タイムラインを埋め込む

Twitter Publishを使ってWordPressにタイムラインの埋め込みをする方法です。

よくサイドバーなどに、Twitterのツイート一覧(タイムライン)が表示されているブログを見かけますよね。あれです。

タイムラインを埋め込むには、まずTwitterアカウントのプロフィールページのURL(アカウントURL)をコピーします。

WordPressへのTwitter埋め込み028_TwitterアカウントのプロフィールページのURL(アカウントURL)をコピー

Twitter PublishにアカウントURLを入力し、「→」マークをクリックします。

WordPressへのTwitter埋め込み029_TwitterアカウントのプロフィールページのURL(アカウントURL)をTwitter Publishにペースト

下に出てくる表示オプションのうち、左側の「埋め込まれたタイムライン」を選択します。

WordPressへのTwitter埋め込み030_表示オプシ

コードが生成されるので、「コードをコピーする」ボタンをクリックします。

WordPressへのTwitter埋め込み031_タイムラインのコードが生成されたら「コードをコピーする」ボタンをクリック

ちなみに、「カスタマイズオプションを設定する。」リンクをクリックすると、下記のようにサイズや背景色などの設定をおこなうことができます。

WordPressへのTwitter埋め込み032_「カスタマイズオプションを設定する。」ではサイズや背景色などの設定をおこなうことができる

投稿(記事)にタイムラインを埋め込みたい場合は、

WordPressの投稿ページにて、カスタムHTMLブロックにコピーしたコードをペースト(貼り付け)します。

WordPressへのTwitter埋め込み033_WordPressの投稿ページにてカスタムHTMLブロックにコピーしたタイムラインのコードをペースト

すると、下記のように投稿内にタイムラインが表示されます。

WordPressへのTwitter埋め込み034_投稿内にTwitterタイムラインを表示成功

まあでも、投稿(記事)内にタイムラインを表示することなんて、あまりないですよね。

ってことで、WordPressのサイドバーにTwitterのタイムラインを埋め込む方法を解説します。

TwitterのツイートをWordPressのサイドバーに設置するには、ウィジットを編集する必要があります。

WordPressダッシュボードの左メニューにある「外観」 → 「ウィジェット」の順に進みます。

WordPressへのTwitter埋め込み035_TwitterのツイートをWordPressのサイドバーに設置するにはウィジットを編集する

「カスタムHTML」をサイドバー内にドラッグ&ドロップします。

WordPressへのTwitter埋め込み036_「カスタムHTML」をサイドバー内にドラッグ&ドロップ

ドラッグ&ドロップしたカスタムHTMLの右側にある「▼」アイコンをクリックすると、内容の編集ができます。

任意のタイトルを入力し、先ほど取得したタイムラインのコードを、内容の欄に貼り付けてください。

最後に保存ボタンをクリックします。

WordPressへのTwitter埋め込み037_ドラッグ&ドロップしたカスタムHTMLの右側にある「▼」アイコンをクリックし内容を編集

下図のようにサイドバーにTwitterのタイムラインが表示されました。

WordPressへのTwitter埋め込み038_サイドバーにTwitterのタイムラインが表示された

この他にもHTMLで編集できる部分にはどこにでも埋め込むことができるので、お好みの場所に設置してみてください。

フォローボタンを埋め込む

Twitter Publishを使ってWordPressにTwitterのフォローボタンを埋め込む方法です。

まず、タイムラインの時と同様に、TwitterアカウントのプロフィールページのURL(アカウントURL)をコピーします。

Twitter Publishの中央の入力欄にURLをペーストし、「 → 」をクリックします。

WordPressへのTwitter埋め込み029_TwitterアカウントのプロフィールページのURL(アカウントURL)をTwitter Publishにペースト

次に、表示オプションから「Twitterボタン」を選択。

WordPressへのTwitter埋め込み039_表示オプションから「Twitterボタン」を選択

フォローボタンとメンションボタンの選択がポップアップ表示されるので、追加したいボタンを選択します。

WordPressへのTwitter埋め込み040_フォローボタンとメンションボタンの選択がポップアップ表示されるので追加したいボタンを選択

コードが生成されるので、「コードをコピーする」をクリックします。

WordPressへのTwitter埋め込み041_フォローボタンのコードが生成されるので「コードをコピーする」をクリック

ちなみに、「カスタマイズオプションを設定する。」のリンクをクリックすると、下記のように表示をカスタムできる設定項目が表示されます。

ユーザー名の表示・非表示の切り替え、ボタンの大きさの変更などができます。

WordPressへのTwitter埋め込み042_フォローボタンのカスタマイズオプションを設定

先ほどコピーしたコードは、投稿・固定ページ・サードバーなどに埋め込みしてください。

埋め込みの方法については、ここまでに説明した方法と同様です。

WordPressにTwitterの埋め込みをするメリット

WordPressにTwitterを埋め込むには、大きく分けて下記の2種類があります。

  1. 自分のツイート(またはタイムラインやフォローボタン)を埋め込む
  2. 他人のツイートを埋め込む

1の「自分のツイート(またはタイムラインやフォローボタン)を埋め込む」については、自分のTwitterのフォロワーを増やすことで、

ブログには書けない、もしくは書くほどではない日常的な発信をユーザーに見てもらい、親近感を抱いてもらったり、単純に接触回数を増やすなどのメリットがあります。

つまりブログとTwitterを連携することでファン化を行い、結果的にアクセスや収益を改善することができるわけです。

一方で2の「他人のツイートを埋め込む」は他人の発言を引用することになります。

たとえば商品レビューなどの記事で、第三者の口コミや評価などを取り入れることに活用することができるでしょう。

第三者の客観的な意見を含めることで、より信頼性や信ぴょう性が増し、これも結果的にアクセスや収益を改善することに繋がります。

つまりそれぞれ細かい目的や役割は違えども、最終的にはアクセス増や収益増というメリットがあるということですね。

TwitterをWordPressに埋め込むメリット = ブログのアクセスや収益を改善できる

WordPressへのTwitterの埋め込み まとめ

今回は、WordPressへTwitterを埋め込む方法について紹介しました。

単純にURLを貼り付けるだけの簡単な方法や、ツールを使って生成したHTMLコードを貼り付けるという方法など、いくつかの方法があることが分かったと思います。

再度、今回ご紹介した方法を一覧化しておきますので、目的にあわせてやり方を選んでいただければと思います。

使う機能 埋め込み方詳細
WordPressのデフォルト機能 ツイートURLを直接貼り付け、ツイートを埋め込む埋め込みたいツイートのリンクURLを、WordPressで作成した投稿(記事)の任意の箇所にコピペするだけ。
TwitterブロックにツイートURLを貼り付け、ツイートを埋め込むWordPressのブロックエディターの機能「Twitterブロック」に、埋め込みたいツイートのリンクURLをコピペする。
Twitter Publish」を使う コードをカスタムHTMLブロック貼り付け、ツイートを埋め込む「Twitter Publish」で生成された埋め込みたいツイートのHTMLコードを、「カスタムHTMLブロック」にコピペする。
元のツイートを非表示にして埋め込む「Twitter Publish」では、リプライ元の表示・非表示を切り替えることができる。
ツイートの背景色を変えて埋め込む「Twitter Publish」では、貼り付けるツイートの背景色を変えることができる(白・黒)
タイムラインをサイドバーなどに埋め込む「Twitter Publish」では、タイムラインを埋め込むことができる。
フォローボタンをサイドバーなどに埋め込む「Twitter Publish」では、あなたのTwitterアカウントのフォローボタンを埋め込むことができる。

Twitterについて書いたおすすめ関連記事

Twitterのフォロワーを増やす方法、バズるツイートを作るコツなどは、下記の記事にまとめています。ぜひ合わせてご確認ください。

収益&アクセスを激増させるツール紹介

ブログ&アフィリエイトの収益SEO集客アクセス流入を改善させる、

筆者おすすめのツールを紹介します。

SEOに強い記事を作れるツール!

エクセル、事前準備シート

収益がなかなか発生しない…」
検索順位が上がらず、アクセスも少ない…」

このようなお悩みの原因の99%は、記事の書き方がダメだから。

そしてその記事の品質は、記事を書き始める前の調査・準備の段階でほぼすべてが決まってしまいます。

そんなあなたにおすすめのツールが『 事前準備シート』。

事前準備シートは、下記のような記事作成に必要なあらゆる要素を1枚のエクセルシートにまとめたツールです。

  • キーワード調査
  • 検索結果ページの調査
  • 競合サイトの調査
  • ペルソナ(中心的ターゲット像)の設定
  • 検索意図の調査
  • 仮タイトルの候補案を作成
  • 記事構成(見出し構成)を作成

これらの事前調査をしておくことで記事の質は格段に向上し、

アクセスや収益を上げやすい記事、検索エンジンに評価されやすい記事を作ることができます。

ブログで累計1億円の確定収益を上げた筆者がふだんから利用している自作ツールです。

長年にわたってカスタムを続けた自信作。一度購入すればずっと使うことができます。

下記から1,500円で購入できますので、ぜひご利用ください。

「売れる記事テンプレート」が収益UP!

ブログ記事を書いている、ノートパソコンで作業中

ブログやアフィリエイトで商品を売るためには、

売れるための話の進め方・記事の書き方があります。

トップ営業マンが使う「セールストーク」のように、

ブログやアフィリエイトにも「セールスライティング」が存在するのです。

私サンツォがふだんからよく利用している5つの記事テンプレートをnoteにまとめましたので、

ぜひ下記からご確認ください。

お悩み相談&コンサルティング実施中!

マーケティング、分析03
  • ブログやアフィでなかなか結果が出ない
  • このままでいいのか心配になった
  • 記事の書き方はこれでいいのかな
  • 分野やサイト設計で迷っている

…などで不安を感じたり、悩んでいる方は、ぜひ私サンツォにご相談ください。

チャットやオンラインMTGにて、お悩み相談コンサルティングを受けつけています。

有料にはなりますが、悩んで立ち止まっていたり、

間違った方法を続けていても時間と手間のムダになりますので、ぜひ一度ご相談ください。

以下からお申し込みいただけます。

超高速&格安レンタルサーバーが限定500円OFF!

国内最速!超高性能&格安レンタルサーバーの「ConoHa WING」。

今ならキャンペーン中につき月額640円~で利用することができます。しかも初期費用は無料

しかも当「ブログ部」なら、さらに500円OFFになる特典付き!くわしくは下記の記事をご参照ください。

WordPressのカスタム・引越し・問題解決なら!

もしWordPressに関することで困ったことがあったら「サイト引越し屋さん」に相談しよう

WordPressからWordPressへの引越し、ドメイン移管、テーマ変更。無料ブログからWordPressへの引越し。

WordPressのカスタムやサイト高速化、セキュリティ対策など、あらゆる問題・お悩みを解決してくれるサービスです!

サンツォ

僕もいつもお世話になっているよ!
相談は無料なので、まずは問い合わせしてみよう!

\ WordPressで困ったことがあったら! /

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる