Web制作

Twitterのタイムラインを埋め込む方法【カスタマイズ方法も解説】

Twitterのタイムラインを埋め込むにはどうしたらいいんだろう?

タイムラインは常に最新のツイートから表示されるので、Twitterをよく更新しているサイトであればお知らせ代わりとしても使えますね。

今回はHTMLにコードを埋め込んでタイムラインを表示させる方法と、カスタマイズ方法も解説していきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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

Twitterのタイムラインを埋め込む手順は以下になります。

  1. 公式サイトにアクセス
  2. タイムラインのコードをカスタマイズして取得
  3. HTMLにコードを貼る

それでは順番に解説していきます。

 

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

まずはTwitter公式ページにアクセスします。

Twitter Publish

こちらの画面が表示されるので、ここにTwitterのURLを入力してEnterキーを押します。

Twitter Publish:TwitterのURLを入力

TwitterのURLを入力

TwitterのURLはプロフィール画面のURLですね。

Twitterプロフィール画面:URL

Twitterプロフィール画面:URL

このURLを入力してEnterキーを押すと自動で下にスクロールして次の表示が出てくるので、左のタイムラインの方をクリックします。

Twitter Publish:Embedded Timeline選択

Embedded Timeline選択

するとまた少し下にスクロールして次の表示が出てくるので、右の『Copy Code』をクリックします(コードの色が薄いですが気にしなくてOKです)

Twitter Publish:Twitterタイムライン埋め込みコードをコピー

Twitterタイムライン埋め込みコードをコピー

ちなみに枠内をクリックしてもコピーできます。

そしてコードをHTMLの表示させたい場所に貼り付ければ完了です。

ただし、このままだとデカいし長いのでそのまま使うのは現実的ではありません。

そこでカスタマイズをしていきます。

 

Twitterのタイムライン埋め込みコードをカスタマイズ

先ほどの『Copy Code』をクリックする前に、その上にある『set customization options』をクリックします。

Twitter Publish:Twitterタイムライン埋め込みコードカスタマイズ

Twitterタイムライン埋め込みコード:カスタマイズ

するとこのような画面が表示されます。

Twitter Publish:Twitterタイムライン埋め込みコードカスタマイズ画面

Twitterタイムライン埋め込みコード:カスタマイズ画面

全部で4か所設定することが出来ます。

Height(px)高さの設定
Width(px)幅の設定
Light(初期値)背景色の設定(LightかDarkの2択)
Automatic(初期値)言語の設定(Automaticは見ている人の環境に合わせる)

背景色は一般的には初期値であるLightかなと思います。

言語の設定も『Automatic』で大丈夫なので、幅と高さを設定したら右下の『Update』をクリックしてから再度コードをコピーしてHTMLに貼り付ければOKです。

 

さらにカスタマイズ

先ほど書いたカスタマイズ画面以外にも、直接コードを書いてカスタマイズ出来る項目があります。

data-border-color=”カラーコード”境界線の色
data-chrome=”noborders”境界線を消す
data-chrome=”noheader”ヘッダーを非表示にする
data-chrome=”nofooter”フッターを非表示にする
data-chrome=”noscrollbar”スクロールバーを非表示にする
data-chrome=”transparent”背景を透明にする
data-tweet-limit=”1~20の数字”表示させたいツイートの数

補足①

data-chrome系は、半角スペースを入れれば複数同時に設定することも可能です。
例)data-chrome="noheader nofooter"

補足②

data-tweet-limitは設定すると高さの設定が無視されスクロールがなくなって全部表示されます。なので1か2ぐらいがおススメです(20にしたら大変な長さになります)

実際これらのコードをどこに入れるかというと、最初の公式ページでカスタマイズしたコードが次だとします。

<a
  class="twitter-timeline"
  data-width="300"
  data-height="300"
  data-theme="light"
  href="https://twitter.com/junpei_sugiyama?ref_src=twsrc%5Etfw"
  >Tweets by junpei_sugiyama
</a>
<script
  async
  src="https://platform.twitter.com/widgets.js"
  charset="utf-8"
></script>

そしてこのaタグの中に入れればいいので、次のような感じになります。

<a
  class="twitter-timeline"
  data-width="300"
  data-height="300"
  data-chrome="noheader nofooter"
  data-border-color="#ff6347"
  data-theme="light"
  href="https://twitter.com/junpei_sugiyama?ref_src=twsrc%5Etfw"
  >Tweets by junpei_sugiyama</a
>
<script
  async
  src="https://platform.twitter.com/widgets.js"
  charset="utf-8"
></script>

以上になります。

あわせて読む
【WordPress】インスタグラムのタイムラインを表示できる『Smash Balloon Social Photo Feed』の使い方
【WordPress】インスタグラムのタイムラインを表示できる『Smash Balloon Social Photo Feed』の使い方

続きを見る

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作
-