Twitter 埋め込みタイムライン関連

最近調べたTwitterの埋め込みタイムライン、カスタマイズ関連まとめ。

Twitterのポップアップ表示されるフォローボタンの実装

<a href="https://twitter.com/intent/user?screen_name=ユーザーID"><img src="画像のパス" alt ="Follow me" /></a>

上記の「ユーザーID」にそのままアカウント名をいれる。

参考:
ポップアップするTwitterのフォローボタンを好きな画像で作成する方法 | NANOKAMO BLOG

Twitter 埋め込みタイムラインの実装方法

  1. 該当アカウントでTwitterにログイン
  2. アカウントの「設定 > ウィジェット」から新規作成を選ぶ

作成したウィジェットのカスタマイズ方法はいろいろある模様。

表示オプション:

data-widget-id=“hogehoge”
ウィジェットを作成で取得できる。

data-screen-name=”use-name”
上記のidか、こちらを使って表示したいユーザーを指定する。

data-show-replies=“false”
@ツイートを非表示に。

data-tweet-limit=“5”
表示するツイート数。

data-chrome=”noheader nofooter noborders noscrollbar transparent”
装飾系ほぼすべて非表示にする指定。

参考:
埋め込みタイムライン | Twitter Developers

twitterの新ウィジェット(埋め込みタイムライン)をカスタマイズ *Ateitexe
ヘッダー・フッターと装飾部分の削除まで。

埋め込みタイムライン | Twitter Developers
こちらでオプションについてとてもわかりやすくまとめてあった。

埋め込みタイムラインへのCSS適用

凝ったことをするなら、

twitter新ウイジェット(埋め込みタイムライン)のデザイン変更方法 – adiary開発日誌

こちらを参考させていただいた。
上記の var css~ あたりを直接指定するやり方で変更した。

 835 Views