I’m using Liebling theme and wanted to add few ads into it.
I want ads to be shown on under the Tittle heading and Two ads on 2nd Paragraph and 3rd Paragraph.
Can someone help me?
You can add ads to your site in a few ways: using site-wide code injection, manually in your theme, or in individual posts or pages using cards in the editor.
Here’s a guide of how to integrate Google AdSense with Ghost, which should give you an idea of how to achieve what you’re looking for whether you’re using Google Ads or not.
Really, Site wide code injection isn’t meant for ads as it will add ads to top of site and into the footer of site. Both are not a good place to place your ads.
Injecting into individual post is such stupid thing, I can’t believe you guys are recommending it.
I want to add ads manually I know I have to put it into post.hbs file but I don’t know where to put the code to display ads where I wanted to. So if you can guide a bit in that direction that would be helpful.
1 Like
Site wide code injection is most commonly used by those using Google Auto Ads, and since you weren’t specific about your use case I shared examples of the different options available to you.
If you are placing ads all over your site, using site code injection is recommended, especially if you’re wanting to insert ads between post paragraphs. You’ll need to create some JavaScript that locates the areas you want ads to appear and then generate the HTML to insert it. The other benefit to this is that ads will only load if JavaScript is enabled, thus only making the ads load when the page is ready. Plus, you don’t need to update your theme to change your ads in future.
You can also place ads manually in the post.hbs if you prefer. Where you add this is your choice - it all depends on where you want the ads to show. If you want to place ads between paragraphs I’d still recommend the approach I mentioned above.
Please go and revisit our code on conduct for using this forum. We don’t tolerate rudeness of any description, especially not when people are only doing their best to help you!
6 Likes
First of all I wasn’t being rude, if you think I was then I’m sorry
I was just surprised that how can someone advice to inject into individuals post its more toward the guide because it’s not efficient or useful.
Let me clear my self more, How to locate ares in post.hbs I’m confused in that section. I want to Add under Tittle and paragraph of post.
It’s totally fine to have opinions or to ask for further information. Sentiments like “that’s stupid” and "I can’t believe this" are considered to be unproductive on a community forum! But I appreciate the response.
It doesn’t sound like placing ads on individual posts is the right approach for you. It may be for some users who are less technical, or only need to use ads on certain pages.
If you still want to place ads between paragraphs in your post.hbs, you’d need to use some JS to find the “nth” paragraph and add it in after. Unless someone else has another suggestion, I believe that would be the best way to do this.
As I mentioned in my last post, I think doing this with code injection has some serious benefits, but of course it’s entirely up to you 
2 Likes
To add to @Kym’s points @vibhi, the best way to place ads between your paragraphs is with JavaScript via code injection. The other way would be to use a HTML card, however that would require more manual maintenance by placing code in each place you want ads to appear.
1 Like
i tried to add ads by editing post.hbs and i made my question a little simpler.
Im adding ads under the tittle and middle of the post and end of the post.
i can find the tittle and end of post but dont know how im gonna inject in the middle.
i have edited a file, i dont have my laptop as there is country wide lockdown so i cant actully test if its working or not, so can you take a look at the file for me to guide me if im doing it right?
https://send.firefox.com/download/6af1161135b6cfdc/#GSXwY1cWMGlxGEbOS7GCXg
Im also adding code if you want to look at it here.
<div class="main-wrap">
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=feature_image}}
{{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=feature_image}}
</section>
{{/post}}
<main>
<article>
<div class="l-content in-post">
{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}
<div class="l-wrapper in-post {{#unless feature_image}}no-image{{/unless}} js-aos-wrapper" data-aos="fade-up" data-aos-delay="300">
{{#if @labs.subscribers}}
<div class="l-post-content has-subscribe-form js-progress-content">
{{else}}
<div class="l-post-content js-progress-content">
{{/if}}
<header class="m-heading">
<h1 class="m-heading__title in-post">{{title}}</h1>
<div class="m-heading__meta">
{{#if primary_tag}}
<a href="{{primary_tag.url}}" class="m-heading__meta__tag">{{primary_tag.name}}</a>
<span class="m-heading__meta__divider">•</span>
{{/if}}
<span class="m-heading__meta__time">{{date published_at}}</span>
</div>
</header>
**{{!-- Ads under tittle --}}**
{{#post}}
<div id="130649035">
<script type="text/javascript">
try {
window._mNHandle.queue.push(function (){
window._mNDetails.loadTag("130649035", "728x90", "130649035");
});
}
catch (error) {}
</script>
</div>
<div class="pos-relative js-post-content">
<div class="m-share">
<div class="m-share__content js-sticky">
<a href="https://www.facebook.com/sharer/sharer.php?u={{url absolute='true'}}" class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Facebook">
<span class="icon-facebook"></span>
</a>
<a href="https://twitter.com/intent/tweet?text={{encode title}}&url={{url absolute='true'}}" class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Twitter">
<span class="icon-twitter"></span>
</a>
<button class="m-icon-button filled in-share progress js-scrolltop" aria-label="Scroll to top">
<span class="icon-arrow-top"></span>
<svg>
<circle class="progress-ring__circle js-progress" fill="transparent" r="0" />
</svg>
</button>
</div>
</div>
{{content}}
</div>
</div>
</div>
{{!-- Ads at the end of the post --}}
{{#post}}
<div id="542207271">
<script type="text/javascript">
try {
window._mNHandle.queue.push(function (){
window._mNDetails.loadTag("542207271", "300x250", "542207271");
});
}
catch (error) {}
</script>
</div>
It’s really hard to debug an entire template file without context of the theme or JavaScript library you’re using to implement the ads. What I can tell you though is that after the heading would be after the following line:
<h1 class="m-heading__title in-post">{{title}}</h1>
…and after the main content would be after:
{{content}}
</div>
I’d highly recommend finding some way to test this locally.
1 Like
Thank you,
Although a feature to add ads in ghost would be pretty nice.
@kym, do we have any resources “to create some JavaScript that locates the areas you want ads to appear and then generates the HTML to insert it”?
I have no idea, how to do it…
1 Like