Twitterの埋め込みタイムラインで「〜さんのツイート」（Tweets by）を消す方法

2017/01/20 2017/09/28

Twitterの埋め込みタイムラインは表示されたけれど、あれ、もうちょっとカスタマイズしたい！と思いませんか？

以前にTwitterの埋め込みタイムラインの記事を書いたのですが、それの続きです。
Twitterのタイムラインウィジェットがいつの間にか変わっていたので、ブログ設定する方法について紹介したい

ぼくはこのタイムラインにおいて、もうちょっとカスタマイズしたいと思いました。
「＠✕✕ さんのツイート」（「Tweets by」）という箇所はいらないです。

この部分を消したいと思いましたが、色々と検索しても出ませんでした。
なので、ここにメモ代わりに記載します。

規定のタイムラインウィジェット

前回の記事で記載したタイムラインウィジェットは以下でした。
Tweets by masabochi

「<a class="twitter-timeline" href="https://twitter.com/masabochi" data-lang="ja" data-width="600" data-height="800">Tweets by masabochi</a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>」

ここで、「Tweets by masabochi」を消したとしても、文面は残ります。

「<a class="twitter-timeline" href="https://twitter.com/masabochi" data-lang="ja" data-width="600" data-height="800"></a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>」

「✕✕さんのツイート」の消し方

じゃあ、どうすれば消えるかというと、

「data-chrome="noheader”」

を記載することで消すことができます。
以下のようになります。

「<a class="twitter-timeline" href="https://twitter.com/masabochi" data-lang="ja" data-chrome="noheader” data-width="600" data-height="800"></a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>」

他のTwitterの埋め込みタイムラインにおけるカスタマイズ

フッター情報を消す

data-chormeの中に複数条件入れることができます。その場合は、半角空白を入れます。

「data-chrome="noheader nofooter"」と記載することで、フッター情報も消すことが可能です。

「<a class="twitter-timeline" href="https://twitter.com/masabochi" data-lang="ja" data-chrome="noheader nofooter” data-width="600" data-height="800"></a><script src="//platform.twitter.com/widgets.js" async="" charset="utf-8"></script>」

線を消す

「data-chrome="noborders"」で線を消せます。

線の色を変更する

「data-border-color」を使うことで線の色を変更できます。

より細かなTwitterタイムラインウィジェットについて

Twitterの公式に埋め込みタイムラインに記載されていますので、他にも記載されていると思います。
仕様は変更されるので、公式が一番参考になります。
（なんか、日本語版が消えているっぽいので、暫定で英語のドキュメントをリンクしておきます。）

https://dev.twitter.com/web/embedded-timelines