【学び】WordPressでカード表示出来るembed.lyを使ってみた

学び

どうも、クズです。

最近、記事を埋め込む際に「embed.ly」というサービスを利用しています。

今回は、そのサービスを紹介します。

Embed Code Generator | Embedly

Enter a URL and Embedly will generate HTML you can embed in your site or blog.

WordPressの埋め込み機能

WordPress自体にも、埋め込み機能はあります。

YouTubeや、Twitterなどメジャーなサービスは対応していますが

多くのサイトは未対応です。

試しにテレビ東京の「プリチャン」の公式HPを埋め込んで見ると

「このコンテンツを埋め込めませんでした」と表示が出ます。

一方、有名なブログサービス「はてなブログ」は、リンクを埋め込むと

「ブログカード」を自動生成してくれます。

(※ちなみに、はてなブログはWordPressの埋め込みに対応しています)

では、対応していないサイトはどうすればいいのか?

そこで、「embed.ly」を使ってみます。

「embed.ly」の使用方法

解説されているサイト様は多数ありますので、詳細な解説はそちらを

見ていただければと思います。

URLを入力

まず、URLを入力します。

ここでは「プリチャン」のアニメ公式サイトのURLを例に解説します。

プレビューを確認する

上記のように、プレビュー画像が出てきますので、確認します。

「カスタマイズ」という項目がありすが、Twitterなどの共有ボタンの

有無や、サイズを調整出来ます。

コードのコピー

「Embed Code」が生成されているので、コピーします。

WordPressへの埋め込み

これはWordPressエディタ「Gutenberg(グーテンベルグ)」での

埋め込み方法ですので、ご容赦ください。

まずは、ブロックの生成→カスタムHTMLを選択します。

その後、カスタムHTMLを入力する画面が出てきますので、先程の

「Embed Code」を貼り付けます。

すると以下のように、リンクが貼り付けられます。

注意点としては、このコードをそのまま使用すると、目次表示されて

しまいます。

その場合は、コード中の”<h4>”を削除すれば、表示されません。

まとめ

はてなカード風のブログカードを作成する方法として、以下の

プラグインがあります。

しかし「embed.ly」の方が、美しい(自分視点ではありますが)ブログカードを

挿入出来ますので、こちらを使用していきます。

皆さんも一度お試しあれ。

コメント

タイトルとURLをコピーしました