はてなダイアリーのサイドバーにtwitterウィジェットを追加しようと思っていろいろ調べたのですが、
どこの情報を頼りにしてもサイドバーに表示されませんでした。
このブログに辿り着いた方はきっとそんな私と一緒の思いで悩んでいらっしゃると思いますが、この日記の
サイドバーをご覧の通り、twitterウィジェットは問題なく表示されています。
実は、めちゃくちゃ簡単な設定をするだけで表示できるようになるんですが、とても見逃し易いところに
その設定が隠れているんです。ここではその方法を手順を追ってご説明いたしましょう。
大まかな手順
はてなダイアリーにtwitterウィジェットを追加するおおまかな手順は以下のとおりです。
- twitterでウィジェットを作成する
- はてなダイアリーのデザインでフッターにウィジェットのコードを挿入
以上です。
ぇ？たったこれだけ？
そうです、これだけです。しかし、この両方を適切に行わないとサイドバーに表示されることはありません。
うまくサイドバーに表示されなかった方はきっとこれから説明する作業を見逃しているのだと思います。
（違ってたらゴメンナサイ！！）
これまでの手順
うまくいかなかった方はどんな事になっているのか、念のため確認しましょう。
手順１：twitterでウィジェットを作成する
まずは、twitterウィジェットを作成します。
- https://twitter.com/ にアクセスする
- ログインする
- 右上の風車マークをクリック>設定>ウィジェット>新規作成 でウィジェットを作成する
- 作成したら画面右下に表示されるウィジェットのコードをコピーする
手順２：はてなダイアリーのデザインでフッターにウィジェットのコードを挿入
- はてなダイアリーの管理>デザイン編集>詳細 から「ページのフッタ」の＜div class="sidebar"＞〜＜/div＞の間にコードを貼り付ける
- 画面最下の「この内容に変更する」をクリック
- 自分のはてなダイアリーにサイドバーが表示されているか確認する
ご覧の通り、はてなダイアリー画面のサイドバーを見ると、このscriptは使えませんと怒られてしまいます。
これをなんとかします。
修正すること
やることはとても簡単で、２つの修正を加えるだけです。
まずtwitterウィジェット画面でドメインの指定に「d.hatena.ne.jp」を加えます。
この時、カンマで区切ることを忘れずに。加えたら、「変更を保存」をクリックする。
実はこの設定で既にtwitterのTLは表示されるようになりますが、ややゴミが残ってしまいます。
そこで続けて、はてなダイアリーの管理画面から不要な部分を削除します。
具体的には、＜script＞〜＜/script＞を削除します。
はてなダイアリーを再度確認してみましょう。
これでバッチリとtwitterウィジェットがサイドバーに表示されました。
加えて、３月５日に旧twitterウィジェットが廃止されることも踏まえ、上記手順を実施されることをオススメします。
