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

今回はTwitterツイートの一般的な埋め込み方法も触れながら、プラグインの使い方を解説していきたいと思います。

赤く染まる雪原 | Sony a7 + AF-S NIKKOR 16-35mm f/4G ED VR
 赤く染まる雪原 | Sony a7 + AF-S NIKKOR 16-35mm f/4G ED VR ©

目次

プラグインの使用例

まずはプラグインを使用した時の表示例を説明したいと思います。hexoのmarkdownで以下のように記述します。

your-posts-markdown.md
1
{% twitter https://twitter.com/tea0828/status/825152970597601280 %}

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

ツイッターの投稿を埋め込むには?

まず始めに通常のTwitterの埋め込み方をまとめてみたいと思います。HexoでTwitterのツイートを埋め込む方法についてはこのあと解説したいと思います。

ツイッターの投稿を自分のブログ埋め込むには、以下のようなステップでOKです。以下はTwitter PCの画面ですが、まず最初に、ツイートの右上にあるアイコンをクリックします。

右上のアイコンをクリック
右上のアイコンをクリック ©

次に表示されるメニューの「ツイートをサイトに埋め込む」をクリックします。

「ツイートをサイトに埋め込む」をクリック
「ツイートをサイトに埋め込む」をクリック ©

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

コードをコピーして自身のブログに貼り付ける
コードをコピーして自身のブログに貼り付ける ©

いかがだったでしょうか? 続いて、HexoブログでTwitterのつぶやきを埋め込む手順について説明します。

hexo-tag-twitterの使い方

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

インストール

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

bash
1
$ npm install hexo-tag-twitter --save

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

markdownにタグを記述

投稿記事のmarkdownファイルに以下を記述します。当プラグインは2種類の記述方法ができます。

1
{% twitter ツイートのURL %}

または

1
{% twitter ツイートのID アカウント名 %}

記述例

例えばこちらのTwitterのつぶやきを埋め込みたい場合は、つぶやきのURLを追記して以下のように記述します。

your-posts-markdown.md
1
{% twitter https://twitter.com/tea0828/status/819885806714138624 %}

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

また、他にもツイートのIDなどを使って以下のように記述することもできます。ツイートのIDは、URLに含まれる数字羅列です。具体的にはURLのhttps://twitter.com/アカウント名/status/***/の中の***がツイートIDです。

your-posts-markdown.md
1
{% twitter 819885806714138624 %}

この記述を使う時は、_config.ymlにtwitterのアカウント名を追記してください。

_config.yml
1
2
3
# hexo-tag-twitterのオプション。twitterのアカウント名をtagTwitter.idに指定します。
tagTwitter:
id: tea0828

_config.ymlのオプションを省略することもできますが、その場合にはmarkdownに記述するtwitterタグにアカウント名を追記します。

your-posts-markdown.md
1
{% twitter 819885806714138624 tea0828 %}

いかがだったでしょうか

ということで、今回はツイッターのツイートをHexoブログに埋め込むプラグインをご紹介しました。こちらのプラグインで生成したTwitterツイートはAMP HTMLにも対応しています。もし宜しければ使ってみてくださいね。それでは!