WordPressの本文に紹介したいサイトのURLを貼り付けるだけで、おしゃれなリンクを生成できるようにする

過去に、WordPressの本文にApp StoreのURLを貼り付けるだけで、アフィリエイトリンクを生成できるようにする – OTTAN.XYZという記事を書きました。横着したかっただけなのですが、意外とご好評いただいているようです。今回は、これを応用して、内部リンク、外部リンクのURLをWordPressの本文に貼り付けるだけで、オシャレなリンクをいとも簡単に生成できるようにしてみます。

オシャレなリンクを勝手に生成してくれる「Embedly」

簡単にオシャレなリンクを生成するためには、はてなブログで実装されている「はてなブログoEmbed」を使用するという事も考えられます。その方法は、下記のサイトで詳しく紹介されていました。しかし、下記のサイトでも注意点として記述されているように、この方法には問題があります。今回は、この問題を解消した別の方法をご紹介します。

https://mbdb.jp/hacks/hatenablog-blogcard-ogp-correspondence.html

はてなブログカードの問題点

かの有名な「はてなブログ」では、リンク貼り付け時に自動的にサムネイル付きのオシャレなリンクを生成してくれます。「ブログカード」と呼ばれているものです。これは、「はてなブログ」に限った話ではありません。WordPressやMovable Typeなどで運用しているサイトでも適用することができます。方法は単純です。

<iframe style="width:100%;height:155px;max-width:100%;margin:0 0 1.7rem;display:block;" title="OTTAN.XYZ" src="http://hatenablog.com/embed?url=[url]" width="300" height="150" frameborder="0" scrolling="no">

紹介したいサイトの「URL」を、上記の[url]に挿入して、ブログに貼り付けるだけです。実際に適用した場合、以下のように表示されます。適度に本文が抜粋され、サムネイル付きで、おまけにはてなブックマーク数まで表示してくれます。

ただし、この方法には冒頭のサイトでも紹介されているように、問題点があります。

  • リンク先のアクセス解析の参照元が全て「hatenablog-parts.com」になる
  • RSS配信時に表示が乱れる
  • はてなブログがサービス終了すると使用できなくなる

3点目については、独自に実装しない限りどうしようもないのですが、特に1点目が致命的です。今回は、3点目については目をつぶるとして、1点目、2点目を解消する方法を考えます。

オシャレなリンクを生成してくれる「Embedly」

そこで登場するのが、以下のサービスです。当サイトは全てこのサービスを使用しています(つい最近、使用し始めました)。

Embedly makes your content more engaging and easier to share | Embedly

Embedly delivers the ultra-fast, easy to use products and tools for richer sites and apps.

このWebサービスを使用して、リンクを生成すると、Embed Code Generator | Embedlyのような感じになります。実際に生成されるコードは以下の通りです。<a>タグに、embedly-cardクラスを付与して、普通にリンクを生成すれば良いことがわかります。また、JavaScriptを別途読み込む必要があることがわかります。

<a class="embedly-card" href="https://ottan.xyz">OTTAN.XYZ</a>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

この「Embedly」を使用して表示したイメージは、現在ご覧いただいているページを見ていただければわかりやすいかと思います。

投稿記事の本文にURLを貼り付けたら自動的に展開する

というわけで、「Embedly」を最大限に使用するために、投稿記事の本文にURLを貼り付けたら、自動的に「Embedly」で展開されるようにした結果が、こちらです。

class-embed-link-builder.php

No Description

ポイントは、WordPressの本文にApp StoreのURLを貼り付けるだけで、アフィリエイトリンクを生成できるようにする – OTTAN.XYZでご紹介した方法と同様です。wp_embed_register_handler()に、「http〜」から始る文字列を登録します。

逆に言うと、WordPressの本文中に貼り付けられた、「http〜」から始まる行は全てこのクラスによって、オシャレなリンクに変身します。

使い方

functions.phpに、以下のコードを追加してください。パスやファイル名は適宜置き換えてください。

require_once 'class-embed-link-builder.php';

また、JavaScriptを読み込むために、</body>タグの直前に以下を挿入してください(大抵の場合、footer.phpあたりでしょうか)。この場合、「Embedly」を使用しない場合も、不要なJavaScriptが読み込まれてしまいますが、「非同期(async)」だしいいかな…。厳密にやりたい場合は、is_single()is_page()を使って、必要な場合だけ読み込むようにするといいと思います(意外と実装に考慮が必要であったため、公開しているクラス内では実装していません)。

<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>

注意点

記事内で何回もご紹介したWordPressの本文にApp StoreのURLを貼り付けるだけで、アフィリエイトリンクを生成できるようにする – OTTAN.XYZで公開しているクラスと思い切り競合するなど、使い方には注意点があります。

  • wp_embed_register_handler()で登録したいハンドラー(「http〜」から始まる文字列)がある場合は、先にそちらのコードを読み込んでください(今回ご紹介しているソースコードは、「http〜」から始まる全ての文字列を対象とするため)
  • 「Embedly」サービスが終了すると使用できなくなります
  • 例えば、投稿記事内に以下のような記述があると、勝手にオシャレなリンクが生成されてしまいます

<pre>
 https://ottan.xyz/itunes-not-sync-backup-4733/
 この記事オススメだよ!
</pre>

2行目が「http〜」から始まる文字列であると解釈されてしまうため、勝手に「Embedly」によってオシャレなリンクに生まれ変わります(前後の空白は無視されます)。このように意図しない動きをすることがあります。「http〜」から始まる文字列の前に空白以外の文字列、例えば、「&nbsp;」を挿入するなど、その行が「http〜」から始まらないようにしてください(上記の例でもそのように対処しています)。<p>タグなどで囲んでもOKです。

後は、投稿記事の本文内にURLを貼り付けるだけで勝手にオシャレなリンクに早変わりです!万が一、「Embedly」がサービスを終了しても、リンクの扱いを外出し(クラス化)しておくことで、後でいかようにでも対応できます。

参考リンク

下記のサイトが大変参考になりました。

はてなブログカードをやめて Embedly に移行してもいいんじゃないか。公式ボタンもあるし。ブックマークレットも作った。

※2017年3月15日(水)、Dropbox のパブリックフォルダが廃止されたためブックマークレットが動かなくなりました。URL を差し替えたリンクに直しましたので、再登録お願いいたします。 他のブログを紹介する方法として ShareHtml やはてなブログカードが有名。 それらに取って代わるものを見つけました。 はてなブログのブログカードは 拙作ブックマークレット があったりしますが、既知の問題が。 @hayashikejinan リファラに残ってるのは http://t.co/7JGhSbdAXq だけじゃない?これはどこかのサイトに貼られたはてなブログカード経由で来てくれたってことになるやろ。なので、どこに貼られてたのか知りたいってやつよ – bouya Imamura (@s56bouya) June 8, 2015 正確には「?url=参照されてる記事」で、こういうの→ http://t.co/6qFDmaIlg2 なんだけど、だいたいわかるだろう、だいたいでいんだよ – bouya Imamura (@s56bouya) June 19, 2015 RSS は抜粋配信をすれば対症療法としては一応なんとかなりますが、リファラはいかんせんどうにも。 Provide a clean, responsive, and shareable card for any content on the web.

この記事が気に入ったら
いいね ! しよう

Twitter で