自分のHPのリンクがちゃんとEmbedlyプラグインに表示されないときの対処法

Tips

私のブログで大活躍の「Embedlyプラグイン」。WordpressのEmbedlyプラグインで使用しているのですが、最近、自分のURLを書くとうまく表示されなくて……。一時的な対処法がわかったので備忘録しておきます。

Embedlyプラグイン

Embedlyプラグインは、ブログカードを自動表示してくれるWordpressのプラグインです。

記事投稿でURLを記載するだけで、ブログ投稿すると目立つブログカードのリンクを作ってくれます。

以前の記事でも紹介しまして、気に入っているWordpressプラグインのひとつですね。

EmbedlyのWordPressプラグインを見つけたので導入してみた

なぜか自分のブログだけうまく表示されない

最近、投稿記事に自分のURLを書くと上の写真ようにリンクが表示されてしまって、うまく表示できなくなってしまっていたんです。
URLが書かれていたらJavascriptを呼び出して、表示変換しているのはわかるのですが、昔はうまく表示されていただけに、ツライ……。過去の記事も更新したら、この現象が起きていてすごく困っています。

2017/06/27 追記
SSL化をしたら、解決しました!今のところ、URL書くのみでEmbedlyプラグインが問題なく動いています。
実施したことの記事を書きましたので、よければご覧ください。

本ブログをSSL対応したので、やったことまとめてみた
以前から気になっていて、2017年GW内にこっそりと本ブログのSSL化を行いました。せっかくなので作業記録とつまづいたところをまとめました。

原因はWordpressの新機能「WordPressブログカード(Embed)」にあると思われる

このような現象が起こったのは、Wordpress4.4以降発生しており、このときに新機能として追加された「WordPressブログカード(Embed)」と競合を起こしているのだと思われます。

function.phpにWordPressブログカード無効化を記載しても、「WordPressブログカード(Embed)」を無効化するプラグインがあるので入れてみたのですが、無効化がうまくいかず……。

むむむっ。これは厄介だぞ。

とりあえずの対処法 (Embedブックマークを使ってリンクを作成する)

とりあえずの対処法として、自分のブログのURLだけ、Embedlyを作ることにしました。

Embedブックマークを使って一度公開記事でリンクを作成する

公式でも用意されてあるEmbedブックマークを使って一度公開記事のリンクを作成します。ブックマークバーに入れておくとべんりです。

作成したリンクをプレビューで表示させる

作成したリンクを下書きしている記事に記載し、プレビューで表示させます。

手作りグラノーラ、1年ほど続いています

リンクの部分だけを投稿する

スクリプトの箇所はプラグインによりヘッダーから呼び出されているので、無駄な要素となります。記事に書きこむときには省いて記載します。

<a class="embedly-card" href="https://lets-try-simo2.net/cook-granola/">手作りグラノーラ、1年ほど続いています</a>
// この部分を削る<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

手作りグラノーラ、1年ほど続いています

embedly-cardクラスリンクを作る

ブックマークで一度もEmbedlyカードを表示しないと適用されないので、上の方法となります。
近日同じURLに対してEmbedlyリンクを作成していたURLであれば、aタグにembedly-cardクラス属性を付けてリンクを作ることでEmbedlyが反映されます。

Google Chromeプラグインの「Create Link」アドオンを使っていれば、以下のとおりのものを

// embedly-card フォーマット Create Link 0.3.1 で動作確認済 
<a class="embedly-card" href="%url%>%htmlEscapedText"%</a>

EmbedlyのWordPressプラグインを見つけたので導入してみた | レッツトライ!しもしも

このやり方だとタイトルが変更されたとき反映されない

上の2つのやり方だと、テキストのリンクが表示されてもブログ記事のタイトルが変更されたとき、反映されません。

それはいやだなという方はブログカードを別の方法を取るほうが良いかもしれません。上のやり方がどうしても、面倒だ!という方ははてなブログカードに乗り換えてもいいかもしれません。

ここに詳しくカスタマイズする方法がかかれていますので、こちらをご参照ください。
http://nelog.jp/wordpress-blog-card

まとめ

Embedlyプラグインはとても見栄えがよく使いやすいのですが、いかんせん自分のブログのリンクがうまくいかないのは悲しい……。とりあえずの対処法をまとめてみました。なにかわかり次第、また記事にしたいと思います。