Twitter 埋め込みタイムライン

WEB Design
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>