はてなダイアリーのサイドバーにTwitterのウィジェットを貼り付ける方法

随分前にこのブログのサイドバーにTwitterのウィジェットを貼り付けましたが記事にしていなかったためやり方を忘れてしまったので(汗)もう1度調べ直してみました。
公式のウィジェットを貼り付けただけでははてなダイアリーに表示されません。コードの1部分を変更する必要があります。

ステップ１：Twitterのウィジェット作成ページにアクセス

↓Twitterから「素材」＞「ウィジェット」のページにアクセスします。

Twitter / ウィジェット

↓まずは「自分のサイト」＞「プロフィールウィジェット」を選択します。

※自分のTwitterアカウントを持っていなくても「検索ウィジェット」で自分が知りたいキーワードを入れておけばそのキーワードを含んだツイートを表示させることができます。

ステップ２：ウィジェットをカスタマイズ

↓ユーザー名に自分のTwitterユーザー名を入力します

↓ツイートの読み込み等の設定を行います。「テスト設定」をクリックするとプレビューできます。

新しいデータを読み込みますか？
スクロールバーを表示しますか？
読み込み動作：更新間隔/すべてのツイート
ツイート数

↓ウィジェットの配色を設定します。

↓ウィジェットのサイズを設定します。

ステップ３：出力されたコードをコピー

↓カスタマイズが終了したら「設定を終了し、コードを生成する」ボタンをクリックします。

↓するとこのようなコードが生成されるのでコピー（Ctrl+C）します。

<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('webgaku').start();
</script>

ステップ４：はてなダイアリー管理画面のデザインを開く

↓「管理画面」＞「デザイン」を開きます

↓「ページのフッタ」欄に先ほどコピーしたコードを貼り付けますが、そのまま貼り付けてブログを表示すると・・・

↓エラーが表示されてしまいますのでコードの1部分を変更する必要があります。

ステップ５：コードの変更

「charset="utf-8"」を削除
「features」に「hashtags」「timestamp」「avatars」を追加します。

features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }

※true/falseは適宜変更してください。

↓動作するコード例（ユーザー名をご自身のものに変更してください）

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 'auto',
  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('ユーザー名').start();
</script>

↓改行なしバージョン

<script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({ version: 2, type: 'profile', rpp: 10, interval: 2000, width: 'auto', 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('ユーザー名').start();</script>