ウェブサイトにMastodon RSSフィードを埋め込む方法

TL; DR 

• MastodonのRSSフィードを使用すると、Mastodonのプロフィールやハッシュタグから公開されている投稿を他のプラットフォームに取り込むことができます。
• 表示したいプロフィールまたはハッシュタグのRSSフィードのMastodon URLを探してください。
• フィードをソーシャルメディアアグリゲーターに接続し、カスタマイズ可能なMastodonフィードウィジェットに変換します。
• ウェブサイトに合わせて、レイアウト、デザイン、モデレーション、表示設定を調整してください。
• 埋め込みコードを生成し、MastodonのRSSフィードコンテンツをウェブサイトに埋め込みます。
• ウィジェットをHTML、WordPress、Wix、Shopify、Squarespace、またはその他の対応プラットフォームに追加してください。
• 一度公開されると、ウィジェットは新しいMastodonの投稿を、更新内容を一つ一つ手動で追加することなく、ウェブサイトのページに表示できるようになります。

概要

フィードタイプ	フィードURLパターン	例:	最適な使用例
プロフィールフィード	https://[instance]/@[username].rss	[https://mastodon.social/@Mastodon.rss](https://mastodon.social/@Mastodon.rss)	ブランドの最新の公開投稿や更新情報を紹介しましょう。
ハッシュタグフィード	https://[instance]/tags/[hashtag].rss	[https://mastodon.social/tags/technology.rss](https://mastodon.social/tags/technology.rss)	キャンペーン、イベント、またはトピックに関する公開投稿を集約します。
ローカルタイムライン	https://[instance]/timeline/local.rss	[https://mastodon.art/timeline/local.rss](https://mastodon.art/timeline/local.rss)	単一のサーバーインスタンスからコミュニティの活動状況を表示します。

Mastodonは、ウェブサイトの最新コンテンツを入手するのに役立つ情報源です。しかし、ウェブサイトの訪問者はプラットフォーム上でこれらの投稿を目にしないかもしれません。Mastodon RSSフィードを利用すれば、そのコンテンツを簡単にサイトに取り込むことができます。フィードをMastodonフィードウィジェットに変換し、訪問者の目に触れる場所に配置できます。このガイドでは、MastodonフィードのURLを見つけてウェブサイトに追加する方法を解説します。また、フィードをカスタマイズして、主要なウェブサイトプラットフォームでMastodonの投稿を表示する方法もご紹介します。 

MastodonのRSSフィードとは何ですか？ 

Mastodonは、人々が投稿、リンク、画像、会話などを共有する分散型ソーシャルプラットフォームです。ユーザーはインスタンスと呼ばれる独立したサーバーに参加し、共有ネットワークを介して接続します。Mastodon RSSフィードは、アカウントやサードパーティの統合を必要とせずに、特定のMastodonプロフィールやハッシュタグからの公開投稿を配信できる、自動的に更新されるXMLフィードです。

RSS（Really Simple Syndication）は、頻繁に更新されるコンテンツを配信するための標準的な方法を提供します。 学術関連のRSSフィード さらに、Mastodonは公開プロフィールやハッシュタグのRSSフィードを生成できます。Mastodonの各RSSフィードは、選択した特定のプロフィールまたはハッシュタグのコンテンツを提供します。

マストドンはどのように機能しますか?

Mastodonは独立したインスタンス間でユーザーを整理し、フェデレーションによってそれらのインスタンスを接続します。ユーザーは自分のプロフィールから投稿を公開し、ハッシュタグは特定のトピックに関する公開投稿を整理するのに役立ちます。これらの要素は、 RSSフィード 収集できます。

MastodonのRSSフィードから何が得られるのか？

Mastodon URLを使用すると、互換性のあるツールでフィードの投稿にアクセスできます。プロフィールフィードは特定のアカウントの投稿に焦点を当て、ハッシュタグフィードはそのアカウントのハッシュタグを使用した公開投稿を収集します。 ハッシュRSSフィードの例を調べることで、さまざまなフィードがどのようにコンテンツを構成・配信しているかを確認できます。 

フィードタイプ	コンテンツ
プロフィールフィード	特定のMastodonアカウントからの投稿
ハッシュタグフィード	特定のハッシュタグに関連付けられた公開投稿

これらのフィードを、ウェブサイトのページにMastodonフィードを表示するのに役立つツールに接続できます。例えば、ウィジェットを使用すれば、手動でコピーすることなく、選択したMastodonコンテンツを表示できます。

ウェブサイトにマストドンのフィードを表示する理由とは？ 

ウェブサイトは、Mastodon の活動の価値を、 ソーシャルプラットフォームMastodonフィードは、最新の更新情報や関連する会話をあなたのサイトに直接表示します。

• ブランドの認知度を高める
  あなたのソーシャルメディアアカウントをまだフォローしていない訪問者にも、Mastodonでの活動内容を表示しましょう。これにより、ウェブサイト上での顧客体験において、ブランドとの新たな接点が生まれます。
• 信用を築きます
  最近の投稿は、あなたのブランドが積極的に会話に参加していることを示すことができます。これにより、訪問者はあなたのブランドとその関心事をより明確に理解できるようになります。
• コミュニティ活動を紹介する
  ハッシュタグフィードは、イベント、キャンペーン、業界トピックなどに関する関連性の高い会話を生み出すことができます。これは、コミュニティと積極的に交流するブランドにとって非常に効果的です。
• 既存コンテンツの再利用
  あなたのチームは、Mastodonの投稿を読者に届けるための新たな場所として活用できます。ウェブサイト用に同じコンテンツを再作成することなく、役立つ最新情報を掲載することが可能です。
• コンテンツ管理時間を節約
  Mastodonのフィードウィジェットを使えば、情報源が更新されるたびに新しい投稿をウェブサイトに取り込むことができます。これにより、ソーシャルメディアの投稿を手動で追加する手間が省けます。

また、私たちを探索することもできます ソーシャルメディアウィジェット ウェブサイト上でソーシャルコンテンツを表示する方法について詳しくはこちらをご覧ください。

Mastodon RSSフィードのURLを取得する方法

フィードのURLは、公開プロフィールページまたはハッシュタグページから直接取得できます。Mastodonはアカウントページとタグページの両方でRSSフィードを提供しているため、どちらのソースもウェブサイトで使用できます。

MastodonプロフィールのRSSフィードを取得する

使用したい公開Mastodonプロファイルを開きます。フィードにアクセスするには、プロファイルURLに.rssを追加します。たとえば、次のようなプロファイルの場合、 https://mastodon.social/@Mastodon 使用されます https://mastodon.social/@Mastodon.rssMastodonでは、これらのフィードをアカウントページから検索することもできます。フィードにはアカウントの公開投稿が含まれているため、URLを使用する前にプロフィールを確認してください。

MastodonハッシュタグRSSフィードを取得する

選択したハッシュタグのMastodonページを開きます。ハッシュタグページのURLに.rssを追加すると、そのフィードにアクセスできます。例： https://mastodon.social/tags/technology になる https://mastodon.social/tags/technology.rssMastodonは、タグページが他のプラットフォームへの配信のためのRSSフィードを提供していることを確認しました。

MastodonのRSSフィードを確認してください

ウィジェットに接続する前に、ブラウザでフィードのURLを開いてください。正常に動作するフィードは、通常のMastodonウェブページではなく、構造化されたフィードコンテンツを返します。また、フィードに選択したソースからの最新の公開投稿が含まれていることを確認してください。フィードが正常に動作したら、それを使用してウェブサイトのコンテンツにMastodonフィードを埋め込むことができます。

Mastodon RSSフィードを埋め込む方法 Tagembed 

Tagembed Mastodonフィードを カスタマイズ可能なウェブサイトウィジェットフィードを接続し、外観を調整して公開できるため、表示画面を自分で構築する必要はありません。このプロセスは、モデレーション機能とレスポンシブウィジェット表示にも対応しています。

ステップ1：作成 Tagembed アカウント

• 申し込みます Tagembed アカウントを作成するか、既存のアカウントにログインしてください。
• Video Cloud Studioで Tagembed ダッシュボード。
• ソースネットワークを選択し、ウィジェットの作成を開始してください。

ステップ2：MastodonのRSSフィードを追加する

• 利用可能なコンテンツソースからRSSソースネットワークを選択してください。
• フィードの表示名を入力してください。
• MastodonフィードのURLをフィードURLフィールドに貼り付け、末尾に「.rss」を追加してください。
• 詳しくはこちら 「フィードを作成」 コンテンツの収集を開始する。

Once Tagembed フィードを収集し、Mastodonの投稿が正しく表示されていることを確認してください。

ステップ3：Mastodonフィードウィジェットをカスタマイズする

• Video Cloud Studioで 「カスタマイズして公開」 ウィジェットのオプション。
• 適切なレイアウトを選択し、デザインを調整してください。
• 色、フォント、背景、その他利用可能なスタイルオプションを変更できます。
• 不適切なコンテンツをフィルタリングするには、モデレーション機能を使用してください。
• ウィジェットをプレビューするには「デスクトップ"と"モバイル公開前にオプションを確認してください。

これらのオプションを使用すると、ウェブサイトに合ったMastodonフィードウィジェットを作成できます。

ステップ4: 埋め込みコードを生成する

• 詳しくはこちら コードを生成 カスタマイズが完了したら。
• 利用可能なオプションから、ウェブサイトのプラットフォームを選択してください。
• 必要に応じてウィジェットの高さと幅を調整してください。
• 生成された埋め込みコードをコピーしてください。

ステップ5：ウィジェットをウェブサイトに追加する

• Mastodonフィードを表示したいページを開いてください。
• お使いのウェブサイトプラットフォームに応じた埋め込み方法に従ってください。
• 生成されたコードを貼り付けるか、サポートされている統合方法を使用してください。
• 変更を保存し、公開されたウィジェットをプレビューしてください。

例えば、WordPressユーザーは Tagembed WordPressのプラグイン または、適切なオプションとしてカスタムHTMLを使用することもできます。他のプラットフォームでは、埋め込みコンテンツを追加するための独自の領域が用意されています。

ウェブサイトページのMastodon RSSフィードウィジェットで、接続されたフィードのコンテンツを表示できるようになりました。 ソーシャルメディアアグリゲーターまた、新しいRSSコンテンツが利用可能になった際に、ウィジェットを更新することもできます。

さまざまなウェブサイトプラットフォームにMastodon RSSフィードを埋め込む方法 

同じMastodonフィードウィジェットを複数のウェブサイトプラットフォームに追加できます。ただし、各プラットフォームによってカスタムコードの扱い方が異なるため、具体的な手順はプラットフォームごとに異なります。

Platform	ウィジェットを追加する場所	追加方法	重要な注意
HTML	ウェブページのHTMLファイル	コードを貼り付けてそのセクションを選択して、ファイルを保存します。	ページがHTTPSを使用していることを確認し、コードを変更しないようにしてください。
WordPress	ページまたは投稿エディター	カスタムHTMLブロックを追加して、コードを貼り付けてください。	専用のRSSアグリゲータープラグインやショートコードブロックを使用することもできます。
ウィックス	Wixエディター	埋め込みコード要素を追加し、「HTMLを埋め込む」を選択して、コードを貼り付けます。	WixでHTTPSを使用するには、埋め込みコードが必要です。
Shopifyサービス	テーマエディター	互換性のあるアプリブロック、アプリ埋め込み、またはカスタムLiquidセクションを使用してください。	利用可能なオプションは、テーマとウィジェットの統合方法によって異なります。
Squarespace	ページエディター	埋め込みコードブロックを追加し、コードを貼り付けてください。	JavaScriptとiframeのサポート状況は、ご利用のSquarespaceプランによって異なります。
他のビルダー	HTML、埋め込み、またはカスタムコードエリア	必要に応じてツールで「その他」を選択し、生成されたコードをコピーして、プラットフォームの対応領域に貼り付けてください。	公開する前に、プラットフォームがサードパーティの埋め込みを許可しているかどうかを確認してください。

公開する前に

• ウィジェットをプレビューするMastodonのコンテンツが正しく読み込まれることを確認してください。
• モバイルディスプレイを確認してくださいウィジェットのサイズは、画面サイズが小さい場合に影響を与える可能性があります。
• フィードURLをテストするウィジェットにコンテンツが表示されない場合は、その場で修正できます。
• 埋め込みコードはそのままにしておくこれはウィジェットが正しく読み込まれ、更新されるために役立ちます。
• プラットフォームの制限事項を確認してくださいウェブサイト構築ツールがカスタムHTML、JavaScript、またはiframeコンテンツを制限している場合は、そのルールを徹底的に理解する必要があります。

この方法を使えば、別個のファイルを作成することなく、Mastodon RSSフィードコンテンツを埋め込むことができます。 WordPress用RSSフィードプラグイン または、あらゆるウェブサイトプラットフォームに対応しています。ウィジェットビルダーでウィジェットを一度作成すれば、あとはウェブサイトに適した埋め込み方法を使用するだけです。

Mastodonフィードウィジェットをカスタマイズする 

フィードが接続されると、ウェブサイト上での表示方法や動作を調整できるようになります。 Tagembed この機能には、元のMastodonコンテンツを変更することなく、ウェブサイトのページにMastodonの投稿を表示するのに役立ついくつかのコントロールが用意されています。

レイアウトを選択

• 表示したいコンテンツの量と種類に合ったレイアウトを選択してください。
• ページデザインに基づいて、カード、スライダー、グリッド、またはその他の利用可能なレイアウトを使用してください。
• スペースが限られている場合は、サイドバーなどのコンパクトなレイアウトを選択してください。

ウェブサイトのデザインに合わせる

• フォント、色、背景、間隔、その他の視覚要素を調整します。
• ウェブサイトの既存のデザインと一貫性を持たせるように、フィードをカスタマイズしてください。
• 標準のデザインコントロールでは十分な柔軟性が得られない場合は、カスタムCSSを使用してください。

コンテンツのモデレーションとフィルタリング

• 収集したコンテンツは、必要に応じて公開する前に必ず確認してください。
• ウェブサイトの目的や対象読者に合わない投稿は削除してください。
• フィードの内容を適切に管理し、関連性の高い情報のみが表示されるように、モデレーション機能を活用してください。

フィードを常に最新の状態に保つ

• ウィジェットが接続されているRSSソースから新しいコンテンツを取得します。
• これにより、個々の投稿を手動で置き換えたり更新したりする必要性が軽減されます。
• 更新動作は、お使いの環境によって異なります。 Tagembed 計画と供給源。

ウィジェットをレスポンシブにする

• Mastodonフィードウィジェットがさまざまな画面サイズでどのように表示されるかを確認してください。
• デスクトップ、タブレット、モバイル端末のレイアウトに合わせて寸法を調整してください。
• 公開前にウィジェットをプレビューして、間隔や表示の問題がないか確認してください。

これらのコントロールは、マストドンを作成するのに役立ちます RSSフィードウィジェット ウェブサイトのデザインに自然に溶け込むようなページを作成できます。さらに、ソーシャルコンテンツを収集・表示するより幅広い方法については、ソーシャルメディアアグリゲーターもご活用ください。

ウェブサイトにMastodonの投稿を表示する最適な方法 

最適な配置場所は、訪問者に見せたいMastodonコンテンツの種類によって異なります。Mastodonフィードウィジェットは、ページが混雑した印象を与えることなく、ウェブサイトの複数の場所に配置できます。

ホームページにマストドンフィードウィジェットを追加する

訪問者があなたの最新の活動をすぐに発見できるよう、最新の投稿を表示します。この配置は、Mastodonがブランドコミュニケーションにおいて積極的な役割を果たしている場合に効果的です。

専用のソーシャルセクションを作成する

フィードを活用して、自社ブランドがより幅広い議論にどのように参加しているかを示しましょう。これは、Mastodonを使ってコミュニティと交流している組織にとって特に効果的です。

関連コンテンツ周辺

ブログ記事、リソース、トピックページなどの横に、関連するMastodonフィードを配置しましょう。ハッシュタグフィードを使えば、そのページで取り上げられているテーマに関する最新の公開ディスカッションを追加できます。

キャンペーンページにて

キャンペーン専用のハッシュタグを使って、関連する投稿を1か所に集めましょう。Mastodonのハッシュタグシステムは、共通のトピックに関する公開投稿をユーザーが見つけやすくするのに役立ちます。

イベントページにて

イベントのハッシュタグに関連する投稿を表示することで、訪問者に進行中の会話を把握してもらうことができます。これは、カンファレンス、新製品発表会、コミュニティイベント、オンラインキャンペーンなどに効果的です。

専用のソーシャルページで

ブランドが複数のソーシャルメディアチャネルを運用している場合は、それらをすべて集約したページを作成しましょう。Mastodonフィードを他のソーシャルメディアソースと併用することで、ページを常に最新の状態に保つことができます。

フィードをあらゆる場所に追加するのではなく、コンテンツの目的に基づいて配置場所を選択してください。さらに詳しいアイデアについては、ガイドをご覧ください。 ウェブサイトにソーシャルメディアのフィードを埋め込む.

ウェブサイトにマストドンフィードを追加するメリット 

Mastodonのフィードは、ウェブサイトにソーシャルメディアの更新情報を表示するだけでなく、既存コンテンツの再利用やメンテナンスを容易にする機能も備えています。

• コンテンツを常に最新の状態に保つ
  RSSフィードを使用すると、選択したMastodonソースから新しい投稿を配信できます。これにより、フィードを毎回再構築することなく、ウェブサイトに最新のアクティビティを反映させることができます。
• 出版作業を減らす
  ウェブサイトのコンテンツにMastodonのフィードを埋め込むと、ウィジェットが表示を処理します。チームは個々の投稿をウェブサイトのページにコピーする必要がなくなります。
• コンテンツのリーチを拡大する
  Mastodonに投稿することで、ウェブサイトを訪れるもののソーシャルメディアをあまり利用しないユーザーにもリーチできます。これにより、既存のコンテンツに新たな活用場所を提供できます。
• 一貫性のある表示を作成する
  Mastodonのフィードウィジェットを使えば、レイアウト、フォント、色、間隔などを自由に設定できます。そのため、フィードをウェブサイトのビジュアルスタイルに合わせることができます。
• さまざまなウェブサイト体験をサポートする
  フィードは、ホームページ、キャンペーンページ、イベントページ、または関連コンテンツセクションに配置できます。これにより、各フィードに明確な目的が与えられます。
• ソーシャルアクティビティをもっと活用しよう
  あなたのチームは既にMastodon向けに記事を作成しています。それらを自社ウェブサイトに掲載することで、その記事を他のデジタルチャネルでも再利用できるようになります。

Mastodon RSSフィード埋め込みに関するよくある問題 

Mastodonフィードは、フィードURLとウィジェットの設定が正しければ通常は正常に動作します。問題が発生した場合は、まず以下のよくある問題点を確認してください。

RSSフィードが読み込まれません

• 問題点： フィードを追加しても、ウィジェットにコンテンツが表示されません。
• チェック： MastodonのフィードURLをブラウザで直接開いてください。
• 修正： 再接続する前に、URLが正しく機能し、利用可能なコンテンツが含まれていることを確認してください。

マストドンの投稿が表示されない

• 問題点： フィードへの接続は確立されているが、投稿が表示されない。
• チェック： ソースに公開されている投稿が含まれていることを確認してください。
• 修正： MastodonのRSSフィードには、公開されている投稿のみが含まれます。非公開の投稿、フォロワーのみが閲覧できる投稿、ダイレクトメッセージはRSSフィードには表示されません。

コンテンツ警告 投稿テキストを非表示にする

• 問題点： 投稿全文が表示されていません。
• チェック： 元のMastodonの投稿を開いて、コンテンツ警告を探してください。
• 修正： MastodonのRSS出力は、コンテンツ警告の構造を保持しています。読者は、非表示のコンテンツを表示するには、元の投稿を開く必要がある場合があります。

フィードが更新されません

• 問題点： Mastodonの新しい投稿はウェブサイトには表示されません。
• チェック： ウィジェットの自動更新が有効になっていることを確認してください。
• 修正： ウィジェットの更新設定を確認し、次回の更新までしばらくお待ちください。 Tagembed 自動更新を無効にすると、フィードの更新が停止する可能性があることに注意してください。

画像やメディアが表示されません

• 問題点： 投稿は読み込まれるが、添付された画像やメディアが表示されない。
• チェック： 元のMastodonの投稿を開き、メディアが正しく読み込まれることを確認してください。
• 修正： ソースフィードを再確認し、メディアソースが変更されている場合はウィジェットを更新してください。

ウィジェットが正しく表示されていません

• 問題点： あなたのMastodonフィードウィジェットは、ページに正しく収まっていません。
• チェック： 幅、高さ、レイアウト、レスポンシブ設定を確認してください。
• 修正： ウィジェットのサイズを調整し、さまざまな画面サイズでプレビューできます。

フィードの読み込みが一時的に停止します

• 問題点： 直接フィード要求は、一時的に失敗したり、処理速度が低下したりする場合があります。
• チェック： フィードのURLを直接開いて、Mastodonインスタンスが正常に応答するかどうかを確認してください。
• 修正： インスタンスの状態を確認し、後でもう一度フィードを試してください。インスタンス管理者はリクエストにレート制限を設定できるため、直接リクエストを繰り返してもすぐに応答が返らない場合があります。

これらの確認で問題が解決しない場合は、ウェブサイトのコードを変更する前に、MastodonフィードのURLとウィジェットの設定を確認してください。

結論

ウェブサイトにMastodonフィードを追加するのに、複雑な設定は必要ありません。まず、MastodonのRSSフィードURLを見つけて、ウィジェットビルダーに接続します。次に、フィードをカスタマイズして埋め込みコードを生成します。最後に、ウィジェットをウェブサイトに追加して表示を確認します。すべてが正常に動作すれば、少ない手作業でウェブサイトに最新のMastodonコンテンツを表示できるようになります。 Tagembed また、ウィジェットのデザインとコンテンツを1か所から管理することもできます。