Ghost Integration

Add ads to your Ghost publication

1 Code Injection (Easiest)

Add ads site-wide using Ghost's built-in code injection.

Go to Settings → Code Injection in your Ghost Admin

Paste in the Site Footer section

Click Save

<!-- Beaver.ad - Inject after content -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const postContent = document.querySelector('.gh-content, .post-content, article');
    if (postContent) {
        const adDiv = document.createElement('div');
        adDiv.style.cssText = 'text-align:center;margin:40px 0;';
        adDiv.innerHTML = '<p style="font-size:11px;color:#999;margin-bottom:8px;">Sponsored</p><iframe src=\"https://example.com/ad-slot-id\" style=\"width:100%;height:auto;min-height:90px;border:none;overflow:hidden;\" frameborder=\"0\" scrolling=\"no\"></iframe>';
        postContent.appendChild(adDiv);
    }
});
</script>

2 HTML Card in Editor

Add ads to individual posts using the HTML card.

Open a post in the Ghost Editor

Click + to add a card and select HTML

Paste the embed code

<!-- Beaver.ad -->
<div style="text-align:center;margin:30px 0;">
  <iframe src="https://example.com/ad-slot-id" style="width:100%;height:auto;min-height:90px;border:none;overflow:hidden;" frameborder="0" scrolling="no"></iframe>
</div>

3 Theme Template (Advanced)

Edit your Ghost theme to add ads in specific locations.

Download your current theme from Settings → Design → Change theme

Edit the post.hbs file

Add the embed code where you want the ad

Zip and upload the modified theme

{{!-- post.hbs - Add after the post content --}}
<article class="post">
    {{content}}
    
    {{!-- Beaver.ad Slot --}}
    <aside class="beaver-ad" style="margin:40px 0;text-align:center;">
        <p class="ad-label" style="font-size:11px;color:#999;margin-bottom:8px;">Sponsored</p>
        <iframe src="https://example.com/ad-slot-id" style="width:100%;height:auto;min-height:90px;border:none;overflow:hidden;" frameborder="0" scrolling="no"></iframe>
    </aside>
</article>

4 Reusable Partial

Create a reusable partial for your ad that can be included anywhere.

Create partials/beaver-ad.hbs in your theme

Add the ad code to this partial

Include with {{> beaver-ad}} anywhere in your templates

{{!-- partials/beaver-ad.hbs --}}
<div class="beaver-ad-container" style="margin:40px auto;text-align:center;max-width:728px;">
    <span class="ad-disclosure" style="display:block;font-size:10px;color:#999;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px;">Sponsored</span>
    <iframe src="https://example.com/ad-slot-id" style="width:100%;height:auto;min-height:90px;border:none;overflow:hidden;" frameborder="0" scrolling="no"></iframe>
</div>

Then use it in any template:

{{> beaver-ad}}

Back