[Shopify]Twitter投稿（ツイート）をブログ記事に埋め込む方法

ブログ記事を書いていると、Twitterの投稿を埋め込みたい時がありませんか。

今回はShopifyブログにTwitter投稿を埋め込む方法についてご紹介します。

以前、ShopifyサイトにTwitterフィード（タイムライン）を埋め込む記事を書いたのですが、今回はその投稿版ですね。

https://ec-penguin.com/blogs/shopify/embed-twitter-timeline

（Twitter フェードを埋め込む方法）

おおまかな流れはこんな感じです。

1. 埋め込みたいTwitter投稿のURLを取得する

埋め込みたいツイートのURLを取得する

まず最初に自分が埋め込みたいツイートURLを取得します。

せっかくなので、私の下記ツイートを埋め込んでいきます。（まだTwitterフォローしていただけていない方は、お気軽にフォローしてください☺️）

https://twitter.com/ec_penguin_/status/1304382682290249730

これでURLが取得できましたね。このURLは後ほど使うので、タブは開いたままでお願いします。

Twitterの埋め込み用コードを取得する

先ほどのツイートURLを単純にブログ記事にペーストしても、埋め込みはされません。以前ワードプレスだと何かテーマによって？プラグインによって？はできた気もしますが、Shopifyではまだその機能は備わっていないようです。

なので

https://publish.twitter.com/

こちらのURLを開き、

「Embedded Tweet」という部分を選択します。すると、

このようなモーダルが立ち上がるかと思います。

Paste a Tweet URLと記載されているので、先ほど取得した埋め込みたいツイートのURLをここにペーストし、Previewボタンを押してみましょう。

するとちゃんとプレビューで自分のツイートが表示されました。

上部の『Copy Code』という部分がありますので、そちらをクリックしましょう。埋め込み用のコードがコピーできました！

ブログ記事にツイートを埋め込む

そして先ほどのコピーしたコードをShopifyブログ記事に埋め込みましょう。

管理画面→オンラインストア→ブログ記事→ツイートを埋め込みたい記事

に移動します。

そして赤色枠で囲んだ<>の部分をクリックします。

するとコードっぽいぐちゃぐちゃしたものが出てくると思います。埋め込みたい場所に先ほどの埋め込みコードをペーストするだけです。（※HTMLコードがわからない方は、必ずコンテンツの一番下に埋め込むようにしてください。タグとタグの間に埋め込んでしまうとデザインが崩れてしまいます。）

埋め込めたら、ブログ記事のプレビューをしてみましょう。

ちなみに埋め込んでみたものがこちら↓

沖縄の写真を定期的にアップしていく🏖
せっかくだから　#ShopifyOkinawa のタグつきで笑 pic.twitter.com/7SCdhcmYzW

— Guin. Shopify (@ec_penguin_) September 11, 2020

これで埋め込みが完了しました。 ちゃんとツイートをShopifyブログに埋め込むことができましたね。

 ツイートをShopifyブログ記事に埋め込む方法　まとめ

以上、Shopifyブログにツイートを埋め込む方法でした。

このツイートをブログ記事内で引用したい！使用したい！

という時は重宝する方法ですね。私もこれから積極的にブログ記事にツイートを埋め込むようにしようかな。

役に立ったなぁと感じていただければ、ぜひSNS等でシェアしていただけると嬉しいです。

それでは、本日も良い1日を！