現在開いているWebページのブログカードをワンクリックで取得できるようにしてみた

こんにちは、CX事業本部 Delivery部の若槻です。

DevelopersIOの記事でWebページのリンクがブログカードで埋め込まれているのを見かけたことがあるのではないでしょうか。

この埋め込みは、はてなブログのブログカードの埋め込み機能を利用して実現しています。（そのため、はてなブログのカウンターがカード内に付いています）

• ブログカード - はてなブログ ヘルプ

この機能は埋め込み用のHTMLコードのテンプレートを使用すれば簡単に利用できるのですが、頻繁に使いたい場合は埋め込みコードを作るのが少し手間ですね。

そこで今回は、現在開いているWebページのブログカードの埋め込み用コードをワンクリックで取得できるようにしてみました。

やってみる

Google ChromeのブックマークにJavaScriptコードを設定して、ブックマークを押下すると開いているWebページの埋め込み用コードを取得出来るようにしてみます。

スクリプト

ブログカード埋め込み用のHTMLコードの形式は次のようになります。

<iframe 
  class="hatenablogcard"
  style="width:100%;height:155px;max-width:680px"
  src="https://hatenablog-parts.com/embed?url=<埋め込みたいWebページのURL>"
  width="300"
  height="150"
  frameborder="0"
  scrolling="no"
></iframe>

現在開いているWebページの埋め込み用コードを取得してクリップボードに書き込む処理をするJavaScriptスクリプトを作成します。

javascript: (() => {
  const href = location.href;
  const textLink = `<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px" src="https://hatenablog-parts.com/embed?url=${href}" width="300" height="150" frameborder="0" scrolling="no"></iframe>`;
  navigator.clipboard.writeText(textLink);
})();

設定

Google Chromeのブックマークマネージャーで、上記スクリプトを[URL]に指定したブックマークを登録します。

使ってみる

埋め込み用コードを取得したいWebページを開き、先程登録したブックマークを開きます。

すると、クリップボードに次のようなコードが書き込まれます。このコードを埋め込みたい箇所にペーストします。

<iframe class="hatenablogcard" style="width:100%;height:155px;max-width:680px" src="https://hatenablog-parts.com/embed?url=https://dev.classmethod.jp/" width="300" height="150" frameborder="0" scrolling="no"></iframe>

以下が上記で取得したコードを実際に埋め込んだものです。Webページのタイトル、デスクリプション、アイキャッチ画像が取得されブログカードで埋め込みできています！

おわりに

現在開いているWebページのブログカードの埋め込み用コードをワンクリックで取得できるようにしてみました。

今までブログカードを利用して来なかったので今後は利用するようにしてより読みやすいブログが書ければと思います。

参考

• 現在開いているWebページのMarkdownテキストリンクをワンクリックで取得する | DevelopersIO

以上