Twitterの新ウィジェットを幅220px以下のサイドバーに収める方法
- 2014/01/29 14:14更新
- カテゴリー:サイドバー
- タグ:freoテンプレート, Web Diary Pro, Web Gallery Pro, freoCSS
2012年9月からTwitterのタイムラインを表示するウィジェットの仕様が変更になりましたが、この新ウィジェットでは最小幅が220pxと決められており、設置するとfreoでもWeb Diary ProやWeb Gallery Proでもデフォルトのテンプレートではサイドバーからはみ出てしまいます。
なので幅を自由に変更できる旧ウィジェット(Join the conversation ウィジェット)を設置したままという人も多いと思いますが、旧ウィジェットはAPI v1.0からv1.1への移行に伴い2013年3月6日以降は使えなくなる予定です。
「 Join the conversation ウィジェット」提供終了のお知らせ(Twitterブログより)
そこで新ウィジェットをなんとかはみ出さずに設置する方法を紹介します。
- まずは新ウィジェットのコードをテンプレートに貼り付けます。
Twitterにログインして Twitterのウィジェット より「新規作成」を押して、ユーザーウィジェットの設定より設定をして、コードをコピーします。
templates/utility.html(Web Diary ProやWeb Gallery Proの場合は skin/navigation.html)にコピーしたコードを貼り付け、その前後を {literal}~{literal} で囲んだものをアップします。
設置コードの例:
※Web Diary ProやWeb Gallery Proの場合は {literal}~{literal} で囲まずコードをそのまま使用します。<div class="utility"> <h3>Twitter</h3> <div class="content"> {literal} <a class="twitter-timeline" href="https://twitter.com/(Twitterのアカウント名)" data-widget-id="(ウィジェットのコード番号)" lang="ja">@(Twitterのアカウント名) からのツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> {/literal} </div> </div>
※日付などの表示が日本語にならない場合は lang="ja" を追加します。
【2013.3.26追記】
- freoの ブログパーツ管理プラグイン を使用する場合は、templates/utility.html の適当なところに
<!--{foreach from=$plugin_parts|smarty:nodefaults item='plugin_part'}--> <!--{if $plugin_part.status == 'publish'}--> <div class="utility"> <h3>{$plugin_part.name}</h3> <div class="content"> {$plugin_part.text|smarty:nodefaults} </div> </div> <!--{/if}--> <!--{/foreach}-->
を追加(freoの公式サイトに記載されているものとは異なります)し、
プラグインの登録画面の内容に
と登録すれば同じように表示することができます。<a class="twitter-timeline" href="https://twitter.com/(Twitterのアカウント名)" data-widget-id="(ウィジェットのコード番号)" lang="ja">@(Twitterのアカウント名) からのツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
- css/common.css(Web Diary ProやWeb Gallery Proの場合は skin/common.css)に
を追加します。.twitter-timeline { min-width: 180px!important; }
【追記】firebugでiframeのidを調べなくてもclass名で事足りることが判明したので書き換えました。
【2014/1/29追記】Twitterウィジェットのコードが一部変更になっているようなので修正しました(太字部分を追加)。
すると以下のようになります。
ねむ
fc2のブログのやり方も解説してもらえませんか?失敗してしまいます・・・