ブログでインスタグラムの投稿記事を埋め込むプラグインを作った

HexoブログでInstagramの投稿記事を埋め込めるようにするプラグイン「hexo-tag-instagram」を作りました。投稿記事のmarkdownファイルにinstagramタグを入れると、写真や動画を埋め込む事ができます。

1

{% instagram BDQIXomE6kU %}

例えば上記のように書くと、こんな感じで表示されます。

目次

(通常の方法)インスタグラムの投稿を埋め込むには？

今回はHexoでinstagaramを埋め込むプラグインの使い方を解説したいと思います。ですが、まず始めに通常の埋め込み方をまとめてみたいと思いますので、以下をご覧ください。

通常、インスタグラムの投稿を自分のブログ埋め込む場合は3つのステップでOKです。以下はinstagram PCの画面ですが、まず最初に、画面右下の「…」をクリックします。

次に表示される「埋め込み」をクリックします。

最後に表示される「埋め込みコードをコピー」をクリックし、コードをコピーします。こちらを自身のブログに貼り付けると、インスタグラムの投稿を埋め込む事ができます。

いかがでしたでしょうか？ 続いて、Hexoブログでインスタグラムを埋め込む手順について後述します。

hexo-tag-instagramの使い方

今回の本題です。次にHexoでinstagaramを埋め込むプラグインの使い方を解説したいと思います。

インストール

まずは、npmからインストールしてください。

1

$ npm install hexo-tag-instagram --save

Pull Requestやissueも歓迎しておりますので、煮るなり焼くなりご自由にお使いくださいませ(^^)

markdownにタグを記述

instagramを投稿記事に埋め込むには、markdownファイルに以下ような記述をします。当プラグインは2種類の記述方法ができます。

1
2
3

{% instagram 投稿記事のURL %}
例えば
{% instagram https://www.instagram.com/p/8ppwIyE6lU/ %}

または

1
2
3

{% instagram 投稿記事のショートコード %}
例えば
{% instagram 8ppwIyE6lU %}

と記述します。

ショートコードとは？

投稿記事のショートコードは、URLに含まれるIDです。具体的にはURLのhttps://www.instagram.com/p/＊＊＊/の中の＊＊＊がショートコードです。例えばこちらのポストを埋め込みたい場合は、記事のURLから8ppwIyE6lUがショートコードだと確認できます。ですので、以下のように記述します。

1

{% instagram 8ppwIyE6lU %}

上記のように記述すると、以下のように表示されます。

オプション

プラグインでは次のようなオプションを指定することができます。

キャプション表示・非表示

埋め込むインスタグラムのキャプションを表示するかどうかを決めることができます。_config.ymlに次のようなオプションを追加してください。

1

# すべてのinstagram埋め込みのキャプションを非表示にする
tagInstagram:
  captioned: false

また、埋め込むinstagramごとにキャプションを表示するか否かを決めることも出来ます。次のyour-posts-markdown.mdのように、instagramタグの直後にtrue(表示)またはfalse(非表示)を追加します。

1

{% instagram false https://www.instagram.com/p/BRI5Fz0BGjj/ %}

通常はキャプションが次のように表示されますが、falseに設定すると、キャプションは非表示になります。

いかがだったでしょうか

ということで、今回はインスタグラムの投稿写真や動画をHexoブログに埋め込むプラグインをご紹介しました。今まで知らなかったんですが、Instagramの画像サイズは最大で1080 x 1080 pxだったんですね。ブログに使う画像としても、十分解像度があるので綺麗です。

こちらのプラグインで生成したinstagramの埋め込みはAMP HTMLにも対応しています。もし宜しければ使ってみてくださいね。それでは！