Twitter ネイティブ埋め込み

「コンポーザーのプレビューでは埋め込みを有効にしていません。これは想定される動作です。」

:information_source: 概要 Discourse でネイティブな Twitter 埋め込みをサポートできるようにする
:hammer_and_wrench: リポジトリ GitHub - Lhcfl/discourse-twitter-native-embed
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourse テーマ初心者の方へ Discourse テーマの使用に関する初心者ガイド

このテーマコンポーネントをインストールする

最近の Twitter API の制限により、一部の Discourse フォーラムの onebox が表示されなくなりました。このテーマコンポーネントを使用すると、Twitter API を必要とせずに、Discourse でネイティブな Twitter 埋め込みをサポートできます。

このテーマコンポーネントは platform.twitter.com から Twitter の JavaScript をリクエストするため、Twitter が望めば、この JavaScript を介してあなたを追跡し、プライバシーの問題を引き起こす可能性があります。ますますばかげたものになっているこのソーシャル プラットフォームを信頼するかどうかを検討する必要があります。

このコンポーネントを使用するには、サイト設定のコンテンツセキュリティポリシーの許可範囲に Twitter リンクを追加し、ブロックされた onebox ドメインに twitter.comx.com を追加する必要があります。

https://platform.twitter.com/

「いいね!」 37

これを実行した後、再構築する必要がありますか?インストールしてコンテンツセキュリティに追加しましたが、埋め込みは表示されず、リンクしか表示されません。

「いいね!」 1

もちろん、そんなことはありません。サイトへのリンクをお送りいただければ、なぜそうなるのか確認いたします。このコンポーネントは私のフォーラムでは問題なく動作します。

「いいね!」 5

わかりました、解決しました。設定からTwitterのコンシューマーキーとシークレットを削除した後、意図したとおりに動作するようになりました。おそらく、それらを削除していなかったため、APIを使用して埋め込もうとしていたのだと思います。再度ご協力いただきありがとうございました。Instagramでも同様のことが可能になると素晴らしいですね。

「いいね!」 6

よくできました。このテーマコンポーネントをありがとうございます。素晴らしいタイムリーな仕事です。:slightly_smiling_face:

「いいね!」 3

ありがとうございます!

私の環境では広告どおりに動作していますが、プレビューではツイートのURLがハイパーリンクとして表示されるだけで、返信または投稿が送信されたときに埋め込みが行われるという点は、あまり明確ではないかもしれません。

「いいね!」 2

私たちの場合は逆の順序で発生しています…プレビューでは埋め込みが表示され、投稿時には表示されなくなります。

「いいね!」 1

素晴らしい仕事と良いアイデアです。

埋め込みにダークモードのdata-themeを使用するための小さなフォークを作成しました。うまく動作しますが、私はコーディングの専門家ではありません。

デフォルトテーマまたはダークテーマを使用するオプションを追加できれば、さらに良くなると思います!

「いいね!」 9

上記の推奨事項はすべて実施しました。現在、問題はモバイルデバイスから投稿しようとした場合のみ発生します。ラップトップ/デスクトップからツイートを埋め込むことは、現在正常に機能しています。

「いいね!」 2

一部のユーザーは埋め込みを希望しており、「ログイン」機能は不要です。そのため、このコンポーネントは非常に人気があり、他のプラットフォームからのリクエストも確認しています。

個人的には、Oneboxよりも自然に見えるTwitterの埋め込みスタイルが好きです。より人気のあるプラットフォームの埋め込みがネイティブの外観を引き継げば、トピックの流れの中でうまく差別化できます。本当に素晴らしい仕事であり、開発者アカウントの設定の複雑さを回避するために、なぜ以前からこれを持っていなかったのかと考えてしまいますが、それも必要であり、勇敢で大胆な人々が課題に立ち向かいます。

¡本当にありがとうございます!

「いいね!」 1

別の点として、Twitterの崩壊という話題を見て、埋め込みコンテンツの脆弱性について考えさせられました。以前からあったアイデアを思い出しました。

埋め込み機能の一部として、埋め込みプレビューのバックアップビットマップを生成できれば、Photobucketのような結果を防ぐことができるでしょう。

それがどのようにコード化されるかは分かりませんが、投稿された画像リンクの画像をネイティブデータベースに保存する機能と似たような原理で機能すると思います。これは、どこかのサーバー上に既に存在するファイルなので、より簡単だと思われます。埋め込みがDiscourseの投稿にコミットされたときに発生する、オンザフライのカスタムスクリーンキャプチャ機能と同じように機能するのではないでしょうか。

サイトがコンテンツの一部をアーカイブすることは、インターネットが古くなるにつれて役立ちます。時々、コンテンツは消えてしまいます。

これに沿った別の機能も提案します。こちらで。

「いいね!」 1

ありがとうございます。

「いいね!」 1

これは重要で、つい先ほど発見したことですが、2つと2を合わせて考えると、以前CSPを有効にしておらず、例えばGoogle AdSenseを使用している場合、Twitterコンポーネントを機能させるために暗号化(DM)を使用しているとCSPを有効にすると広告が表示されなくなります。これは競合の可能性があります!

スーパーソリューションまたは「あなたが間違っていた」という証明を歓迎します。

「いいね!」 2

API経由でのワンボクシングは有料のTwitterサブスクリプションが必要になると仮定すると、この方法はDiscourseコアに追加されるべきでしょうか? 大企業コミュニティはイーロンの料金を支払うことができますが、非営利団体や小規模コミュニティには手が届きません。

このアイデアは@teamからサポートを得られますか?

Twitterの衰退は、対応が難しいケースです。依然としてほとんどのニュースやイベントの第一の情報源であり、メディアハウス、企業、関係者によって使用されています。イーロンの揺さぶりにもかかわらず、プラットフォームの信頼できる代替手段はありません。

「いいね!」 2

残念ながら、このコンポーネントは私のDiscourseインスタンスで動作していません。Twitterログインキーを削除しましたが、それでも何も起こりません。CSPも有効にしました。

「いいね!」 2

Hi ljppさん、

リッチな埋め込みが無効になるのは望ましくないことです。この問題について、適切に対処できる方法を検討中です。:slight_smile:

コンポーザーにTwitterのリンクを貼り付けた際、ブラウザの開発ツールのネットワークタブには何が表示されますか?
JavaScriptコンソールにエラーはありますか?

「いいね!」 3

検討していますが、ここで直面しなければならない非常に大きな問題が2つあります。

  1. IFRAMEはTwitterがユーザーを追跡することを許可することを意味します。プライバシーに関する懸念があります。
  2. IFRAMEは「不明な」高さとの戦いを意味します。高さがなく、Twitterとチャットした後にのみ取得できる場合、ページが飛び跳ねてしまい、Discourseの体験に大きく影響する可能性があります。事前に高さを把握するのは非常に困難です。
「いいね!」 6

まったくです。このテーマコンポーネントの回避策はTwitterのサーバーからJavaScriptを読み込むため、Twitterの全体的な状況を考慮すると、これは重大なプライバシーリスクです。そのため、少なくとも今のところはこのテーマコンポーネントを適用することには消極的です。

確かに難しいケースですね。

「いいね!」 5

リンクをコンポーザーに貼り付けた後の結果ですが、何を見ればよいのかよくわかりません。


プレビューではこのメッセージが表示されます。


ツイートはこちらです。

「いいね!」 2

更新:

埋め込みは現在機能していますが、コンポーザーのプレビューには「申し訳ありませんが、生成できません…」というメッセージが表示されます。投稿すると、すべて正常に表示されます。

「いいね!」 2