ブログ収益化

ブログにTwitterのタイムラインを埋め込む方法【画像でわかりやすく解説】

Twitterタイムライン

ブログのサイドバーにTwitterのタイムラインを表示したいんだけどどうやってやるんだろう?

こんな悩みを解決します。

いろんな人のブログをみているとサイドバーやフッターにTwitterのタイムラインを埋め込んでいるのをよく見ませんか?

こんなやつですね。↓

本記事では、ブログにTwitterのタイムラインを埋め込む方法を画像付きでわかりやすく解説していきます。

3分ほどで誰でも簡単にできてしまうのでまだブログにTwitterのタイムラインを表示していない人はぜひ参考にしてみてください。

ブログにTwitterのタイムラインを埋め込む手順

手順は簡単4ステップです。

簡単な流れ

  • 埋め込みたいタイムラインのURLをコピーする
  • Twitter PublishにアクセスしてURLをペーストする
  • 高さやデザインを設定する
  • ワードプレスにコードを貼り付ける

step
1
埋め込みたいタイムラインのURLをコピーする

まずは埋め込みたいタイムラインのURLをコピーしましょう。

Twitterタイムライン

step
2
Twitter PublishにアクセスしてURLをペーストする

次にTwitter Publish(https://publish.twitter.com/#)にアクセスしてコピーしたURLをボックス内に貼り付けます。

URLを貼り付けたらボックス右側にある矢印をクリックしましょう。

Twitterタイムライン

step
3
高さやデザインを設定する

画面左側の[Embedded Timeline]をクリックします。

Twitterタイムライン

[set customization options]をクリックしましょう。

Twitterタイムライン

高さ、幅、デザイン、言語を設定して[Update]をクリックします。

Twitterタイムライン

メモ

  • 高さ:480(px)がおすすめです
  • 幅:レスポンシブ対応済みなのでブランクでOKです
  • デザイン:Lightは白、darkは黒です
  • 言語:AutomaticでOKです

設定が完了したら[Copy Code]をクリックしましょう。

(タイムラインの埋め込み用URLがコピーされます)

Twitterタイムライン

step
4
ワードプレスにコードを貼り付ける

ワードプレスを開いて、[外観]→[ウィジェット]をクリックします。

利用できるウェジェットにある「カスタムHTML」をサイドバートップにドラッグ&ドロップします。

Twitterタイムライン

カスタムHTMLの「内容」にコピーしたURLを貼り付けて[保存]をクリックします。

Twitterタイムライン

これでサイドバーにTwitterタイムラインの埋め込みが完了です。

ブログにTwitterのフォローボタンを埋め込む手順

タイムラインと合わせてフォローボタンもつけてみましょう。

簡単な流れ

  • Twitter PublishにアクセスしてURLをペーストする(タイムラインの時と同じ)
  • ボタンの種類を選択する
  • ワードプレスにコードを貼り付ける

step
1
Twitter PublishにアクセスしてURLをペーストする(タイムラインの時と同じ)

Twitter Publish(https://publish.twitter.com/#)にアクセスしてTwitterのURLを貼り付けましょう。

Twitterタイムライン

step
2
ボタンの種類を選択する

画面右側の[Twitter Buttons]をクリックします。

Twitterタイムライン

画面左側の[Follow Button]をクリックしましょう。

Twitterタイムライン

ボタンの種類を選択したら[Copy Code]をクリックします。

(埋め込み用URLがコピーされます)

Twitterタイムライン

ワードプレスの[外観]→[ウィジェット]をクリックして「カスタムHTML」にURLを貼り付けて[保存]ボタンをクリックします。

Twitterタイムライン

これでフォローボタンの埋め込みが完了しました。

ブログにTwitterのタイムラインとフォローボタンを埋め込んでみよう

今回はブログにTwitterのタイムラインとフォローボタンを埋め込む方法をご紹介しました。

完成形は以下のとおり。

Twitterはブログのアピールポイントの1つになるので、Twitterをしている人はぜひブログにもタイムラインを埋め込んでみてください。

今回は以上です。

人気記事 MozBarの設定方法と使い方を画像付きで解説【競合サイト分析必須ツール】

人気記事 ブログアフィリエイトのおすすめツールとサービス10選【初心者はまずはこれを揃えよう!】

\この記事はどうでしたか?/

-ブログ収益化
-, ,

© 2020 Yuta Life Blog Powered by AFFINGER5