abilog

PCに関するあれこれ

はてなダイアリーにTwitterのブログパーツを張り付ける

ツイッターのWidhetをブログに張っ付けてみようとしたのですが、最新のウィジット生成ではてなダイアリーにそのまま書くと横幅がばっさーなります。

ツイッターから「設定」->「ウィジット」と行って適当に設定して生成します。
https://twitter.com/about/resources/widgets
これをはてなの「管理」->「デザイン」からフッターに張り付けると、

もうめいっぱい。そして私にはこのコードで横幅を調整する術がわかりません。
そこで、少し古いコードを漁ってきて設定します。そうするとうまいこと調整できます。
ちなみに私の場合は以下のように設定しました。

<script src="http://widgets.twimg.com/j/2/widget.js"ώ</script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 2000,
width: 200,
height: 300,
theme: {
shell: {
background: '#333333',
color: '#ffffff' },
tweets: {
background: '#000000',
color: '#ffffff',
links: '#4aed05' } },
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('abirotter').start();</script>

最後の行のsetUser('abirotter')は自分のツイッターアカウントに変更しましょうね。
あと、高さや横幅はデザインによってはみでたりしますから、いい感じにwidthやheightを調整しましょう。


追記:2013.04.07 22:40

その後ちょっと調べたら最新ウィジット設定でサイズ変更の方法がみつかりましたよ。
https://dev.twitter.com/ja/docs/embedded-timelines

ウィジット生成後に以下の部分にwidth、heightを埋め込みます
<class="twitter-timeline" width="200" height="300"</span> href="https://twitter.com/abirotter" data-widget-id="320787039052251136">@abirotter からのツイート</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>

一行目のようにwidthとheightを設定するとページの左に表示されます。
ほかにも詳細な設定は出来ますが詳しくはリンクを見て設定してみてくださいな。
ツイッターのウィジットから、「カスタマイズに関するドキュメント」のリンクからとんでください。

※追記したことでめいっぱいのウィジットが表示されなくなりました。なぜ?