Oneboxでリッチリンクプレビューを作成する

:bookmark: これは、Discourse で Onebox を使用してリッチなリンクプレビューを作成するためのガイドです。Onebox の作成方法、インラインでの Oneboxing の使用方法、Oneboxing の回避方法、ハイパーリンクの使用方法、高度な iFrame の処理方法について説明します。

:person_raising_hand: 必要なユーザーレベル: すべてのユーザー

Onebox は、Web リンクを役立つプレビュー抜粋に変換し、リーダーがクリックする前にターゲットに関する情報を提供できるようにします。

概要

このガイドでは、次の方法について説明します。

  • Onebox の作成方法
  • インラインでの Oneboxing の使用方法
  • Oneboxing の回避方法
  • Oneboxing の代わりにハイパーリンクを使用する方法
  • 高度な iFrame の処理方法

Onebox の作成

Onebox を作成するには、任意のリンクを単独の行として投稿に貼り付けるだけです。例:

https://www.google.com/

結果は次のようになります。

Onebox は、一般的な oEmbed および OpenGraph タグをサポートしており、Wikipedia、Twitter、Amazon、YouTube などの人気サイトのカスタムルールを備えています。

投稿にリンクを貼り付けて、何が起こるか試してみてください。Oneboxing を機能させるには、リンクが必ず単独の行にある必要があることを忘れないでください!

インライン Oneboxing

enable inline onebox on all domains (すべてのドメインでインライン Onebox を有効にする) というサイト設定が有効になっている場合(この機能はデフォルトで有効になっています)、テキスト内にリンクをインラインで貼り付けると、生のリンクがページのタイトルに置き換えられます。例:Understanding Discourse Trust Levels

like this https://blog.discourse.org/2018/06/understanding-discourse-trust-levels/

Onebox の回避

リンクをプレーンで装飾されていない生のリンクとして表示したい場合は、それを <> ブラケットで囲みます。

<https://blog.discourse.org/2018/06/understanding-discourse-trust-levels/>

または、リンクの前にスペースを置くか、リンクの後に任意の文字を置くことでも回避できます。

ハイパーリンクの使用

テキストにリンクを追加するには、次の方法を使用します。

  • エディターのツールバーにあるチェーンリンクボタンを使用する
  • 投稿内のテキストを選択し、クリップボードからリンクを貼り付ける
  • Markdown / BBCode / HTML リンクを追加する:
[link here](https://example.com)
[link=https://example.com]link here[/link]
<a href="https://example.com">link here</a>

高度な iFrame

デフォルトでは、セキュリティ上の理由から <iframe> はブロックされています。ただし、iframe が非常に信頼できるソースからのものである場合、Discourse の管理者はそのドメインを allowed iframes サイト設定に追加できます。

以下に示す地図の埋め込みコードなど、完全な埋め込みコードを貼り付ける必要がある場合もあります。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24202.451099423397!2d-74.06201522657554!3d40.68924937923285!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2suk!4v1533203877892" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

結果は次のようになります。

追加リソース

Onebox の詳細情報とトラブルシューティングについては、以下の関連トピックを参照してください。

「いいね!」 46