2013年06月19日

新ツイッターウィジェットのカスタマイズ

以前から終了が予告されていましたが、旧バージョンのTwitterウィジェット(API ver1.0)が、先日から完全に表示されなくなりました。

このブログにも貼ってたんですが、何も表示されない状態になってしまったので、新しいウィジェット(ver1.1。正式には「埋め込みタイムライン」)を貼り直す事にしました。

貼り方は簡単で、ツイッターにログインして、「設定」→「ウィジェット」→「新規作成」で、コードを取得します。それを今まで通りブログに貼付ければいいんですが・・・

twitter widget

そのまま貼ると、はみ出るうえに、文字が切れてる・・・

今までは新規作成時にカスタマイズができてたんですが、その機能が省略されて、自分でコードを追加する形に変更されたようです。ちょっとマニアックになりました

詳しくは公式ヘルプがあります
https://dev.twitter.com/ja/docs/embedded-timelines

私がしたカスタマイズは以下の3つです。

・data-tweet-limit="2"
 ツイート表示数2件

・lang="EN"
「フォロー」の文字がはみ出るのであえて英語表記に
(日本語にしたい場合はENをjaにすればOK)

・data-chrome="nofooter"
 フッターはいらなかったので非表示に

これらを埋め込むと、こんなコードになります。
<a class="twitter-timeline" href="自分のアドレス" data-widget-id="自分のIDコード" data-tweet-limit="2" lang="EN" data-chrome="nofooter">〜まだ続きます


これに加えて幅を狭くしたいんですが、公式ヘルプに書かれているとおり最小値が180pxなので、「width="170"」と記述しても反映されません。

そこで、ブログのstylesheetに追記してやって、ムリやり横幅を修正してやると上手くいきました。

手順としては、「ブログ設定」→「PC」→「カスタマイズ」を開き、「CSS」の一番下に以下のコードを追記します。

.twitter-timeline {
min-width: 170px!important;
}

ツイッターが使っている「twitter-timeline」のクラスセレクタに対して幅を指定し「!important」で優先適用するようにしています。

なんとか無事、新バージョンに移行できました。

 

トラックバックURL

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 
アクセスカウンタ

    ブログ内検索
    Google


    よりみちweb
    www