HTML Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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>

まとめ

今回はTwitterのタイムラインを埋め込む方法を解説しました。

実務でもよく使うと思うので、実装できるようになっておきましょう。

以上になります。

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

続きを見る

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-HTML, Web制作
-