さてさて、

本題に入りたいと思います。

内容は、「弊社の社員ブログのブロガーの皆様へ」なので、

内部への業務連絡ですね(^^)

当ブログ、Instagramの埋め込みが可能になりました

キッカケはこちらの方からの苦情 一言

「Instagramの埋め込みがさ、うまくいかないんだけどさぁ～（早くなんとかしろよ）」

自分、Instagramはあまり利用していないので、

埋め込みをするという発想がまったくなく、試したこともありませんでした。

なので、初耳!!

我々の部、こんなふうに実は前科持ちでして。

また、いつこのお兄さんに公へタレコミされるかわからないわけです。

え…ほ、本当に回答ないっぽい

ということで、自分の勉強がてら、

そっこうで取り掛からせていただきました。

せっかくブログ書こうとしている社員が、

いざ埋め込んだら表示されないとか、

そういった”ブログを書く気力を損なう状況” は、あまりよくありませんしね(^^;)

ちょっと、途中1回 2回諦めましたが、

諦めたタイミングで、「あれ、これヒントじゃない!?」みたいなものが目に飛び込んできたり、

上司に話しかけてみたりしたところ、ひとまず何とか対応に成功し、御の字です。

（たぶん、うちの後輩君に頼めば、もっと早く解決してくれたんだけどね）

原因と対応

細かく説明しても？な方が多いと思いますが、さらっと説明します。

埋め込めなかった原因は、「記事を保存する際に実施される、ソースの自動整形」でした。

記事を保存すると、自動整形の結果、「コピペした大量の埋め込みコード」が一気に少なくなっているのが確認できました。

つまり、必要な情報が削除されてしまっているわけです。

そこで、以下の処理を追記して、なんとか対応したわけです。

• 「wp_kses_allowed_html」というフィルターフック（add_filter）を追加
• blockquoteタグに対して、「class」と「data-instgrm-captioned」属性を許可する設定を追加
• 発行される埋め込みコード内にある「scriptタグ」が、ページ読み込みの最後に実施される ”SNSのボタンを表示する” 処理の時に追加されるよう、テンプレートをカスタマイズ

これで、Instagramを埋め込むために必要最低減の情報が、削除されなくなった。

といった感じです(^^)

まだまだ気になる部分もありますが、今回はこの辺で

• パソコンで見ると、サイズが小さいなぁ……
• iPhone5sで閲覧すると、「フォロー」ボタンが文字とかぶっているなぁ～

などなど、正直気になる部分は残していますが、

今回はコレ以上の手間をかけるのはやめて、

今回はこの辺でとどめておきたいと思います

最後にお願い

まだ、対応不足あると悪いので、

皆さん試しにInstagramの埋め込みを試してみてくださいね(^^)