Twitterを自分が運営しているブログへ埋め込みたい!
そこで、Twitterコードを作成してカスタムHTMLウィジェットへ保存しようとしたが、保存を完了出来ない。 なぜ? どうしたらいいの?
こんな悩みを持っている方にはこの記事が参考になると思います。
結論からいうと、レンタルサーバーのWAFをOFFにする事で解決できます。
ただし、今回は ロリポップ!
レンタルサーバー、有料テーマはアフィンガー6を使用されている方を対象としていますので、それ以外のサーバーやテーマを使用されている方は参考程度となります。
では詳しく解説していきます。
【現象 】 TwitterコードをカスタムHTMLへ保存できない
自身が運営するブログへ自身の「Twitterタイムライン」を埋め込む為にまずTwitterコードを作成しました。
作成したTwitterコードを「ウイジェット」の「カスタムHTML」内にある「内容」へ張り付けて「保存」をクリックしましたが、
保存中のマークがクルクルとまわり続けるばかりで、一向に保存が完了しないという現象がおこりました。
下図の様になりました。
これは「Twitterタイムライン」の埋め込みが出来ていないということです。

【原因】 ロリポップレンタルサーバーのWAF(セキュリティー)です!
僕が使用しているロリポップレンタルサーバーにはセキュリティー対策で
WAF (ウェブ・アプリケーション・ファイアウォール) という機能が備わっています。
このWAFは不正アクセスによるサイトの改ざんや情報漏洩を防ぐのにとても有効です。
この機能がTwitterコードの受け入れをブロックしたことが原因で、保存が完了しませんでした。
【解決策】 WAFの設定を一旦、「無効」にする
では解決への手順を解説します。
※ 現在、保存中(保存中マークがクルクルまわっている状態)の方は、保存作業を中止しましょう!
まずは ロリポップレンタルサーバーの「ユーザー専用ページ」へログインします。
① セキュリティー > ② WAF設定
WAF設定画面が出たら
今回使用するドメインの ③「無効にする」を押します。
設定状態が「有効」→「無効」に変わったことを確認します。
下図参照


ちなみにサーバー内で、「無効」へ完全に切り替わるのに10分ほどかかることがありますので少し時間をおいてから次の作業へかかりましょう。
次の作業は
始めに戻って再度、作成したTwitterコードを「ウィジェット」の「カスタムHTML」内にある「内容」へ張り付けて「保存」をクリックしましす。
これで今度は保存が完了するはずです。
最後に、先程切り替えたサーバーのWAT設定を「無効」➡「有効」へ戻すことをお忘れなく!
以上で作業は終わりとなります。
この記事がお役に立てれば嬉しいです。
ありがとうございました。