【簡単】WordPressにTwitterを埋め込む方法【ツイートとタイムラインの両方を解説します】

「ワードプレスを使ってブログを運営しているけど、Twitterの投稿を埋め込みたい。どうやってやるんだろう。」

こういった疑問を解決します。

Twitterのサイトへの埋め込みに関しては、主に2種類があります。

  • ブログ記事内に情報の補足としてツイートを埋め込む
  • サイトのサイドバーなどにタイムラインを埋め込む

この記事では、この2種類の方法について解説していきます。



ツイートを埋め込む方法

ツイートの埋め込みは、主に下記の2種類の方法で行うことができます。

  • URLのコピペで埋め込む
  • コードを取得して埋め込む

この内容について詳しく解説していきます。

URLをコピペする方法

この方法は基本的にはワードプレス限定の方法です。
そしてかなり簡単です。

手順は以下のとおりとなっています。

  • STEP.1
    ツイートのURLをコピー

    Twitterで埋め込む対象となるツイートを開き、URLをコピーしておきます。

  • STEP.2
    記事内にペースト

    コピーしたURLを記事内の好きな場所へペーストします。
    ※画像はテキストモードになっていますが、ビジュアルモードでもOKです。

これでツイートの埋め込みは完了です。

ちなみに以下が実際に埋め込んだツイートとなります。

よく見る形式ですね。
続いてコードを取得する方法を見ていきましょう。

コードを取得する方法

コードを取得する方法は、はてなブログなどのワードプレス以外でも使用できる方法となっています。
一応こちらの方法も解説しておきます。

手順は以下の通りです。

  • STEP.1
    ツイートのコードを表示する

    Twitter内で対象のツイートの右上にある「∨」をクリックします。
    ここで表示された「ツイートをサイトに埋め込む」を選択しましょう。

  • STEP.2
    コードをコピー

    表示されたコードを全てコピーします。

  • STEP.3
    記事にペースト

    コピーしたコードを記事内の好きな場所へペーストします。
    ※ワードプレスの場合は、テキストモードでペーストしてください。

これでツイートの埋め込みは完了です。

ちなみに以下が実際に埋め込んだツイートとなります。

表示自体は変化なしです。
他のブログサービスならこの手法を使ってもいいですが、ワードプレスであればリンクを貼り付ける方法が簡単なので、圧倒的にリンクをおすすめします。

これで、ツイートの埋め込みに関する内容は以上です。

タイムラインを埋め込む方法

僕のサイトもそうですが、サイトによってはサイドバーやフッターに「タイムライン」という、自分のツイートをスクロールしてみれる場所を設置しているサイトもあります。

この方法に関しては以下の2つの作業を行うことで、設置することが可能です。

  • タイムラインのコードを取得
  • ウィジェットにコードの貼り付け

これも結構簡単に設置できる方法なので、順に解説していきます。

タイムラインのコードを取得する

タイムラインのコードを取得するには「Twitter Publish」というサイトを使用します。

ここにアクセスした上で作業を進めていきましょう。

  • STEP.1
    URLを入力

    サイトを開き、自分のツイッターアカウントのURLを入力し、「→」をクリックします。

  • STEP.2
    タイムラインを選択する

    上記の画面で左側の「Embedded Timeline」をクリックして、タイムラインを選択しましょう。

  • STEP.3
    カスタマイズを行う

    右上の「Set customization options」をクリックすると、タイムラインのカスタマイズを行うことができます。
    内容は以下の4つ。

    • 縦と横の幅の指定
    • 背景色の指定
    • リンクの文字色の指定
    • 言語

    高さ(Height)は未設定だと、かなり下に長いタイムラインになってしまいます。
    なので、ここは400pxくらいで設定しておきましょう。
    その他はわりとデフォルトでもOKです。

  • STEP.4
    コードのコピー

    できあがったコードをコピーしておきましょう。

これで貼り付けコードの準備は完了です。

ウィジェットにコードを貼り付ける

ここではウィジェットに貼り付けることのできるエリアを準備して、実際にタイムラインのコードを貼り付けていきます。

手順は以下の2ステップです。

  • STEP.1
    ウィジェットにテキストを追加

    ワードプレス管理画面で「外観」→「ウィジェット」で、ウィジェット画面に移動します。
    ここで対象のウィジェットに「テキスト」を追加しましょう。
    ※操作はドラッグ&ドロップでOKです。

  • STEP.2
    コードの貼り付け

    先ほど取得したタイムラインのコードを貼り付け、「保存」をクリックします。
    ※この時、ビジュアルではなく「テキストモード」にしてから貼り付けを行いましょう。

これでサイトにタイムラインが表示されるようになりました。

今回の内容は、これで以上となります。

記事にツイートを埋め込むことで情報を補足できたり、タイムラインを埋め込むことでTwitterアカウントとサイト運営者をつなぐことができるようにもなります。
超簡単な方法になので、ぜひ試してみてください。

オススメ【収益化】おすすめのアフィリエイトASP5選【すべて登録でOK】

人気記事【簡単すぎる】アプリ紹介する場合にキレイにリンクを貼る方法【アプリーチが便利です】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA