WordPress ブログ

WordPressブログにTwitterタイムラインを埋め込む方法

更新日 :

WordPressブログにTwitterタイムラインを埋め込む方法

「WordPressブログ内にTwitterタイムラインを表示させたい!」
「ブログでTwitterタイムラインを埋め込む方法を知りたい!」

今回はそんな方に向けて、WordPressブログでTwitterのタイムラインをブログ内に埋め込む方法をご紹介します。

自サイトのフッターやサイドバーに設置しておけば、自分の宣伝にもなりますし、Twitterのフォロワーを増やすきっかけにもなります。

今回はTwitterタイムラインをサイドバーに表示する方法をご紹介していきます!

今回のテーマ

  • Twitterタイムラインをブログ内に埋め込む方法
  • 埋め込んだタイムラインをカスタマイズする方法

当サイトではプログラミングやWebサイト運営に関する記事を毎日投稿しています。
他の記事も合わせて読んでいただけると嬉しいです。

\今なら当サイト限定の豪華特典付き/

AFFINGER6の詳細を見る

Twitterタイムラインを埋め込むコードを取得

まずはTwitterタイムラインを埋め込むための専用コードを取得していきます。

最初にTwitter Publishにアクセスしましょう。

Twitter Publishとは自分のツイートや他の人のツイートをウェブサイトに埋め込むためのコードを発行してくれるサイトです。

step
1
Twitter Publishに自分のTwitterプロフィールのURLを入力

twitterpublish画面

Twitter Publishにアクセスしたら「What would you like to embed?」と書かれた入力欄があります。

入力欄に自分のTwitterプロフィールのURLを入力しましょう

ちなみにTwitterプロフィールのURLは「https://twitter.com/ユーザー名になります。

入力が完了したらEnterキーを押しましょう。

step
2
埋め込み形式では「タイムライン」を選択

デザイン選択

TwitterプロフィールのURLの入力が完了すると上のような画面が表示されるます。

ここではどのような形式でTwitterを埋め込むかを選択できます。

左側が「Twitterタイムライン形式」右側が「Twitterボタン形式」ですので、今回は左側をクリックしましょう。

step
3
発行されたコードをコピー

コードコピー

上画面のようにタイムラインを埋め込むHTMLコードが発行されますので「Copy Code」をクリックして、コードをコピーしましょう。

Twitterタイムラインを埋め込むコード発行はこれで完了です。

続いてはコピーしたコードを使ってTwitterタイムラインをブログ内に設置していきましょう。

WordPress管理画面でウィジェットを設定

さてここからはWordPress管理画面からサイドバーにTwitterタイムラインを埋め込んでいきます。

step
1
WordPressのウィジェット画面に移動

まずはWordPressダッシュボードから「外観」→「ウィジェット」に移動しましょう。

ウィジェット画面

ウィジェット画面ではこのように、左側にウィジェット一覧右側に設置場所に分かれています。

step
2
ウィジェットをサイドバーに設置

ウィジェット追加

左側のウィジェット一覧に「テキスト」というボックスがありますので、「サイドバートップ」または「サイドバーウィジェット」に設置しましょう。

step
3
埋め込みコードをウィジェットにペースト

コード貼り付け

「テキスト」を設置できたら「ビジュアル」タブから「テキスト」タブに切り替えて、先ほどコピーしたHTMLコードをペーストします。

ペーストできたら「保存」をクリックして変更を保存しましょう。

完成形

こんな風に表示されていれば埋め込みは完了です!

埋め込んだTwitterタイムラインをカスタマイズする方法

ブログにTwitterタイムラインを設置したものの

「なんだか縦に長過ぎる」
「横幅を調整したい」

そんな悩みがあるかもしれません。

そこでここでは、WordPressブログに設置したTwitterタイムラインをカスタマイズする方法について解説します。

まずは先程コピーしたTwitter Publishの画面に戻ります。

カスタマイズ

すると上画面のように「set customization options」と書かれた青文字がありますので、こちらをクリックします。

カスタマイズ

するとこのように4つの設定項目が表示されます。

上から順番に

  • 高さ(px)
  • 横幅(px)
  • ライドモード・ダークモード
  • 標準言語

を設定できます。

基本的にモードや言語を変更することはないと思いますので、ここでは高さと横幅をカスタマイズしましょう。

画像を見たら分かるように、私は縦の長さを900pxにしています。

それぞれお好みに合わせて長さを設定しましょう!

カスタマイズが完了したら「Update」ボタンを押して、新しいリンクを取得します。
リンクを新しく取得したら、再びWordPressのウィジェット画面からリンクをペーストし直しましょう

ポイント

ブログの色合いで黒を多く使用している方はダークモードに切り替えた方が良いでしょう。

まとめ:WordPressブログにTwitterタイムラインを埋め込もう!

まとめ

  • Twitterタイムラインはカンタンに埋め込める
  • ブログの外観と組み合わせてカスタマイズしよう

今回はWordPressブログでTwitterタイムラインを埋め込む方法について解説しました。

Twitterタイムラインはコピーしたコードを貼り付けるだけでカンタンに設置することが出来ます。

自分を多くの人に知ってもらう、Twitterのフォロワーを増やすためには欠かせない項目ですのでぜひ設置しちゃいましょう!

わからない部分がある方はお問合せフォームで質問して貰えばすぐに返信します。

今サイトではこれからもウェブサイト運営に関する有益な情報をたくさん発信していきたいと思っていますので応援よろしくお願いします!

\今なら当サイト限定の豪華特典付き/

AFFINGER6の詳細を見る

ブログが思うように伸びなくて挫折しかけている方へ
初心者・未経験者でも大丈夫。
読むだけでその日から実践できるSEO対策を学びませんか?
>> 個人ブログを月間96,000PVに育て上げた裏ワザを徹底解説
>> ブログ開始4ヶ月でドメインパワーを0→28に上げた方法を全部教えます

  • この記事を書いた人(著者情報)
wagtechblog

wagtechblog

本サイトの運営者・管理人。慶應義塾大学環境情報学部卒。人材系のWeb系メガベンチャー企業に新卒入社。兼業でフリーランスとしてiOSアプリ開発、Web開発、Webメディア運営、SEOマーケティング等を行う。IT人材系のベンチャー企業でiOSエンジニア、Web系メガベンチャー企業でWebアプリケーションエンジニア、士業のスタートアップ企業でフロントエンドエンジニア、Web系メガベンチャー企業でプロダクトマネージャー兼SEOディレクター、ゲーム系のスタートアップ企業で最高技術責任者(CTO)、学生向けプログラミングスクールで講師の勤務経験あり(インターンを含む)。好きなプログラミング言語はSwiftとPythonとPHPとRubyとJavaScript。侍エンジニア塾元受講生。エンジニアやプログラミングスクールでの体験・経験に基づいた記事を執筆。
保有資格:ITパスポート / 基本情報技術者試験 / TOEIC730点 / 日商簿記3級

-WordPress, ブログ

Copyright © wagtechblog All Rights Reserved.