Twitter 埋め込みタイムライン

WEB Design
1

特定ユーザのツイートタイムラインのウェブサイトへの埋め込みについて。
＜参考サイト＞

以下サイトで特定ユーザを指定します。
例）@ficus_online_st

https://publish.twitter.com/#

次に埋め込むタイプを指定します。Embedde Timelineを指定します。

以下デフォルトのタイムラインが表示されますが、サイトのデザインに合わせるため"set customization options"を押してデザインのカスタマイズをします。

範囲を選択_005.png853×814 343 KB

幅、高さ、背景・リンクカラーを指定し"Update"を押します（ここで指定できるカスタマイズは以上ですが、後程より細かい表示設定のカスタマイズを行います）。

カスタマイズされたタイムラインのフレームが表示されます。"Copy Code"を押してコードを抽出します。

範囲を選択_007.png815×830 174 KB

抽出したコードは以下の通りです。

<a class="twitter-timeline" data-width="375" data-height="650" data-theme="dark" data-link-color="#19CF86" href="https://twitter.com/Ficus_Online_ST">Tweets by Ficus_Online_ST</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

以下<a>.....</a>の箇所をサイトの指定箇所にペーストします。

<a class="twitter-timeline" data-width="375" data-height="650" data-theme="dark" data-link-color="#19CF86" href="https://twitter.com/Ficus_Online_ST">Tweets by Ficus_Online_ST</a>

下記外観のカスタマイズを適用することで、より細かい表示設定ができます。

外観のカスタマイズ

コンパクトなツイートのリストの周囲に表示される枠を制御するには、data-chrome属性を設定します。外観を表す各要素のトークンをスペースで区切って指定します。

noheader タイムラインのヘッダーを非表示にします。Twitterのアトリビューションやソースタイムラインへのリンクなど、Twitterの表示要件は、実装するサイト側で独自に追加する必要があります。

nofooter タイムラインのフッターとツイートコンポーザーのリンクを非表示にします (選択したタイプのタイムラインウィジェットに含まれている場合)。

noborders ウィジェット領域を囲む境界線やツイートの区切り線など、ウィジェット内の境界線をすべてなくします。

noscrollbar メインタイムラインのスクロールバーを非表示にします (表示される場合)。標準のユーザーインターフェースコンポーネントを非表示にすると、ウェブサイトのアクセシビリティに影響する可能性があるので注意してください。

transparent ウィジェット背景を透明にします。

上記外観のカスタマイズを適用した場合は以下のようになります。

<a class="twitter-timeline" data-width="375" data-height="650" data-theme="dark" data-chrome="noheader nofooter noborders noscrollbar transparent" data-link-color="#19CF86" href="https://twitter.com/Ficus_Online_ST">Tweets by Ficus_Online_ST</a>

以下<script>.....</script>の箇所はサイトの<head>.....</head>にペーストします。

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

2

パフォーマンスと信頼性向上のため、widgets.jsを直接テンプレートに記述します。

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

の箇所を以下の様に変更します。

<script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>

埋め込みタイムラインもデフォルトでは20件程読み込んでしまうため、3件に変更します。

<a class="twitter-timeline" data-width="100%" data-tweet-limit="3" data-height="700" data-theme="dark" data-chrome="noheader nofooter noborders noscrollbar transparent" data-link-color="#19CF86" href="https://twitter.com/Ficus_Online_ST">Tweets by Ficus_Online_ST</a>

埋め込みタイムラインパラメータリファレンス

Option Values Default Notes
show-replies true false Show Tweets in response to another Tweet or account
chrome noheader, nofooter, noborders, transparent, noscrollbar Undefined Toggle the display of design elements in the widget. This parameter is a space-separated list of values
theme dark light Display light text on a dark background
width Positive integer auto, derived from container size Set the maximum width of the embedded Tweet
height Positive integer 600 Set a fixed height of the embedded widget
tweet-limit Range: 1-20 Undefined Render a timeline statically, displaying only n number of Tweets. The height parameter has no effect when a Tweet limit is set
border-color Hexadecimal color Varies by theme Adjust the color of borders inside the widget
aria-polite polite, assertive, rude polite Apply the specified aria-polite behavior to the rendered timeline. New Tweets may be added to the top of a timeline, affecting screen readers
dnt true, false false When set to true, the timeline and its embedded page on your site are not used for purposes that include personalized suggestions and personalized ads

上記パラメータは <meta> タグで指定することも可

<head>
.....
.....
        <meta name="twitter:widgets:autoload" content="on">
        <meta name="twitter:widgets:csp" content="on">
        <meta name="twitter:widgets:theme" content="dark">
        <meta name="twitter:widgets:border-color" content="transparent">
        <meta name="twitter:widgets:chrome" content="noheader nofooter noborders transparent noscrollbar">
.....
.....
</head>
3

chromeオプションを反映しないエラー