

WordPressでブログやサイトを運営していて、サイドバーやフッターにTwitterのタイムラインを埋め込みたい!
どうすればいいか分からないので、簡単なTwitterの埋め込み方法を教えて欲しい!
できればプラグインを使わない方法で!
今回は、WordPressでブログ運営をされている方向けに、サイドバーやフッターにTwitterのリアルタイムラインを埋め込む方法をご紹介します!
完成形イメージはこんな感じで、サイドバーなどに埋め込み、Twitterが更新されるとブログサイトの埋め込みタイムラインも自動的に更新される仕組みになっています。
一見難しそうに見えますが、この記事通りに進めていけばたったの3分程度で埋め込みが完了するので、ぜひ手を動かしながら記事を読み進めてください!
- TwitterのリアルタイムラインをWordPressサイトに埋め込める
- ブログのサイドバーにTwitterのタイムラインを埋め込める
- たったの3分プラグインいらずでTwitterを埋め込む方法が分かる
WordPressのブログやサイトにTwitterのタイムラインを埋め込む方法

WordPressのブログやサイトにTwitterのタイムラインを埋め込む流れを、まずはざっくりとご紹介します。
- https://publish.twitter.com にアクセス
- 入力ボックスに アカウントのURLをコピペ
- Embedded Timelineを選択
- set customization optionsで自分好みにカスタマイズ
- コードをコピー
- WordPressの管理画面から好きな場所にコードをペースト
- Twitterの埋め込み完成!
やることはたったのこれだけで、準備するものは自分のTwitterアカウントのURLのみでOKです!
https://publish.twitter.com を使えば、、、
このように背景を黒にして埋め込めできます。
こんな感じに、公式のフォローボタンも簡単に作れちゃいます!

順番に詳しく解説していきますね!
1.https://publish.twitter.com にアクセスしアカウントURLをコピペ

まずは、https://publish.twitter.com にアクセスします。
入力ボックスがあるので、そこの埋め込みたいTwitterアカウントのURLをコピペします。
一般的には、「https://twitter.com/ユーザー名」になっています。
コピペしたら、右の→ボタンをクリックします。
2. Embedded Timelineを選択

次に、タイムラインを生成するか、フォローボタンを生成するか聞かれるので、Embedded Timelineを選択し、タイムラインを作ります。
3.set customization optionsで自分好みにカスタマイズ
Embedded Timelineを選択すると、埋め込みコードが表示されますが、それをそのままブログに貼り付けても高さが微妙だったりします。
なので、set customization optionsで自分好みに高さや幅をカスタマイズしていきます。

まずは、set customization optionsをクリックします。

- Height:高さ(600pxがオススメ)
- Width:ブログ側で自動調整してくれるので空白でOK
- 背景色を白か黒を選択
- 言語を日本語に
- Updateをクリックしてコードを生成
4.コードをコピーしWordPressの管理画面から好きな場所にペースト
<a class="twitter-timeline" data-lang="ja" data-theme="light" data-link-color="#2B7BB9" href="https://twitter.com/Hiko_Pro?ref_src=twsrc%5Etfw">Tweets by Hiko_Pro</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Updateをクリックすると、このようなソースコードが生成されるので、このコードをコピーします。
サイドメニューにTwitterのタイムラインを埋め込む場合は、、、

- WordPressの管理画面にログイン
- 外観→ウィジットと進む
- サイドバーに「テキスト」を追加
- コピーしたコードを貼り付け
- 保存する
このような手順で、貼り付けていけばサイドバーにTwitterのタイムラインが埋め込まれていると思います!
5.高さ(height)を微調整する
サイドバーにTwitterのタイムラインを埋め込むことができたけど、高さが微妙。。。
こんな問題が出てくることでしょう。
その際には、ソースコード内の data-height=””の数値を変えてあげればOKです!
- data-height=”1000″:数字が大きいほど高さが大きくなる
- data-height=”100″:数字が小さいと高さが小さくなる
Ex. フォローボタンを作成する
タイムラインを埋め込むことができましたが、「あれ?フォローボタンがない!」と思われる方もいることでしょう!
このソースコードは、タイムラインを表示するだけのコードなので、フォローボタンがありません。
←このようなフォローボタン付きのタイムラインを作ってみましょう!

方法はとっても簡単で、https://publish.twitter.com にサイドアクセスし、Twitter Buttonsを選択します。
下に生成されたソースコードをコピーします。

そして、先ほど貼り付けたタイムラインのソースコードの直前に貼り付けて保存すればOKです!
Twitterの個別ツイートを記事内に埋め込む
次に、Twitterの個別ツイートをブログ記事内に埋め込む方法をご紹介します!
イメージとしてはこんな感じです!
世界遺産の街ホイアンの旧市街地にあるランタンを撮ってみた。
— HikoPro@フリーランスエンジニア (@Hiko_Pro) 2019年9月10日
ランタン一つ一つ見て欲しいが、細部までこだわった綺麗な模様が描かれている。 pic.twitter.com/6XKSQUAawm
このように、Twitterに表示されているツイートをそのまま記事内に埋め込むことができます。

Twitterのツイート画面に行き、埋め込みたいツイートの右上にある、下矢印のアイコンをクリックします。
ツイートをサイトに埋め込むを選択します。

このように、ソースコードが生成されるので、コピーし記事内に貼り付ければ完成です!
- 旧エディター:テキストタイプで埋め込み
- Gutenberg:カスタムHTMLで埋め込み
このように、エディタによって埋め込み方が異なるので、上記の方法で試してみてください!
WordPressのブログやサイトにTwitterのタイムラインを埋め込む方法 まとめ

一見難しそうだけど、案外カンタンにできたよ!
いかがでしたでしょうか!
こちらの記事では、Instagramのタイムラインの埋め込みも解説しているので、ぜひ試してみてください!
最後までご覧いただきありがとうございました!
