Twitter: タイムラインの埋め込み・カスタマイズするには?

Twitter: タイムラインの埋め込み・カスタマイズするには?

Webサイト上に、Twitterタイムラインの埋め込みを表示する方法を紹介します。また、カスタマイズの方法についても一覧にして紹介します。

タイムラインの埋め込み

まず、Twitter Publish(https://publish.twitter.com/#)にアクセスします。

今回は、とあるプロフィールページの埋め込みを表示しようと思うので、以下のように、フォームにプロフィールページのURLを入力します。

矢印アイコンをクリックすると、以下のように選択肢が出てきます。今回は、タイムラインの埋め込みなので、左の「Embedded Timeline」をクリックします。

すると、以下のようにURLが生成されます。これをこのままコピーして使っても良いのですが、カスタマイズをする際は、「set customization options」と書いてある青いリンクをクリックします。

すると以下のように、カスタマイズの設定を行えるようになるので、設定が終わったら、右下の「Update」をクリックして、埋め込みURLを再度生成します。

カスタマイズの内容にもよりますが、以下のようなURLが生成されたかと思います。

<a class="twitter-timeline" data-lang="ja" data-width="220" data-height="200" data-theme="dark" data-link-color="#19CF86" href="https://twitter.com/YoheiHarinezumi?ref_src=twsrc%5Etfw">Tweets by YoheiHarinezumi</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

さらにカスタマイズする

上記のURLを貼り付ける前に、実はさらにカスタマイズすることができます。

URLを見るとわかるのですが、「data-X=”Y”」という部分が、いくつも並んでいます。その並びに、同じように他のカスタマイズのオプションを追加することで、さらにカスタマイズすることが可能になります。

設定できる項目を、以下に一覧にしました。

指定できるもの一覧

属性 設定内容 指定できる値
data-width 横幅 数字(px)
data-height 高さ 数字(px)
data-chrome フレーム * 下の別表を参照
data-tweet-limit ツイート数 1〜20
data-aria-polite アクセシビリティ polite, assertive
data-theme テーマ(全体の色味) light, dark
data-link-color リンクテキストの色 カラーコード (例:”#00FF00″など)
data-lang 言語 国コード (例:”ja”や”en”など)

data-chromeで指定できる値

以下の値は、半角スペースで区切ることで、複数指定が可能です。

指定できる値 設定内容
noheader ヘッダー非表示
nofooter フッター非表示
noborders 線の非表示
noscrollbar スクロールバーの非表示
transparent 背景の透明化

ツイート数を5件にする

data-tweet-limit="5"

ヘッダーを非表示

data-chrome="noheader"

テーマはダーク・ヘッダー非表示・フッター非表示・背景の透明化

data-theme="dark" data-chrome="noheader nofooter transparent"

特に、「data-chrome」と「data-tweet-limit」は、先ほどのカスタマイズ画面でも設定できない部分で、Twitter の公式ドキュメントには載ってはいるものの、一般の方は公式ドキュメントなど見ないと思うので、実質、隠し機能と言っても良いかもしれません。

参考URL

上記の表のうち、上から5つは、Twitter Developer の公式ドキュメントに記載があります。「How to add an embedded timeline to your website」の部分です。

https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview.html

それ以外については、Twitter Publish のページでカスタマイズした時にURLがどう変化するかをもとに調べました。
こちらに関しては、ドキュメントには書いていない内容なので、仮にTwitter側が仕様をいきなり変えてきても、文句は言えないです…

https://publish.twitter.com/#