はてなブログoEmbed APIブログカードの弱点と不具合の解消方法

スポンサーリンク

外部リンクのブログカード化はプラグイン入れなくてもできた

昨日は”ぽぽろん”さんの外部リンク用ブログカードを作成してくれるHatenaBlogCardプラグインをインストールして使ってみましたが、あとでワードプレスのテーマ Simplicity のほうですでに対応していることが分かって切り替えてみました。

このテーマSimplicityは至れり尽くせりでスゴイ気が効いているテーマで人気があるのもうなずけます。

お世話になりましたが停止させていただきました。

HatenaBlogCardプラグインのほうはお世話になりましたが停止させていただきました。

テーマSimplicityでの外部リンク ブログカード化設定

 設定方法は簡単です。ワードプレスの左メニューに「外観」がありますのでそのなかのカスタマイズを選びます。

外観 > カスタマイズ

外観 > カスタマイズ

すると以下のような画面になります。

左下のブログカードを押す

左下のブログカードを押す

左メニューにブログカードの項目をクリック

外部リンクのブログカード有効にチェックを入れる

外部リンクのブログカード有効にチェックを入れる

ブログカードの設定項目が開くので上のようにします。

最後に「保存して公開」を押せばOK

これでHatenaBlogCardプラグインと同様に外部リンクのブログカード生成することができるようになりました。

しかも今度はURLを入れるだけでブログカードが有効になります。

HatenaBlogCardプラグインの場合は[blogcard url=”http://url”]などとショートコードの中にURLを入れないといけなかったのでさらに簡単になったが・・・問題もでてきました。

ブログカードは完璧ではない!弱点ありやす

内部リンクのブログカードは思った通りにリンク+サムネイル画像+抜粋を入れて綺麗に表示してくれますが、外部リンクのブログカードはそうはいかないようです。

サイトによっては取得できないデータが存在するようです。

全部のデータを取得できて綺麗に表示できたブログカード

2015年5月19日14時から日本マイクロソフトがLTE搭載の「Surface 3」に関する発表を行う「New Surface Press Conference」を開催しました。発表会では「Surface 3」がいかに優れた端末であるかをMicrosoftのブライアン・ホール氏が力説し、ソフトバンクモバイルのエリック・...
既報の通り、日本マイクロソフトは10.8型Windows 8.1タブレット「Surface 3」を発表した。ここでは発表イベント「New Surface Press Conference」でお披露目されたSurface 3の実機や、オプション関連、LTE対応モデルの料金プランをまとめる。

サムネイル画像が取得できなかったブログカード

ついにフルウィンドウズマシンへと進化したサーフェス3が登場。 サーフェスプロが重過ぎる方や、サブのウィンドウズマシンとしてベストチョイス。 Windows 8.1、10.8インチ フルHD (1920x1280)、10点マルチタッチ ディスプレイ搭載。CPU: Quad Core Intel Atom x7 - Z87...
Microsoft Surface 3 Tablet (10.8-Inch, 128 GB, Intel Atom, Windows 8.1)

まぁ、このくらいだったら使えるけど、スクリーンショットが欲しい場合は使わないでしょうね。

タイトル・抜粋が取得できなかったブログカード

これは使えないでしょ、

なにも取得できなかったブログカード(T_T)

Iconic tents that have stood the test of time, rain, wind, and dirt. Shop for lightweight backpacking and bikepacking tents from Big Agnes.

これやばすぎでしょ・・・

Iconic tents that have stood the test of time, rain, wind, and dirt. Shop for lightweight backpacking and bikepacking tents from Big Agnes.
このURLを表示させようとしてますが(汗)

このように全くなんにも表示されないブログカードもできちゃうわけです(^_^;)

なにかが欠けて綺麗に表示できないブログカードは使えない、せめてタイトルのリンクだけは表示されないと使えないので諦めて手動でサイトのスクリーンショットを撮って加工して・・・リンクを貼ってとかやりますが・・・問題発生!

ブログカードでアフィリタグと短縮URL

アフィリエイトタグを貼り付けた時と短縮URLを貼り付けた時、アフィリエイトタグで短縮URLを生成して作った時を試してみた。

直接アフィリエイトタグを貼り付けた時

Amazon.co.jp

■CPU:第4世代 IntelCore i5■記憶容量:256GB■メモリー:8GB■液晶サイズ:12インチ(ClearType フル HD Plus)■ディスプレイ:12" ClearType フル HD Plus ディスプレイ マルチタッチスクリーン■画面解像度:2160x1440■Wi-Fi:802.11ac/8...

Amazon.com

Microsoft Surface 3 Tablet (10.8-Inch, 128 GB, Intel Atom, Windows 8.1)

楽天市場

短縮URLを貼り付けた時(アフィリリンク無し)

Amazon.co.jp

■CPU:第4世代 IntelCore i5■記憶容量:256GB■メモリー:8GB■液晶サイズ:12インチ(ClearType フル HD Plus)■ディスプレイ:12" ClearType フル HD Plus ディスプレイ マルチタッチスクリーン■画面解像度:2160x1440■Wi-Fi:802.11ac/8...

Amazon.com

Microsoft Surface 3 Tablet (10.8-Inch, 128 GB, Intel Atom, Windows 8.1)

楽天市場

アフィリエイトタグで短縮URLを生成

Amazon.co.jp

■CPU:第4世代 IntelCore i5■記憶容量:256GB■メモリー:8GB■液晶サイズ:12インチ(ClearType フル HD Plus)■ディスプレイ:12" ClearType フル HD Plus ディスプレイ マルチタッチスクリーン■画面解像度:2160x1440■Wi-Fi:802.11ac/8...

Amazon.com

Microsoft Surface 3 Tablet (10.8-Inch, 128 GB, Intel Atom, Windows 8.1)

楽天市場

このような結果になりすべてうまく表示されるようです。

だんだんブログカードも分かってきた。仕組みを理解すれば弱点解消できるかもしれない。

不具合、aタグで囲ってもURLを直接貼り付けるとブログカード化します

URLを貼り付けるだけでブログカードを生成しちゃうので逆にいうとブログカード化してほしくないURLもある(なにも表示してくれないブログカードとか)わけで、それをやるにはaタグ(<a href=”URL”>ここにURL</a>)で囲ってやればブログカード化しないと思ってましたが違いました。

URL直貼りでブログカード化しない方法

[https://bey.jp/

-https://bey.jp/

{https://bey.jp/

「https://bey.jp/

このように前になにか?http://以外の何かを入れないとブログカード化してしまうようです。

逆にhttp://を入れなければOKのようでドメインだけとかドメイン+ページだけでしたらブログカード化しませんでした。

bey.jp

bey.jp/?p=8400

なので手動でサイトのスクリーンショットを撮ってURLを直に表示させたい場合は注意が必要です。

どうやったらブログカード化するのか試してみた

http

http:

http:/

http://

ここまではブログカード化しませんでした。http://の次に一文字でも入れるとブログカード化しました。

ブログカード化しないときの外部リンク

結局外部URL直で貼る場合は以下のようにしました。(この場合はURLを付ける必要は無いんですが参考のため)

https://www.bigagnes.com/index.php/Products/Detail/Tent/copperspurul2mtnglo

Copper Spur UL2 mtnGLO

[https://www.bigagnes.com/index.php/Products/Detail/Tent/copperspurul2mtnglo]

Part of the Big Agnes mtnGLO™ collection, the three season Copper Spur UL 2 mtnGLO™ features patent-pending mtnGLO™ Tent Light Technology with LED lights integrated into the tent body;

というより思い出したけど・・・・過去のaタグ入れたURLは全部ブログカード化されてんじゃん(汗)おかしくなってないかなぁ。全ページ見るの大変だ(T_T)

ブログカードは臨機応変な使い方が要求される

内部リンクはすべてブログカードが使えて安心ですが、外部リンクは一度ブログカード化して正常に表示されているか調べてからやらないといけないので一手間かかる。

”はてなブログoEmbed API”を使わないOGP(Open Graph Protocol)のブログカードだったら不具合出ないのだろうか?OGP

導入してないサイトだとやっぱりまったく表示されないこともあるんでしょう。一緒だと思うけどやってみないと分からない。

結局、ブログカードを使えない外部リンクは「手動でスクショ撮ってURL貼り付けて」とかやって作るのが一番確実なんですが、ブログカードの綺麗な表示を見ちゃうとどうも不格好に見えてしまう・・・

もう少し良いやり方調べてみます。