読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

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

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

ステップ1:Twitterウィジェット作成ページにアクセス

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

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

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

ステップ2:ウィジェットをカスタマイズ

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

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

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

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

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

ステップ3:出力されたコードをコピー

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

↓するとこのようなコードが生成されるのでコピー(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>

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

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

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

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

ステップ5:コードの変更

  • 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>