How to customize the text in an embedded post?

I have a site where I publish various tutorials and blogs, and I use Discourse as both a forum and as comments using the embedding feature.

This mostly works great, except that when I create a new page on the main site, all of the content is included in the Discourse post. Some of my users don’t even know about the main site, because they always read the full post on the forum! Which is a problem because features like embedded code editors don’t work on Discourse, so it comes off as a buggy experience.

In a perfect world, the Discourse post would just be a short, very obvious link back to the original post on the main page. Maybe something like this:

View the original post here:

https://example.com

Replies to this thread will show as comments on the original post!

I’ve tried disabling the embed truncate setting as described in this thread, but that seems to hide the “show full post” button but still shows all of the content in the post.

I’ve also tried editing the embed.imported_from message, but that just changes the tiny text at the bottom that folks seem to already be missing.

I’ve also tried just editing the post manually after Discourse creates it, but the markdown is not rendered into HTML and shows up as plain text instead. This sounds similar to this issue: Customizing the "Embedding" Behavior by Disabling Show Full Post?

Is there a setting I’m missing, or some other trick I can use to customize the text in an auto-generated Discourse post? Maybe something I can include in the HTML of the main site to trick Discourse into showing the right thing? Or I’m not above just manually editing it, if there’s a way to fix the markdown rendering issue.

Thanks for any help y’all can offer!

1 Like

Sorry for the bump, but I’d be really grateful if anybody had any ideas for me to try!

Hey Kevin, can I just confirm whether you’re using the WP Discourse plugin or a javascript embed?

1 Like

Thanks for the reply! I’m using the JavaScript embed. For example, I have this page:

Which contains this embed code:

<script type="text/javascript">
DiscourseEmbed = { discourseUrl: location.protocol 
	+ '//forum.happycoding.io/',
	discourseEmbedUrl: location.protocol + '//happycoding.io/tutorials/javascript/react-css' };
	
(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>

That creates this post on my Discourse:

And if you click that, you’ll see that the post contains the full text of the original page.

Thanks for the clarification.

Why have you got the embed truncate site setting enabled in Discourse? I’m just a bit confused as you mention you’ve disabled it, but you also say your problem is

The embed truncate setting is there partly for this very reason. It means the user will only see a partial excerpt of the post on Discourse itself.

Could you just explain a bit more what specific user behavior you’re trying to avoid, and what specific user behavior you’re trying to encourage.

1 Like

I’ve gone back and forth with the embed truncate setting. Looking at it again now, I guess enabling it is marginally better, but I’m still hoping for a way to avoid showing the full text of the original article in Discourse at all. In other words, I don’t want to hide the full text behind a button click- I never want to show the full text at all, just a link to the original article.

The behavior I’m trying to avoid is users come to my Discourse and read the full article on Discourse, rather than in the original page. This is a problem because the full text on Discourse often contains bugs (with interactive JS, embedded code, etc), and then I get bug reports where the solution is to stop reading on Discourse and go to the “real” site instead.

In other words, the user behavior I’m trying to encourage is reading the full article on the original page, rather than in the Discourse post.

This might seem minor (and in the grand scheme of things it is) but my fear is that users are coming to my Discourse, thinking that the page’s behavior is buggy, and bouncing off before they realize there’s a page on my “real” site that they should be reading instead of the Discourse.

Some possible options I’ve considered:

  • Is there a setting that tells Discourse to include just a link, and not include any of the original post at all?
  • Is there a CSS class or other attribute I can add to my original HTML to indicate which part of the article should be included (or excluded) in the Discourse post?
  • Maybe I could add custom CSS to the Discourse to hide the Show Full Post... button?

Thanks for explaining Kevin. There are no settings specifically directed at this issue, but there’s two ways you could approach this.

Customize what HTML is pulled from your site

The way embeds work is that they scrape the content from a site using the Readability gem. The gem and it’s output use the following options to filter what HTML is scraped

opts[:whitelist] = SiteSetting.allowed_embed_selectors if SiteSetting.allowed_embed_selectors.present?
opts[:blacklist] = SiteSetting.blocked_embed_selectors if SiteSetting.blocked_embed_selectors.present?
allowed_embed_classnames = SiteSetting.allowed_embed_classnames if SiteSetting.allowed_embed_classnames.present?

So you could set the site settings allowed_embed_selectors, blocked_embed_selectors, or allowed_embed_classnames to restrict which content is pulled from your HTML and shown in the Discourse post, e.g. you could restrict it to non-existent classes so no content was pulled.

The content scraped from the site then has this HTML appended to it:

"\n<hr>\n<small>#{I18n.t('embed.imported_from', link: "<a href='#{url}'>#{url}</a>")}</small>\n"

So you’d just need to customize the embed.imported_from text in the admin panel to tell the user to read the content on the blog. Note that you can interpolate the link to the content in that text, e.g. the english version of the locale text is

This is a companion discussion topic for the original entry at %{link}

Hide the Show Full Post button

As you suggested, hiding the show full post button with CSS should also work.

2 Likes