特定ユーザのツイートタイムラインのウェブサイトへの埋め込みについて。
<参考サイト>
以下サイトで特定ユーザを指定します。
例)@ficus_online_st
次に埋め込むタイプを指定します。Embedde Timelineを指定します。
以下デフォルトのタイムラインが表示されますが、サイトのデザインに合わせるため"set customization options"を押してデザインのカスタマイズをします。
幅、高さ、背景・リンクカラーを指定し"Update"を押します(ここで指定できるカスタマイズは以上ですが、後程より細かい表示設定のカスタマイズを行います)。
カスタマイズされたタイムラインのフレームが表示されます。"Copy Code"を押してコードを抽出します。
抽出したコードは以下の通りです。
<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>