【WEB】はてなダイアリーの右サイドバーのtwitterウィジェットがエラー表示になったので修正した件

twitterの仕様変更で右サイドバーに表示させていたtwitterのタイムラインウィジェットが
エラーで正常に表示できなくなっていたので、修正しました。

実際のエラ−メッセージはこんな感じですね。

修正方法は下記の通りです。

まずは、Twitterのウィジェットを作成します。

1.　WEBでtwitterにログインして、一番上のメニューバー右側の歯車アイコンを
クリックします。

2.　下の方にある「設定」をクリックします。

3.　画面左側にメニューが出てくるので、一番下の「ウィジェット」をクリック
します。

4.　「新規作成」をクリックします。

5.　ウィジェット設定画面が出ますので、設定をします。

下の方に「ドメイン」があるので、はてなダイアリーの場合は

d.hatena.ne.jp

と入力します。
間違いがなければ、下の方にある「ウィジェットを作成」ボタンをクリックします。

6.　右下にウィジェットのコードが表示されますので、これをコピーします。

ここまでで、Twitterのウイジェットの作成は完了です。

次に、はてなダイアリーのサイドバーの修正です。

1.　はてなダイアリーにログインして「デザイン」＞「詳細」画面に入ります。

2.　私の場合、サイドバーに表示させるために「ページのフッタ」に旧ウイジェットが
記載してあるので、まず、それを削除します。

※削除する前にソースコードのバックアップはとっておくのが吉です。

3.　削除した箇所に、先ほどの手順で取得したTwitterウイジェットのコードを
貼り付けます。

4.　変更を保存をクリックして完了です！

と、思いきやコードをそのまま貼り付けたら、タイムラインは表示されるのですが
その下に、エラー（下図の黄色枠）も表示されてしまいます。

5.　ソースコードの修正をします。私の場合を例にとりますと

<a class="twitter-timeline" href="https://twitter.com/ryokasumi" data-widget-id="309848884404948992">@ryokasumi からのツイート</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>

scriptタグ以降がエラーとして、はてダに怒られますので、ざっくりと削ります。

<a class="twitter-timeline" href="https://twitter.com/ryokasumi" data-widget-id="309848884404948992">@ryokasumi からのツイート</a>

随分とすっきりしました(´Д`)

これを貼り付けると、無事にサイドバーにTwitterのタイムラインを表示できました。

めでたしめでたし