今回は、WordPressでブログ運営をされている方向けに、サイドバーやフッターにTwitterのリアルタイムラインを埋め込む方法をご紹介します！

完成形イメージはこんな感じで、サイドバーなどに埋め込み、Twitterが更新されるとブログサイトの埋め込みタイムラインも自動的に更新される仕組みになっています。

一見難しそうに見えますが、この記事通りに進めていけばたったの3分程度で埋め込みが完了するので、ぜひ手を動かしながら記事を読み進めてください！

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

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で自分好みに高さや幅をカスタマイズしていきます。

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のタイムラインを埋め込む場合は、、、

1. WordPressの管理画面にログイン
2. 外観→ウィジットと進む
3. サイドバーに「テキスト」を追加
4. コピーしたコードを貼り付け
5. 保存する

このような手順で、貼り付けていけばサイドバーにTwitterのタイムラインが埋め込まれていると思います！

5.高さ（height）を微調整する

サイドバーにTwitterのタイムラインを埋め込むことができたけど、高さが微妙。。。

こんな問題が出てくることでしょう。

その際には、ソースコード内の data-height=””の数値を変えてあげればOKです！

• data-height=”1000″：数字が大きいほど高さが大きくなる
• data-height=”100″：数字が小さいと高さが小さくなる

Ex. フォローボタンを作成する

タイムラインを埋め込むことができましたが、「あれ？フォローボタンがない！」と思われる方もいることでしょう！

このソースコードは、タイムラインを表示するだけのコードなので、フォローボタンがありません。

方法はとっても簡単で、https://publish.twitter.com にサイドアクセスし、Twitter Buttonsを選択します。

下に生成されたソースコードをコピーします。

そして、先ほど貼り付けたタイムラインのソースコードの直前に貼り付けて保存すればOKです！

Twitterの個別ツイートを記事内に埋め込む

次に、Twitterの個別ツイートをブログ記事内に埋め込む方法をご紹介します！

イメージとしてはこんな感じです！

世界遺産の街ホイアンの旧市街地にあるランタンを撮ってみた。

ランタン一つ一つ見て欲しいが、細部までこだわった綺麗な模様が描かれている。 pic.twitter.com/6XKSQUAawm

— HikoPro@フリーランスエンジニア (@Hiko_Pro) 2019年9月10日

このように、Twitterに表示されているツイートをそのまま記事内に埋め込むことができます。

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

ツイートをサイトに埋め込むを選択します。

このように、ソースコードが生成されるので、コピーし記事内に貼り付ければ完成です！

WordPressのブログやサイトにTwitterのタイムラインを埋め込む方法 まとめ

いかがでしたでしょうか！

こちらの記事では、Instagramのタイムラインの埋め込みも解説しているので、ぜひ試してみてください！

WordPressのサイトにInstagramを埋め込む方法【レスポンシブ対応】

最後までご覧いただきありがとうございました！