Shopifyのブログ記事のコメントでDiscourseを最も効率的に活用する方法は?

皆さん、こんにちは!

この特定のアプリケーションについて、ここでいくつか検索してみましたが、ほとんどの質問はWordPressの投稿へのコメントにDiscourseを使用することに関連しているようです。

このハウツー(https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963)以外に、特にShopifyのブログ記事にDiscourseコメントを実装するためのガイダンスを共有していただけますか?

私が思い描いている例は、macrumors.comがコメントを処理する方法で見ることができます(つまり、記事を表示するとき、トップコメントが記事の下に表示され、ユーザーはすべてのコメントを表示するオプションが与えられます。そのリンクをクリックすると、記事の結果として作成されたフォーラムトピックが読み込まれます)。

よろしくお願いします!

「いいね!」 3

The Lion King Help GIF
:laughing:

「いいね!」 1

JavaScriptの埋め込みに問題があるのはなぜですか?

「いいね!」 3

ご返信ありがとうございます!

本日実装し、何か問題が発生した場合はこちらでご報告します。上記で説明したのと同じように JavaScript の埋め込みオプションが機能するとは知りませんでした。申し訳ありません! :slight_smile:

「いいね!」 5

@MarximusMGさん、こんにちは!この件はいかがでしたか?JS埋め込みの使用経験を共有していただけますか?それとも、この取り組みは断念されましたか?

しばらく気になっていたので、試してみることにしました。注意点として、私はShopifyの経験がほとんどありませんが、Discourseのカスタマーサポートの仕事で何度も尋ねられたことです。

ShopifyストアとDiscourseサイトの両方が、匿名(ログインしていない)ユーザーでも表示できるように設定されている場合、DiscourseのコメントをShopifyの商品ページに埋め込むことができます。そのために、Discourseサイトの「管理 / カスタマイズ / 埋め込み」ページの「許可されるホスト」セクションにストアのドメインを追加します。

「トピック作成時のユーザー名」設定に、Discourse Shopifyトピックの作成者として表示されるDiscourseユーザーのユーザー名を追加してください。その後、ページ下部にある「埋め込み設定を保存」ボタンをクリックします。

埋め込みページに表示されている埋め込みコードを、Shopifyの商品ページの「説明」セクションにコピーします。コードを挿入する前に、エディタの「HTMLを表示」ボタンをクリックしてください。

埋め込みコードを編集して、Discourse埋め込みページの「トピック作成時のユーザー名」として入力したユーザー名に DISCOURSE_USERNAME を置き換えます。また、埋め込みコードの EMBED_URL テキストを商品のURLに置き換えます。その後、商品ページを保存します。

なお、Discourseコメントの埋め込みに関する詳細はこちらで確認できます: https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963。

これで、Shopifyの商品ページにDiscourseコメントセクション(iframeとして埋め込まれたもの)が表示されるはずです。エラーがなければ、最初にアクセスしたときに「ディスカッションを読み込み中」と表示される場合があります。これは、ページへのアクセスがDiscourseに商品ページ用のトピックを作成させたためです。数秒後、「ディスカッションを開始」というテキストが表示されるはずです。そのリンクをクリックすると、関連するDiscourseトピックに移動します。

トピックにアクセスして返信すると、その返信はShopifyの商品ページに表示されます。

考えられる問題点:
デフォルトのShopifyテーマの説明セクションは、Discourseコメントセクションを表示するには幅が狭すぎるようです。

これはカスタムShopifyテーマで簡単に修正できると想定しています。

Discourseでは、Shopifyの商品からDiscourseトピックに引き出されるコンテンツをあまり制御できません。私がDiscourseにリンクした商品で確認しているのは次のとおりです。

「全投稿を表示」ボタンをクリックした後:

私が望むのは、商品概要、価格、画像が表示されることです。以下のテキストが表示されることは絶対に避けたいです。

商品バリアント
受け取り可能状況を読み込めませんでした 更新

これは、Discourseの allowed embed selectors サイト設定を調整することで修正できる可能性があります。その設定に関する詳細は次のとおりです。許可される埋め込みセレクター設定を設定する。Discourseには、役立つ可能性のある非表示の blocked embed selectors サイト設定もあります。最近、Discourseの埋め込み設定を構成するのに役立つオンラインデバッガーをセットアップしました。まだ開発途上ですが、試してみたい場合はPMを送ってください。

DiscourseサイトまたはShopifyストアのいずれかが、匿名ユーザーが表示できないように構成されている場合、埋め込みコメントで問題が発生すると予想されます。

以前に公開された多数のShopify商品に手動でDiscourse埋め込みコードを追加するのは面倒かもしれません。Discourse埋め込みコードをすべての商品説明に追加するShopifyアプリを作成することは可能だと想定しています。

もう1つ対処する必要があるのは、埋め込まれたDiscourseコメントのスタイルをShopifyの商品ページのスタイルに合わせることです。これは、デフォルトのDiscourseテーマのテーマエディタの「埋め込みCSS」セクションにCSSを追加することで可能になるはずです。たとえば、これは前のスクリーンショットの背景色の問題を修正します。

「いいね!」 1

OPの質問に完全には答えられていないことに気づきました。これは、Shopifyの商品ページまたはブログ投稿に機能する一般的なアプローチです。ストアの「テーマ / カスタマイズ」セクションから、Discourseコメントを追加したいページテンプレートに移動します。ページに応じて、セクションにカスタムLiquidブロックを追加するか、新しいカスタムLiquidセクションを追加します。次に、セクションにDiscourse埋め込みコードを追加します。

埋め込みコードの discourseEmbedUrl には location.href を使用します。これにより、discourseEmbedUrl が自動的に設定されます。例:

<div id='discourse-comments'></div>
<meta name='discourse-username' content='DISCOURSE_USERNAME'>

<script type="text/javascript">
  DiscourseEmbed = {
    discourseUrl: 'DISCOURSE_URL',
    discourseEmbedUrl: location.href,
    // className: 'CLASS_NAME',
  };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>

Shopifyのブログ投稿の場合、コメントセクションを中央に配置し、幅を制限するために、LiquidセクションにカスタムCSSを追加する必要があるでしょう。例:

div#discourse-comments {
  max-width: 726px;
  margin: 0 auto;
}

商品ページとは異なり、ブログ投稿では、Discourseが適切なコンテンツをトピックにうまく取り込んでいることがわかります。

「いいね!」 3