【WordPress】ブログページにTwitterのタイムラインとフォローボタンを設置する方法

ブログページに以下のようにTwitterのタイムラインとフォローボタンを設置したので、その方法を説明します☆
とっても簡単でした!

ブログページにTwitterのタイムラインを設置する方法

まず、タイムラインの設置方法ですが、手順を簡単に示すとこんな感じです!

  1. 1.TwitterのURLをコピー
  2. 2.「1」でコピーしたURLを「https://publish.twitter.com/#」に貼りつけてコードを取得
  3. 3.WordPress管理画面の「外観」(ウィジェット)で、新規に「テキスト」を設置したい場所に追加
    (私の場合は、「サイドバー」の一番下に追加)
  4. 4.設置した「テキスト」に「2」でコピーしたコードを貼りつけ

TwitterのURLをコピー

次のように設置したいTwitterアカウントのページのURLをコピーします。

コピーしたTwitterURLを「https://publish.twitter.com/#」に貼りつけてコードを取得

以下のリンクサイトに、先程コピーしたTwitterのページURLを貼り付けます。

Twitter Publish

張り付けて実行すると、次のような画面に遷移するので、左の「埋め込みタイムライン」を選択後、「カスタマイズオプションを設定する。」をクリックします。

そうすると、次のような入力欄が表示されるので、各項目に入力又は選択します。
参考として、私は高さ2425px、幅350pxにしています。後でも数値の変更は可能です!
光か闇かの選択は表示される外観の色ですが、好みで白っぽい方(光)、黒っぽい方(闇)を選んでください。
言語は、「自動」又は「日本語」どちらかを選んでください。
入力等が完了したら、「更新」ボタンを押下してください。

「更新」ボタン押下後、一つ前の画像の表示に戻るので、下側に表示されている「コード」をコピーします。(「コードをコピー」をクリック)

WordPress管理画面の「外観」(ウィジェット)で、新規に「テキスト」を設置したい場所に追加

次にWordPress管理画面に移ります。

「外観」→「ウィジェット」の画面にて、新規に「テキスト」を設置したい場所に追加します。(私の場合は、「サイドバー」の一番下に追加)

設置した「テキスト」にコピーしたTwitterコードを貼りつけ

下の図のように追加後、エディターを「テキスト」にして、先程コピーしたTwitterのコードを張り付けます(緑色の枠参照)。
(水色の枠は、後程説明する「フォローボタン」のコードです。)

表示サイズを変更したい場合は、緑色の枠内の2つの数値を変更します。
⇨「width=”横幅”」、「height=”高さ”」

これで、Twitterタイムラインの設置は完了です。

【参考】「特定のページ」に「特定のTwitterアカウント」のタイムラインを表示可能

私の場合、「特定の1つのページ」に「特定のTwitterアカウント」のタイムラインを表示したかったので、以下の図のように、投稿IDを指定して表示するようにしています。
この方法であれば、複数のTwitterアカウントを所有していて、それぞれのアカウントのタイムラインを、異なるブログページに表示することも可能です。

ブログページにTwitterのフォローボタンを設置する方法

次にフォローボタンの設置方法ですが、流れはほとんどタイムラインと同じです。

タイムラインと同様に、「https://publish.twitter.com/#」にTwitterURLを張り付けて実行します。

すると、次のような画面が表示されるので、設置したい方を選択してください。(私はフォローボタンを選択)

「カスタマイズオプションを設定する。」をクリックすると、次のような表示が出ますので、好みで選択後、「更新」をクリックします。

後は、タイムラインの時と同様にウィジェット(テキスト)にコードを張り付ければ完了です♪(水色枠の部分)

ちなみに「フォローボタン」を表示下部に設置したい場合は、フォローボタン設置用のコード(水色枠の部分)を、タイムライン設置用のコード(緑色枠の部分)の下側に移動するだけでOKです!

以上で、Twitterのタイムラインとフォローボタンの設置方法は終了です。

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

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