WordPressにTwitterを埋め込む方法

WordPressにTwitterを埋め込む方法

みなさんはTwitterを利用されていますか?

私はよく利用しています。
主にブログ仲間の人たちとつながって、お互い情報交換したり、励ましあったりしています。
ぜひよろしければ、あなたもお友達になってくださいね。

さて、そんな便利なTwitterを記事中で表示できることをご存じですか?

自分がTwitterで発言したツイートはもちろんのこと、誰かのツイートも記事中に埋め込んで表示させることが可能なんです。

ぜひ使ってみてくださいね。

ではWordpressで各記事の中に、Twitterを表示させる具体的な方法を見ていきましょう。

目次

WordPress記事に個別ツイートを埋め込む方法

ではまず、決まったツイートを記事の中に埋め込む方法を説明します。

ブロックエディタでツイートを埋め込む方法①

ブロックエディターをお使いの場合の埋め込み方法を説明します。

まずは一番簡単なものから。

STEP
埋め込みたいツイートのURLをコピーします。

表示されるメニューから「ツイートのリンクをコピー」を選択します。

埋め込みたいツイートを表示し、一番下に表示されているアイコンのうち、上向き矢印↑が出ているアイコンをクリック。

ブロックエディタでツイートを埋め込む方法①埋め込みたいツイートのURLをコピーします。
STEP
記事にURLを貼り付けたら完了。

URLをはりつけるだけで、自動的にツイートが表示される仕組みです。

ブロックエディタでツイートを埋め込む方法②

他の方法も紹介しますね。

STEP
埋め込みたいツイートのURLをコピーします。

先ほどとは違う形で、ツイートのURLをコピーしてみました。
ブラウザに表示されているURLをコピーしています。

ブロックエディターでツイートを埋め込む方法・ブロックエディタでツイートを埋め込む方法②ツイートURLをコピー
STEP
エディタで「埋め込み-Twitter」を選んで、URLをペーストする

ブロックで「埋め込み」-「Twitter」を選択。

ブロックエディターでツイートを埋め込む方法・ブロックエディターの場合②エディタで「埋め込み-Twitter」を選ぶ

先ほどコピーした、埋め込みたいツイートのURLをペーストします。

「埋め込み」ボタンを押せば完成!

ブロックエディターでツイートを埋め込む方法・ブロックエディターの場合②URLをペーストして埋め込む

クラシックエディタでツイートを埋め込む方法

クラシックエディタでツイートを埋め込む方法は以下の通りです。

STEP
表示したいツイートを選んで「ツイートを埋め込む」を選択

ツイートの右上にある「…」をクリックすると、メニューが下に展開します。

その中の「</>ツイートを埋め込む」をクリックして選択しましょう。

クラシックエディタでツイートを埋め込む方法・ツイートの埋め込み方①ツイートを選ぶ
STEP
「Copy Code」を押して、埋め込み用コードをコピーする

クリックすると別タブで「Twitter Publish」に移動します。(Twitter公式サイトです)

右上に水色の「Copy Code」を押すと、クリップボードに埋め込みのためのコードがコピーされます。

クラシックエディタでツイートを埋め込む方法・ツイートの埋め込み方②ツイートの埋め込みコードをコピー
STEP
埋め込み用コードを記事に貼り付ける

コピーした埋め込みコードを、Wordpressの記事の中にペーストしたら完成。

必ずテキストモードにしてから貼り付けてくださいね。

WordPress記事にタイムラインを埋め込む方法

次は記事中にタイムラインを埋め込む方法についてご紹介します。

STEP
埋め込みたいツイートのアカウントURLをコピーします。

ブラウザ上でタイムラインを載せたいTwitterアカウントのトップページを開きます。

アドレスバーのURLをコピーします。(https://twitter.com/〇〇)
この〇〇はアカウント名になります。
私の場合は、https://twitter.com/tomoka_blogger ですね。

STEP
Twitter Publishでコードを生成する

続いて「Twitter Publish」にアクセスします。

What would you like to embed?」の部分に、コピーしたURLをペーストして、「→」をクリックしましょう。

Wordpress記事にタイムラインを埋め込む方法②Twitter Publishでコードを生成する
STEP
Embedded Timelineを選択する

「Embedded Timeline」と「Twitter Buttons」の選択肢が出てくるので「Embedded Timeline」をクリックします。

するとその下に、記事に貼り付けるコードが生成されるので「Copy Code」をクリックしてコピーします。

Wordpress記事にタイムラインを埋め込む方法③Embedded Timelineを選択する
STEP
WordPressのカスタムHTMLブロックにコードを貼り付ける

記事に戻って、新しく「カスタムHTML」ブロックを作成します。

そこにコピーしたコードを貼り付けたら完成です。

WordPressサイドバーにツイートを埋め込む方法

先に説明したタイムラインは、常に新しいツイートが表示される形になります。

サイドバーやフッターに自分のTwitterのタイムラインを埋め込んで表示おきましょう。

するとそのタイムラインを見て興味を持った方が、ブログからTwitterを見に来てくれる・フォロワーになってくれる可能性があります。

ここではサイドバーに設定する方法を説明します。(フッターも同様にできます)

STEP
タイムライン埋め込み用のコードを生成する

WordPress記事にタイムラインを埋め込む方法の①~③と同じことを行います。

Twitter Publishを使って、コードを生成してコピーしましょう。

STEP
サイドバーのウィジェットを開き、コードを貼り付ける

WordPressの管理画面の「外観」-「ウィジェット」からサイドバーのウィジェットを開き、「カスタムHTML」というブロックをサイドバーに追加します。

その中にコードを貼り付けて保存すれば完成です。

サイドバーのウィジェットを開き、コードを貼り付ける②Wordpressサイドバーにツイートを埋め込む方法

WordPressにTwitterを埋め込む方法/まとめ

以上がWordPressにTwitterを埋め込む方法です。

まとめると、

  • Twitterは記事やサイドバーに埋め込んで表示できる
  • ブロックエディタの場合、埋め込みたいツイートのURLをペーストするだけ
  • クラシックエディタの場合、Twitter Publishで貼り付けるためのコードを生成して貼り付ける
  • タイムラインもTwitter Publishでコードを生成して貼り付けることができる

ということになりますね。

自分のTwitterをアピールしたり、誰かのつぶやきを引用して貼り付けたりして(※)、記事をより分かりやすいものにしていきましょう!
※他人のつぶやきを引用するのに許可は不要です。

以上、ともかでした!

Twitterでもお待ちしていますので、仲良くしてくださいね♪

\この記事も読んでみてね!/

管理人ともかのプロフィール

プロフィール

管理人のプロフィールです。
今までのブログ履歴や実績などについてまとめました。

ブログ作成のロードマップ

ブログ作成のロードマップ

ブログを作りたい!作り始めたばかり!の方向けのロードマップ。まずは0円→1円を狙う収益化できるブログの作り方を学ぼう。

初心者向けの記事一覧

初心者向け記事一覧

初心者向けの記事の一覧はこちらから。

少しでも記事が役に立ったよ!応援するよ!という優しい方がいらっしゃいましたら、ぜひ下のボタンを押してやってくださいな。
喜んで小躍りしちゃいます~~♪

にほんブログ村 ブログブログ ブログ初心者へにほんブログ村
気に入ったらシェアしてね
  • URL Copied!
目次
閉じる