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

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

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

目次

ほったらかしでも月10万円! ミニサイトをつくって儲ける法

  Amazonでレビューを見る

プラグインの使用例

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

1

{% twitter https://twitter.com/tea0828/status/825152970597601280 %}

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

(通常の方法)ツイッターの投稿を埋め込むには？

今回はHexoでTwitterのツイートを埋め込むプラグインの使い方を解説したいと思います。ですが、まず始めに通常の埋め込み方をまとめてみたいと思います。

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

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

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

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

hexo-tag-twitterの使い方

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

インストール

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

1

$ npm install hexo-tag-twitter --save

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

markdownにタグを記述

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

1

{% twitter ツイートのURL %}

または

1

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

記述例

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

1

{% twitter https://twitter.com/tea0828/status/819885806714138624 %}

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

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

1

{% twitter 819885806714138624 %}

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

1

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

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

1

{% twitter 819885806714138624 tea0828 %}

いかがだったでしょうか

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