[Pz-LkC]Pz-LinkCardで外部リンクのサムネイル画像を表示する方法

シェアする

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

リンクをカード形式で表示するWordPressプラグイン「Pz-LinkCard」を公式プラグインディレクトリにて公開しました。

外部リンクのサムネイル画像

外部リンクのサムネイル画像について、インストール・有効化した直後は表示されない設定になっています。

画像ファイルのキャッシュをセキュアに行うのは難しいと判断したため、当プラグインでは画像の取得・キャッシュを行いません。

その代わり、公開されているWebAPIを利用する機能があります。

とにかく設定してみる

まずは、「サムネイル画像の取得API」という項目を設定する必要があります。

WordPress管理画面から、「設定」→「Pz カード設定」と選んでいきます。

「リンクカード設定」という画面になるので、「画像取得APIの指定」のところにある「サムネイル画像の取得API」という項目を探してください。

thumbnail-api

ここに、画像取得APIを使用するURLを記述します。

画像取得APIについては、使用するサイトさんが利用者という形になりますので、利用規約などが明らかになっているものについては目を通していただくと良いと思います。

WordPress.comのmshots APIを利用する

キャプチャ画像を取得するWordPressプラグインとして「Browser-Shots(旧・BM-Shots)」が有名かと思いますが、そちらでも使っているAPIを利用する記述です。

thumbnail-mshots

http://s.wordpress.com/mshots/v1/%URL%?w=100

このAPIに利用に関しては、下記リンクが参考になるかと思います。(英語)

An Automated Way to Take Screenshots of any Website - Free
Note: We’ve now released a plugin called Browser Shots that wraps up this functionality into something a little more official. …

HeartRails社の画像APIを利用する

HeartRails社の「HeartRails Capture」という無料のウェブサービスがあります。

このHeartRails Captureを利用する記述です。

thumbnail-heartrails-capture

http://capture.heartrails.com/100×100?%URL%

「商用・非商用問わず無料でご利用いただけます」となっていますが、「大規模サイト(月間100万PV以上)」で利用する場合は要相談となっていますので、ヘルプ利用規約免責事項に目を通してから使用していただけると良いかと思います。

その他の画像APIを利用する

「%URL%」と書いたところをリンク先のURLで置き換えます。

画像URLとして使用できるものなら指定できますが、キャッシュする仕組みなどは無いため、リンク先サイトのURLを直接指定するような使い方は避けてください。

その他

今後も当プラグイン単独で画像を取得するような仕組みは実装しない予定です。

何か良い仕組みがあれば連携できるようにはしていきたいと思います。

広告

『[Pz-LkC]Pz-LinkCardで外部リンクのサムネイル画像を表示する方法』へのコメント

  1. 名前:ふみえ 投稿日:2016/07/13(水) 00:42:09 ID:cfe3781fb 返信

    こんなに早く対応してくださるなんて!
    びっくりしました(つω`*)
    分かりやすい設定の仕方の説明もありがとうございます(*´ω`)
    これでアイキャッチが無くても、画像が表示されてとてもいい感じになりました♪
    ありがとうございます(^ω^)

    • 名前:ぽぽろん 投稿日:2016/07/13(水) 21:47:20 ID:a61f9d77b 返信

      タイミングが良かったのと、コメントの回答を書いているときには頭の中に直す箇所が浮かんでくるくらいの修正だったので、今回のリリース(公開)に間に合いました。(^-^)o
      (女性の要望だったからというのもゴホッゴホッ…!)

      • 名前:ふみえ 投稿日:2016/07/13(水) 22:52:40 ID:cfe3781fb 返信

        Snipping Toolすごく便利です!!
        一気に手間が省けました(/・ω・)/
        知らなかったから教えてもらえてうれしいです。
        ありがとうございました!!(^ω^)

        • 名前:ぽぽろん 投稿日:2016/07/13(水) 23:26:29 ID:a61f9d77b 返信

          Snipping Toolは便利なのに知らない方が多いですからね(^-^;
          画像ソフトにあまり慣れていなくてスクリーンショットや画面の一部をブログに貼りたい方には便利な機能だと思います。

          Pz-LinkCard以外でも何かありましたらお気軽にどうぞ。(^-^)o

          • 名前:ふみえ 投稿日:2016/07/17(日) 13:20:13 ID:eb11f6176

            コメントありがとうございます(^ω^)
            ペイントで文字が入力できるのは知りませんでした(;´・ω・)
            ただのお絵かきソフトかと思ってたけど、思った以上に便利なんですね!

            ツイッター始めましたよー!(^ω^)

          • 名前:ぽぽろん 投稿日:2016/07/17(日) 15:02:48 ID:d9541518a

            SnippingToolで画面を切り取って、ペイントとかで文字とか丸とか付けて保存するのが手軽ですね!(^-^)o
            世の中にはもっとお手軽なツールもあるのでしょうが、慣れればこれで十分です。

            ツイッター開始おめでとうございます。思ったこととか気楽につぶやいたり、いいなって思ったのをリツイートするところから始めると良いかも知れません。
            PCのこととかちょいと疑問があればお気軽にツイッターでお声がけくださいませ。

            PC全般のこととかは @popo68k 、Pz-LinkCardのことは @popozure にしていただけると反応速いかもしれません。

  2. 名前:ふみえ 投稿日:2016/07/12(火) 21:09:24 ID:09b213470 返信

    コメントしていただきありがとうございます!
    とっても嬉しいです!!(/ω\)
    HTMLみたいな知識が無いので、簡単な設定しか出来ないけどいい感じに使わせてもらっています。

    せっかくだから要望を1つだけ(つω`*)
    私のブログは最近アイキャッチ画像を設定し始めました。
    昔の投稿にはアイキャッチ画像がありません。
    だから、アイキャッチがある投稿はアイキャッチを表示して、アイキャッチがない投稿はスクショみたいなやつを表示するようになったら私の内部リンクが見やすくなりそうなんです!!
    おねがいします(/・ω・)/

    • 名前:ぽぽろん 投稿日:2016/07/12(火) 21:39:34 ID:c4ce9420f 返信

      ふみえさん、コメントありがとうございます。

      内部リンクのサムネイルを「直接取得」してみて、取得出来ない記事は「WebAPI取得」する感じで実現できそうですね。次回公開のver1.6.9で実装できるか検討してみます(^-^)o

    • 名前:ぽぽろん 投稿日:2016/07/12(火) 21:42:00 ID:c4ce9420f 返信

      テスト環境で実装が出来たので、次回公開予定のver1.6.9で内部リンクの「サムネイル」項目に「直接取得できない場合、WebAPI利用」を追加します。

      • 名前:ぽぽろん 投稿日:2016/07/12(火) 23:45:35 ID:c4ce9420f 返信

        ver1.6.9を公式プラグインディレクトリにて公開しました。管理画面から更新できますのでぜひお試しください。