# Code for Properly-Formatted Ghost-Discourse Forum Integration?

**URL:** https://meta.discourse.org/t/code-for-properly-formatted-ghost-discourse-forum-integration/227777
**Category:** Support
**Created:** [May 22, 2022, 7:46pm UTC](https://meta.discourse.org/t/code-for-properly-formatted-ghost-discourse-forum-integration/227777 "2022-05-22T19:46:19Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [May 22, 2022, 7:46pm UTC](https://meta.discourse.org/t/code-for-properly-formatted-ghost-discourse-forum-integration/227777/1 "2022-05-22T19:46:20Z")

</div>

Hi everyone –

Problem: Here is how my Ghost post appears as a Topic on my Discourse forum…

(Live link here [https://noobish.me/t/test-for-discourse-embedding/48](https://noobish.me/t/test-for-discourse-embedding/48))

 ![Screenshot 2022-05-22 122004](https://global.discourse-cdn.com/meta/original/4X/5/0/b/50b1dbab1da128087954de8f110e35a0714d70f4.png)

Of course, **this** is what I want the embed to actually look like in the forum post (I want it to look like the post appears on the blog page)…

(Live link here [https://jen.studio/test-for-discourse-embedding/](https://jen.studio/test-for-discourse-embedding/))

 ![Screenshot 2022-05-22 134833](https://global.discourse-cdn.com/meta/original/4X/1/c/6/1c6c3734fe8ed04386a349189b3b88476082fa59.jpeg)

Here is my post.hbs source where I have the Discourse embed code:

```plaintext
{{!< default}}
{{#post}}
    <div class="tagShare">
        <div class="shareIcon icon-share"><!-- --></div>
        <div class="share">
            <a class="icon-twitter" href="https://twitter.com/share?text={{encode title}}&amp;url={{url absolute="true"}}"
                    onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;"></a>
            <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{url absolute="true"}}"
                    onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;"></a>
        </div>
    </div>  
    <article id="postMain" class="{{post_class}}">
    
      <section class="postContent doubleColumn">
      
        <h1 class="postTitle">{{{title}}}</h1>
        <div class="tags" style="color: #ef6752">#{{tags separator="#"}}</div>
        <time class="dateStamp" datetime="{{date format='YYYY-MM-DD'}}">
            <span>&mdash;&ensp;</span>
            <i>Published {{date format="DD MMM"}} by {{authors}}</i>
            <span>&ensp;&mdash;</span>
        </time>
        
        <center><p><i>{{{custom_excerpt}}}</i></p></center>
        {{#if prev}}
          <link rel="previous" href="{{page_url prev}}"></link>
        {{/if}}
        {{#if next}}
          <link rel="next" href="{{page_url next}}"></link>
        {{/if}}

        {{#if feature_image}}
        <figure class="article-image heroImage showHeroImage">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(min-width: 1400px) 1400px, 92vw"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure>
        {{/if}}
        
        {{content}}

      </section>
      
            <div id='discourse-comments'></div>
            <script type="text/javascript">
              DiscourseEmbed = { discourseUrl: 'https://noobish.me/',
                                 discourseEmbedUrl: '{{url absolute="true"}}' };
            
              (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>

    </article>

{{/post}}

```

I followed the instructions here…

> **[Official Ghost + Discourse Integration](https://ghost.org/integrations/discourse/)**
>
> Setting up Discourse with Ghost allows you to embed comment on your posts and pages & link your site to your community forum. Find out how 👉

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [May 22, 2022, 10:50pm UTC](https://meta.discourse.org/t/code-for-properly-formatted-ghost-discourse-forum-integration/227777/2 "2022-05-22T22:50:13Z")

</div>

I’ve partially solved this.

In the Discourse forum admin settings at `https://noobish.me/admin/customize/embeddingsettings`

 ![Screenshot 2022-05-22 163524](https://global.discourse-cdn.com/meta/original/4X/5/b/c/5bc78a8ebd1458e1aa510486c6a71113affcded9.png)

There under **Crawler Settings**

I added just the specific CSS selector where (for the specific theme I’m working with) the main content of the post resides…

 ![Screenshot 2022-05-22 163752](https://global.discourse-cdn.com/meta/original/4X/6/1/1/6115dd81c33d5bdf7f373345d42f2e0e7fcf73dc.png)

---

<div class="post-metadata">

### Author: ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [May 22, 2022, 10:51pm UTC](https://meta.discourse.org/t/code-for-properly-formatted-ghost-discourse-forum-integration/227777/3 "2022-05-22T22:51:02Z")

</div>

I’d still like to know if there is a way to bring one or more images from the blog post into to the forum entry.

---

<div class="post-metadata">

### Author: ![satonotdead](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/satonotdead/32/447830_2.png) [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [August 20, 2022, 11:15pm UTC](https://meta.discourse.org/t/code-for-properly-formatted-ghost-discourse-forum-integration/227777/4 "2022-08-20T23:15:33Z")

</div>

You can check that and try to do the same using your metatag data and some javascript coding: [GitHub - discourse/onebox: (DEPRECATED) A gem for turning URLs into website previews · GitHub](https://github.com/discourse/onebox)