メインコンテンツにスキップ

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

X(Twitter)フィードをStudioで作成したWebページに埋め込む方法をご紹介します。

今日アップデートされました

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

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

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

X(Twitter)の埋め込み用ボックスを追加し、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フィード埋め込み完了です!

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