簡単!Twitterのタイムラインをブログに埋め込む方法 2016

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2016年12月15日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

こんにちは!tomomiです。

STUDIO SEROのサイトをリニューアルするにあたり、私もちょこちょこ手伝っているのですが、Twitterのタイムラインをサイトに貼り付けるとき、やり方が昔と少し変わっていたので、メモがてらご紹介しようと思います。

まずは、Twitterのサイトでウィジェットを作成します

  1. Twitterのサイトにログインしたら、設定>ウィジェット>新規作成>プロフィール をクリック。
    161215twitter01
     
  2. 下記のような画面に移動するので(関係ないところに飛ばされたのかと、ドキッとしました)、自分のTwitterホームのURL(https://twitter.com/アカウント名)を貼り付けて、矢印をクリック。
    161215twitter02
     
  3. 「タイムラインにする?ツイートボタンにする?」と聞いてきますので、左の「embedded timeline(タイムラインを埋め込む)」を選択します。
    161215twitter03
     
  4. すると、貼付け用のコードと貼り付けイメージが表示されます。カスタマイズしたい場合は「set customization options」をクリック。
    161215twitter09
     
  5. 「高さ・幅」「色」「言語」の設定が出来ます。編集が終わったら、「update」をクリック。
    161215twitter08
     
  6. カスタマイズが反映されたコードが表示されるので、「Copy Code」をクリック。
    161215twitter04
     
  7. コピーできました!
    161215twitter05
     

サイトにコードを貼り付けます

  1. 自分のサイトの、タイムラインを貼り付けたい箇所を開き、コピーしたコードをそのままペタリと貼り付けます。
    今回は、Wordpressのサイドバーウィジェットに貼り付けました。
    161215twitter06
     
  2. 無事、タイムラインが表示されました!
    161215twitter07
     

というわけで、表記がほぼ英語なので一瞬とまどいましたが、やってみるとあっという間にできて簡単でした。

設置を考えている方は、参考になさってみてくださいね!