簡単!WordPressにTwitterのタイムラインを埋め込む方法

WordPressの使い方
ワードプレスのサイトに、ツイッターのタイムラインを表示させる方法を教えてほしい!

という人のために、自分のツイートやリツイートをスクロールして見れる「タイムライン」の埋め込み方法を紹介します。

 

Twitter Publish タイムラインの設置

↑この画像の右側の部分のように設置できます。プラグインなどは使わず、簡単に設置できます!

 

スポンサーリンク

タイムラインのコードを生成する

まずはタイムラインの「コード」を生成していきます。

TwitterのタイムラインはTwitter Publishという、ツイッターのウィジェット作成ページから作ることができます。

まずTwitter Publishにアクセスしましょう。ちなみに英語表示になっていますが、そんなに難しくないので苦手な人も心配しなくて大丈夫です。

 

Twitter Publishの使い方

この画面が表示されたら、「Enter a Twitter URL」と書いてあるところに、自分のツイッターアカウントのURLを入力します。

自分のアカウントのトップページのURLをコピぺしましょう。または「https://twitter.com/アカウント名」と手打ちしても大丈夫です。

 

Twitter Publishの使い方

アカウントURLを入力したら、右側の「→」をクリックします。

 

Twitter Publish タイムラインの作成方法

すると、このような画面になるので、左側の「Embedded Timeline」をクリックします。

 

Twitter Publish タイムラインウィジェットの作成方法

下にタイムラインウィジェットのプレビューが表示され、上に生成されたコードが表示されます。このままよければ、右側の「Copy Code」をクリックし、コードをコピーできます。

ですが、このままだと縦の長さが気になるので調整します。長さなどの設定をしたい場合、右上の「set customization options」をクリックします。

 

Twitter Publish タイムラインウィジェットの作成方法

設定できる項目が4つあります。内容は以下の通りです。

  1. 縦の長さ・横の長さ
  2. 画面の背景の指定です。Lightだと白、Darkだと黒になります
  3. リンク文字のカラー
  4. 言語

縦の長さだけ「400」pxにしてしてみました。ここは実際にサイトに貼り付けてから確認した方がわかりやすいです。

とくにスマホは画面の長さが短いので、デフォルトのままだと上から下までタイムラインが表示され、スクロールしにくくなります。設置後は必ず確認してみて下さい。

横幅もプレビューだと広いですが、設置した場所の幅に、自動で合わせてくれるので設定不要です。(サイドバーに設置したら、サイドバーの幅に収まっていました。)

設定が完了したら、右下の「Update」をクリックして、新しいコードを生成します。コードをコピーしたら、ワードプレスに貼り付けます。

 

生成したコードをWordPressに貼り付ける

次に、サイドバーにタイムラインを設置する手順を説明していきます。

ワードプレス ウィジェット

WordPressの管理画面から「外観>ウィジェット」をクリックします。

 

ワードプレス ウィジェット

ウィジェットページが開いたら、

  1. 利用できるウィジェットの中から「テキスト」を選択
  2. 「サイドバー」を選択(使用テーマによって少し表示が違うかもしれません)
  3. 「ウィジェットを追加」をクリック

と進みます。

 

Twitterボタンの設置方法

するとテキスト入力画面になります。右上の「テキスト」タブを開いてから、先ほど作ったコードを貼り付けましょう。これでサイドバーにツイッターボタンを設置出来ます。

「保存」をクリックしたら、実際のページを確認します。

 

Twitter Publish タイムラインの設置

こんな感じで表示されます。ちゃんとサイドバーの幅にきれいに収まっているはずです!

 

タイムラインの埋め込みと同じような方法で、フォローボタンも作ることができます。手順はWordPressでTwitterのフォローボタンを設置する方法を参考にしてみて下さい。

以上がワードプレスにツイッターのタイムラインを埋め込む方法でした。

サイトと合わせてTwitterを運用していきたい人や、フォロワーを増やしたい人などにおすすめです。

タイトルとURLをコピーしました