X(Twitter)フィードを埋め込む方法

STUDIOで作成したサイトにXのフィードを埋め込む

Saika avatar
対応者:Saika
一週間前以上前にアップデートされました

STUDIOで、Xのフィードを埋め込む方法を2つご紹介いたします。

X埋め込みボックスを利用する方法

STUDIOでは、Xボックスを追加することで簡単にX内の任意のコンテンツを埋め込むことができます。

Feedwindを利用する方法

FeedWindというサービスを使用し、フィード埋め込みを実現していきます(有料)。FeedWindは、様々なサービスのフィードを埋め込めるコードを発行するサービスです。このサービスを利用することで、表示をカスタマイズすることが可能です。

1. FeedWindに登録

まずは、こちらでfeedwindに登録しましょう。

2. Xアカウントと連携

登録が完了したら、「Create Widget」をクリック。

RSSやGoogleカレンダーなどのオプションもありますが、今回はX(Twitter)を選択。認証を聞かれるので、OKを押して自分のXアカウントと連携させましょう。

3. 埋め込みコードを取得する

X連携が完了したら、埋め込むためのコードを取得しましょう。右上の「Save & Get Widget」をクリック。するとデフォルトでは、scriptタグしか表示されません。今回はiframeタグが欲しいので、「Get iFrame Version」を押して、iframeコードを表示させましょう。

iframeコードを表示されたら、コピーして準備完了!

コード例:

<iframe src="https://feed.mikle.com/widget/v2/164105/?preloader-text=Loading&" height="402px" width="100%" class="fw-iframe" scrolling="no" frameborder="0"></iframe>

4. STUDIOエディタで貼り付ける

STUDIOのエディタに戻り、Embedボックスを設置。埋め込みコード内に、先ほど取得したiframeコードをペーストすればXフィード埋め込み完了です!

こちらの回答で解決しましたか?