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

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

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

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

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

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

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

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

外観 > カスタマイズ

外観 > カスタマイズ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新しい Surface ノート PC の紹介: Surface Book と Surface Pro 4。詳しくは www.microsoft.com/surface をご覧ください。
2015年5月19日14時から日本マイクロソフトがLTE搭載の「Surface 3」に関する発表を行う「New Surface Press Conference」を開催しました。発表会では「Sur
既報の通り、日本マイクロソフトは10.8型Windows 8.1タブレット「Surface 3」を発表した。ここでは発表イベント「New Surface Press Conference」でお披露目されたSurface 3の実機や、オプション関連、LTE対応モデルの料金プランをまとめる。

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

オンライン通販のAmazon公式サイトなら、【歴代最薄・最軽量】 マイクロソフト サーフェス 3 タブレット / Microsoft Surface 3 Tablet ★Windows 8.1 搭載★ (128GBストレージ、メモリ4GB)を パソコン・周辺機器ストアで、いつでもお安く。当日お急ぎ便対象商品は、当日お...
Amazon.com : Microsoft Surface 3 7G6-00001 10.8 Inch 128 GB SSD Tablet (Silver) : Computers & Accessories

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

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

See how your public site renders across a selection of common browsers and devices

これは使えないでしょ、

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

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

このURLを表示させようとしてますが(汗)

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

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

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

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

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

Amazon.co.jp

マイクロソフト Surface Pro 3(Core i5/256GB/Office付き) 単体モデル PS2-00015がタブレットPCストアでいつでもお買い得。当日お急ぎ便対象商品は、当日お届け可能です。アマゾン配送商品は、通常配送無料(一部除く)。

Amazon.com

Amazon.com : Microsoft Surface 3 7G6-00001 10.8 Inch 128 GB SSD Tablet (Silver) : Computers & Accessories

楽天市場

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

Amazon.co.jp

マイクロソフト Surface Pro 3(Core i5/256GB/Office付き) 単体モデル PS2-00015がタブレットPCストアでいつでもお買い得。当日お急ぎ便対象商品は、当日お届け可能です。アマゾン配送商品は、通常配送無料(一部除く)。

Amazon.com

Amazon.com : Microsoft Surface 3 7G6-00001 10.8 Inch 128 GB SSD Tablet (Silver) : Computers & Accessories

楽天市場

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

Amazon.co.jp

マイクロソフト Surface Pro 3(Core i5/256GB/Office付き) 単体モデル PS2-00015がタブレットPCストアでいつでもお買い得。当日お急ぎ便対象商品は、当日お届け可能です。アマゾン配送商品は、通常配送無料(一部除く)。

Amazon.com

Amazon.com : Microsoft Surface 3 7G6-00001 10.8 Inch 128 GB SSD Tablet (Silver) : Computers & Accessories

楽天市場

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

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

不具合、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貼り付けて」とかやって作るのが一番確実なんですが、ブログカードの綺麗な表示を見ちゃうとどうも不格好に見えてしまう・・・

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