Twitterのタイムライン埋め込む際のカスタマイズオプションまとめ

自社のサービスを切り売りしたり、買収の噂が立ったりと元気の無いTwitter。

しかし日本では全くそんな不穏な空気を感じさせないほどユーザーは多いですね。

そして僕のようにブログを書いているような人は、ツイートを記事内に埋め込むことも多いと思います。

あとは自身のタイムラインをウィジェットとして追加したりとか。

 

▼このブログでも、フッターにタイムラインを表示しています。

PCではフッターの一番右、スマホでは画面の一番下に表示されます。

別に有用な情報を呟いているわけではないのですが、1カラム化した際にスペースが余ったもので…。

 

まずは簡単な作り方

これは今さら説明するまでもないかとは思いますが、説明の導入として。

▼Twitterにアクセスして、設定に進みます。

 

▼左側のメニューの中からウィジェットを選択。

 

▼まだ作成していない場合は新規作成、カスタマイズする場合は編集をクリックします。

 

▼するとこんな感じで貼り付けるコードを取得できます。

 

これを見ると、高さとテーマ(明るい or 暗い)、あとはリンクの色くらいしか変えられないように見えます。

試しにこの状態のコードを貼ると・・・


こんな感じです。

しかし実は他にも設定可能な項目があるのです!

 

ヘッダー非表示

タイムラインのヘッダーを非表示にします。

 


 

フッター非表示

タイムラインのフッターを非表示にします。

 


 

ウィジェット内の境界線をすべてなくす

 


 

スクロールバー非表示

タイムラインのスクロールバーを非表示にします。

 


 

ただしこれは、

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

(出典:Twitter Developer Documentation

となっています。

 

つまり、「本来表示されるはずのスクロールバーを非表示にすると、タイムラインに続きがあるのかどうかわからなくなるから、ユーザビリティを損なうよ」ということです。

はい、おっしゃる通り。

 

 

ウィジェットの背景透過

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

 


 

み、見えない・・・。

今ウィジェットのテーマを”暗い”に設定しているため、文字色が白です。

そしてこのブログの背景色も白なので、見えないのは当たり前です。

…当たり前ですが、気をつけましょう。

 

オプションの組み合わせも可能

もちろん複数のオプションを組み合わせることも可能です。

 


 

背景透過+ヘッダー非表示+フッター非表示です。

が、上に書いたように背景色が白で見えないので、スクショを貼っておきます。

▼こんな感じ。

だいぶ溶け込んでいて、いい感じになったと思います。

以上、タイムラインの外観オプションでした。

 

カスタマイズで気をつけたいこと

他にも自力でcssを弄ったりすれば、様々なカスタマイズが可能でしょう。

しかし気をつけなければいけないことがあります。

ツイートをサイトに埋め込む際には、必ず表示しなければいけない項目というものが定められています

 

具体的には、

Tweets displayed as part of a timeline are subject to the following additional requirements:

Tweet Author
The avatar must be positioned to the left of the Tweet text, author’s name, and @username – except for Tweets in languages that read right to left, in which case the author’s avatar must be position to the right of the Tweet text, author’s name and @username.

Tweet Actions
Although Reply, Retweet and Favorite Tweet actions must always be available to the user when interacting with the Tweet in a timeline (e.g., select, hover, touch, swipe), they do not need to be visible initially.
For applications on mobile platforms, you may provide users access to Tweet actions by linking the entire Tweet area to the Individual Tweet within your app or on Twitter.

Tweet Timestamps
For Tweets that have been sent in the last 24 hours, use the short form timestamp relative to the current time, for example “20s” for a Tweet sent 20 seconds ago, “3m” for 3 minutes ago, “5h” for 5 hours ago.
Tweets older than 24 hours should show a short form date including the day and month, e.g., “6 Jun”.

Retweet Indicator
If the Tweet being displayed is a Retweet, the name of the user who Retweeted it and the Retweet icon must be displayed above or under the Tweet text. e.g., “Retweeted by Josh Brewer”. The name must link to the Retweeting user’s profile, unless your application is displaying Tweets on a mobile platform that has clear physical or technical limitations.

Timeline Integrity
Tweets that are grouped together into a timeline must not be rendered with non-Twitter content (e.g., comments, updates from other networks). However, this does not apply to timelines where Tweets are explicitly selected by an end-user to appear next to non-Twitter content (e.g., manually authored live blogs, manually curated media collections, or commenting systems).

Branding
Instead of displaying the Twitter logo for each Tweet, the Twitter logo must always be displayed directly attached to the timeline (e.g., top of the timeline) and be reasonably visible.

Individual Tweet Link
All timelines must allow users to view details of an Individual Tweet (e.g., by linking the Tweet timestamp or by linking the entire Tweet area), either via your representation of an Individual Tweet or via the Individual Tweet on an official Twitter client (including twitter.com).

(出典:Twitter Developer Documentation

誰がつぶやいたものかわかるようにする→アバターを左側に表示する。

リプライ、リツイート、お気に入りが可能なUIにする。

等など…。

 

これを守らないと、ツイートの埋め込み・引用の要件を満たさないことになると思われます。

見た目も重要ですが、表示内容にはくれぐれもご注意を。

 

というわけで今回は以上!

 
photo credit: Jonathan Rolande Tweet Scrabble via photopin (license)