How to configure the embed whitelist selector setting

If you are publishing posts to Discourse from an external site, or if you are embedding Discourse comments with javascript on an external site, you may run into issues where Discourse doesn’t pull the correct post content when users click the Show Full Post button.

If clicking the Show Full Post button is not pulling in the correct content from your external site, you can let Discourse know where to search for the content by adding a list of CSS selectors to the embed whitelist selector site setting.

FInding the setting

Since the embed whitelist selector site setting is used both for posts published to Discourse via the API, and for posts that are pulled into Discourse with the Discourse embed script, the setting can be found in two places. You can find it either by searching for embed whitelist selector on your site settings page, or you can find it in the Crawler Settings section of your Admin / Customize / Embedding page.

Finding the CSS selectors to target

To find the CSS selectors that need to be added to the setting, go to a post on your external site that you have published to Discourse. Open your browser’s web inspector on the post and look at the post’s HTML structure. What you need to find is the HTML that immediately surrounds the main post content. Using a typical WordPress post as an example, the post content is in an .entry-content div that is surrounded by article tags.

Adding the CSS selector article .entry-content to the embed whitelist selector setting will target most of the text content of a typical WordPress post, but you may find that some of the post content fails to get pulled to Discourse. To deal with this, you need to add more specific selectors. To pull text content, images, and lists from my WordPress site to Discourse, I add the following list of CSS selectors to the setting:

article .entry-content img, article .entry-content p, article .entry-content ul

Testing the setting

Finding the correct selectors for your site may take some trial and error. There can be an issue with testing the selectors as you add them to the setting. Discourse caches post content that it pulls from external sites for a period of 10 minutes. This means that you may have to wait 10 minutes to see if the selectors you have added are correct. You can get around this by testing with multiple posts, or if you are testing this on a development site, you can remove the cached data by calling Rails.cache.clear from the site’s rails console.

5 Likes