This guide explains how to configure the ‘allowed embed selectors’ setting in Discourse. This setting is crucial when publishing posts from an external site to Discourse or when embedding Discourse comments on an external site using JavaScript.
Required user level: Administrator
Some CSS knowledge is required for more avdanced usage
When publishing posts to Discourse from an external site or embedding Discourse comments on an external site, you may encounter issues with the “Show Full Post” button not pulling the correct content. This guide will help you configure the ‘allowed embed selectors’ setting to resolve this issue.
Understanding the problem
When users click the “Show Full Post” button, Discourse may not pull the correct post content from your external site. This is where the ‘allowed embed selectors’ setting comes into play.
Locating the setting
You can find the ‘allowed embed selectors’ setting in two places:
- Search for “allowed embed selectors” on your site settings page.
- Navigate to Admin > Customize > Embedding, and look for “CSS selector for elements that are allowed in embeds” in the Crawler Settings section.
Identifying the correct CSS selectors
To find the appropriate CSS selectors:
- Go to a post on your external site that you’ve published to Discourse.
- Open your browser’s web inspector and examine the post’s HTML structure.
- Identify the HTML elements that immediately surround the main post content.
For example, in a typical WordPress post, the content is often in a .entry-content div within article tags. In this case, you might use article .entry-content as your CSS selector.
Configuring the setting
To pull various content types from your external site, you may need to add multiple selectors. For instance:
article .entry-content img, article .entry-content p, article .entry-content ul
This example targets images, paragraphs, and unordered lists within the article’s entry content.
Testing and troubleshooting
Finding the correct selectors may require some trial and error. Keep in mind:
- Discourse caches external post content for 10 minutes, so changes may not be immediately visible.
- To work around this, test with multiple posts or clear the cache on a development site using
Rails.cache.clearin the Rails console.
Handling images
If you’re having trouble pulling images from your website, ensure that your CSS selectors include the appropriate image elements. For example:
article .entry-content img
This selector targets images within the article’s entry content.
Additional considerations
- The ‘allowed embed selectors’ setting applies to both posts published via the API and posts pulled in with the Discourse embed script.
- You may need to adjust the selectors based on your specific website structure and content types.
- Remember to save your changes after updating the setting.
Last edited by @hugh 2024-07-16T03:51:58Z
Last checked by @hugh 2024-07-16T03:52:03Z
Check document
Perform check on document:
