【ブログカード】URLを貼り付けるだけでサイトのキャプチャ・リンク・抜粋を綺麗に簡単に作りたい

他のサイトを紹介するときにスクショとテキストリンクを簡単に貼りたい

他サイト紹介の時、スクリーンショットを撮って、加工して・・・リンクタグ作って、抜粋入れて・・・とかやるのっていちいちメンドウなんです。

なので簡単に作る方法を探してみました。

できればスクリーンショットだけでなくテキストリンクも抜粋も一緒に一発で作ってくれるのが理想。

ワードプレス Browser Shotsプラグインを試す

まずはBrowser Shotsというプラグインを試してみます。これで理想とする動作をしてくれれば完了です。

screenclip65screenclip64

プラグインを追加して、設定するものは特にないので新規投稿ページにいきます。

ビジュアルのツールにアイコンが表示される

ビジュアルのツールにアイコンが表示される

 こんなふうにアイコンが表示されればOK

URLなどを記入していきます

 ウィンドウが出てきますのでURLなどを記入していきます。

ショートコードが作成された

このようにショートコードが出来ました。

でもこれ、スクリーンショット画像自体が自サイトのサーバーには保存されないようなので、スクリーンショットが表示されない場合があるようです。

正常に表示されたか記事ページを見てみます。

screenclip60

なんか?スクリーンショットが表示されない

screenclip61

やっと表示された・・・っておい(汗)

いつまでたってもスクリーンショット画像が表示されない(T_T)挙句完成すると・・・こんなスクリーンショット?のような?ものが表示される。

使うの辞めます!

なので違う方法で試してみることにします。

 WordPress APIを使ったショートコードでも・・・

 Browser Shotsと同様にプラグインを導入しないでもワードプレス自体にショートコードを使ってサイトのスクリーンショットを生成してくれる機能があるようですが・・・

試しにやってみると。(functions.phpにフックを導入するやりかたです。)

なんか?スクリーンショットが表示されない

なんか?スクリーンショットが表示されない

同様にこのような画像が表示されてなんかイライラさせられる(汗)なのでやめます。

なんか無いかなぁ・・・

WordPressでいつのまにか導入されたブログカード

自分のワードプレスのブログに直にURLをはりつけるだけでグログカードが表示されていることに気づきました。

ブログカードとは下の画像のようなサムネイル画像・抜粋・タイトルを綺麗にレイアウトして表示するリンク

ブログカード

上のブログカードは以下の内部ページ内の画像です。

前回までに作ったMySQLテーブルのデータを固定ページに表示 前回までは 、それと をやりました。 今回は、シ…

↑↑↑↑これもブログカード形式(スクショサムネイル画像付き)で表示されていると思います。

このブログカードを外部サイトにもできたら一番手っ取り早く良いのですが、ワードプレスデフォルトでは内部リンクのみしかブログカード表示にはならないようです。

これはどうやらワードプレスのテーマ Simplicity が内部リンクのブログカードに対応したものだったようです。

”ぽぽろん”さんのブログカードWPプラグインを試す

「ぽぽづれ」というブログを運営している”ぽぽろん”さんの作ったワードプレス プラグインを利用させてもらいます。

結論から言うとこれが非常に!便利で簡単に”はてなブログカード形式”で表示してくれるのでこのプラグインを使わせてもらうことにしました。

他サイトへのリンクを「はてなブログ」の「ブログカード」形式で表示するプラグインを作ってみました。(ver0.1)設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。みんなどうやっているんだろう?Σ

こちらのページからダウンロードして上記のようにインストールしてみました。

以下の表示が”ぽぽろん”さんの作ったHatenaBlogCardプラグインです。

他サイトへのリンクを「はてなブログ」の「ブログカード」形式で表示するプラグインを作ってみました。(ver0.1)設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。みんなどうやっているんだろう?Σ

↑↑↑↑HatenaBlogCardプラグインこんなふうに表示されます!スゲェ

 HatenaBlogCardプラグインのソースを見ると「はてなブログoEmbed API」を使用しているようです。

とりあえず問題でるまでこのプラグインを使わせてもらいますm(_ _)m

その他ブログカード風のリンクを作れるショートコードなど

ブログカードのリンクを簡単に作れるようになるショートコードの紹介ページがまだまだありました。

以下のやりかたはOGPプラグインをインストールしてfunctions.phpにフックを入れてCSSにスタイルを追加するやり方のようです。

2017/4/5追記現在、当ブログでは以下の方法での外部リンクのブログカード化は行っていません。寝ログさんが配布されているSimplicityという無料WordPressテーマで簡単に外部リンクのブログカード化ができるので、そちらをオススメ

こことか、

WordPress 4.0 以上で使用できる「はてなブログカード」のようなOGPブログカードの埋め込み機能を作成したので紹介します

こことかが参考になりそう。

こっちのほうだと ”はてなブログoEmbed API”を使わないので確実?にブログカードを生成してくれるみたいだけど、いまのところHatenaBlogCardプラグインで正常に表示してくれているのでこちらを使います。

ブログカードのデメリット

ブログカード生成には負荷かデータ取得の時間がかかる

ブログカードにはデメリットがあります。

内部リンクのブログカードを生成するのにはクエリー(データベースにアクセス)が1つ増えて負荷がかかります。

外部リンクはその都度、”はてなAPI”(HatenaBlogCardの場合)とかにアクセスしてデータを持ってくるのでその分生成するのに時間がかかる場合があります。

HatenaBlogCardプラグインはiframeで表示される

ソースをみてみたところ以下のようにiframe内で表示されているので色々と問題がある場合が出てくる可能性があります(汗)

iframe

まぁ、リンクを表示するだけなので大した問題にならないとは思いますが問題ある場合で、有識者様がいらっしゃいましたらご指導いただけると助かりますm(_ _)m

HatenaBlogCardプラグインしばらく使ってみてもし不都合などあったらOGP(Open Graph Protocol)導入して別の方法でやってみます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする