emuramemo

製品レビュー、HTML/CSS、webデザイン、音楽、その他いろいろ

twitterの新ウィジェットの幅を指定したい(2012年11月現在)

twitterのウィジェットが新しくなりましたね。

今までのやつはデザインもそのままで問題なく使えているようです。

(もう古いウィジェット使えなくなりましたね、早めにお取替えを!)

 

 

 

新しいウィジェット作成画面↓

f:id:emj1025:20121102125425j:plain

 https://twitter.com/settings/widgets

(ここから「新規作成」を押すと編集画面に入ります)
 
あれ?幅設定がない!
 
しかも色もカスタマイズできず、テーマしか選べません。
「明るい」「暗い」…これじゃfacebookボタンと同じじゃん!
 
かろうじてリンク色だけは指定できるようです。
 
とにかく、サイトに設置するのに幅だけは譲れませんので変更方法をメモ。
オプションを編集した後、「変更を保存」ボタンを押すと、コードが生成されます。(赤枠内)

f:id:emj1025:20121102125417j:plain

ここをクリックしてコードをコピーします。

 

<a class="twitter-timeline" href="https://twitter.com/ememra" data-widget-id="264211331350151169">@ememra からのツイート</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
このような感じですね。
 
ここに幅の設定を指定します。
<a class="twitter-timeline" width="200" height="500" href="https://twitter.com/ememra" data-widget-id="264211331350151169">@ememra からのツイート</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
このような感じでaタグ内に「width="200"」とか「height="500"」とか書いてやると実際にその幅や高さで表示されます。
 
これであとは自分のサイトにこのソースを貼り付けるだけです。
 
試したのですが、ローカル環境ではこのウィジェットは動いてくれないみたいです。
サーバーにアップしてくださいね。
 
今回のは、ツイートにアイコンが毎度表示されたり、色や幅を変えられなかったりカスタマイズ性がないのが不親切な感じですが、こちらの開発者向けドキュメント(英語)から設定方法などが書かれているので読んでみるとなにかしらわかるかもしれません。
 
いまのままじゃhtmlをさわったことのない人からしたら意味不明ですもんね。
 
これからの変更・改善に期待!
 
 
emuramemo(c) All Rights Reserved.