de-gucci.com

新しいモノが大好き、知るコトが大好き、楽しむコトが大好き♪

Pee’s Link Preview 〜 はてブカードの代わりを探せ!Facebookのようにリンク先のプレビューを表示するWordPressプラグイン

あまりの使い勝手の良さにみんなが使ってた はてブカードブックマークレット。

でも、いつの頃からかブックマークレットに書かれたJavaScriptが格納されているリンク先が利用出来なくなり,それに伴ってブックマークレットが動作しなくなりました。

ブログ仲間界隈では早速代わりとなるものを探す旅が始まり、WordPressのプラグインで、、、とPz-LinkCardを使い始める人が多数。

私もPz-LinkCardプラグインを利用し始めたんですが、なかなか思った通りにブログカードが表示されず結構苦しみ、こんな記事も書きました。

SSL化の影響?Pz-LinkCardで内部リンクのサムネイル、タイトル、抜粋文が表示されないのを直す方法

こんにちは。でぐっち(@de_gucci)です。Pz-LinkCardを使ってますか?そしてSSL化(https化)してますか?もしかするとちゃんとブログカード表示ができてないかもしれませんよ? 目次1 SSL化(https化)の影響がPz…

de-gucci.com

なので、使ってはいたもののもっといいのはないかなぁ、、、と思っていたら、ついに良さげなモノを発見!

Pee’s LinkPreviewプラグイン

キッカケはRyo Matsufujiさん(@ryomatsu)のこの記事。

WordPress でリンク先を Facebook の URL プレビューみたいに表示するプラグイン、LinkPreview

ブログの記事内にリンクを載せる際、文字列だけだと味気ないなーと思っていて良い感じにしてくれるものを探していたら LinkPreview というプラグインをどうにか発見したのでメモ。Facebook で URL 貼った時のような見た目になる、

loumo.jp

ちょっと試してみたら、簡単でとても良さげ。でも、ちょっと気にかけておかなければいけないところもあるので、あわせて紹介します。

なぉ、このブラグインは私が作ったものではないので、このブラグインの使用はご自身の責任でご使用ください。

Phee’s LinkPreviewプラグインのインストール

WordPressの公式プラグインページからインストールできるので簡単です。

1.ダッシュボードの左側メニューから「プラグイン」をクリックします。

2.画面上部の新規追加をクリックします。

3.キーワードに「LinkPreview」と入力します。

4.Phee’s LinkPreviewが表示されるので「今すぐインストール」をクリックする。

5.「有効化」をクリックする。

6.プラグインの一覧に表示されればインストールは終了です。(※「停止」ではなく「有効化」と表示されている場合はクリックしてプラグインを有効化します)

Phee’s LinkPreviewプラグインの設定

Phee’s LinkPreviewプラグインのインストールが完了したら次は設定です。

1.ダッシュボードの左側メニューから「設定」→「Link Preview」の順にクリックします。

2.Link Previewの設定画面が表示されます。

3.API keyの「Request a key」をクリックします。

4.http://www.linkpreview.net のサイトが表示されるので「GET API KEY」をクリックします。

5.「Don’t Have an Account?」をクリックします。

6.Googleアカウント(Gmail)をお持ちの方は「G」をクリックします。同様にLinkedinのアカウントをお持ちの方は「in」、GitHubのアカウントをお持ちの方は「Ω」のマークをクリックすることも可能です。

何もない方はRegisger Accountに必要事項を入力して「Register Now」をクリックします。こちらは未確認ですが恐らく登録したメールアドレスにメールが届き確認URLをクリックして初めて登録が完了すると思います。

今回はGoogleアカウントで登録します。

7.複数のGoogleアカウントを持っている場合には、LinkPreview APIを利用したいGoogleアカウントをクリックします。

8.ログアウトしている場合にはパスワードの入力を実施すると、LinkPreviewの管理画面が表示されるので「Generate New Access Key」をクリックします。

9.一覧にKeyが表示されるので値をコピーします。

10.WordPressの「Link Preview settings」画面に戻り、API keyにコピーした値をペーストします。

11.画面下の「Save Changes」をクリックします。

以上で最低限の設定は終了です。

Phee’s LinkPreviewプラグインの使い方

Phee’s LinkPreviewプラグインの使い方は簡単で、プラグインの設定画面に書いてあります。

例えば


とすると、こんな感じ。(※実際には[]は半角文字を使用します)

初めて湘南モノレールに乗りました♪【2017年5月24日旅行記】

2017年5月24日。江ノ島にどうやって向かおうか考えていたんですが、まだ、モノレールに乗ったことがないのに気づいたので大船から湘南モノレールに乗ってみることにしました♪ 目次1 湘南モノレール2 湘南モノレール公式ホームページ 湘南モノレ…

de-gucci.com

いかがでしょう?

Phee’s LinkPreviewプラグインで注意すること

APIの登録さえできてしまえばあとは簡単ですが、いくつか注意することがあります。

  • 文字化けする可能性があります。
  • Phee’s LinkPreviewプラグインは実際にはWebサービスであるLinkPreview(https://www.linkpreview.net)の Free Planを利用していますが、各種制限がありFree Planでうまく表示できない可能性があります。
    • 個人利用用です
    • 共用サーバを利用してます
    • 1時間にAPIのリクエスト数が60回までとなります
    • サーバとの通信が暗号化されていません

At your own risk。ご自身のリスクでご使用ください。

まだ、ちょっとしか使ってないので、あまりにうまく表示されないようであればまたPz-LinkCardに戻そうと思います。

では、今回はこの辺で。

 

 

The following two tabs change content below.
コンピュータ会社に勤めるサラリーマン。 Apple製品、電子小物など、新しいものが大好き。 インターネットビジネス、ブログ運営、iOSプログラミングなど、学ぶことが大好き。 グルメ、旅行、映画鑑賞、音楽鑑賞など、楽しむコトが大好き♪ 夢はプロブロガー?「質より量より更新頻度」をスローガンに更新中♪ 詳細なプロフィールはこちら
Return Top