How to Create a Blog on Instapage

Zoran Zoran
8 minute read

In this guide, you’ll learn how to integrate DropInBlog with Instapage allowing you to quickly create a blog connected to your Instapage account. 

A blog can be a very cost-effective organic traffic driver, and it just so happens that we’ve got a pretty neat blogging solution that can help you reap these benefits... especially when you’re building a landing page on Instapage.

What Is Instapage and Can You Blog With It? 

Instapage is a landing page platform that offers a boatload of tools to help you achieve higher conversion rates. Multivariate and A/B testing, a data-driven personalized user experience, AMPs (accelerated mobile pages), and the Thor Render Engine (Instapage’s proprietary software) comprise just a fraction of Instapage’s wide array of features.

However, if there’s anything important missing from the Instapage assortment of tools, it’s a blogging feature. Yet, considering that Instapage is a platform exclusively focused on high-converting landing pages, the lack of blogging functionality really doesn’t come as too much of a surprise.

The value investment ratio of adding a blog to your marketing strategy is pretty high. Blogging requires a relatively low financial commitment, but the returns in terms of traffic, leads, and ultimately, conversions can be very rewarding. A blog is a no-brainer for any serious business, regardless of its size, as the bulk of today’s successful companies can attest.

With its SEO Analyzer, modern design, and many other features, DropInBlog is an excellent tool that can help you make the most of blogging. Let’s see how you can add it to Instapage.

Prerequisites

A DropInBlog account and a subscription to (at least) the Instapage Building plan are all it takes to start building your blog with Instapage. Any level of DropInBlog account will do.

Even if you don’t have a paid DropInBlog account yet, you can still enjoy its benefits: just register for the 14-day free trial and start learning the nitty-gritty of the platform. You won’t regret it.

Create a New Page

Creating a new page with Instapage is the initial step toward building your blog. 

Click the Landing Pages option in the left sidebar. After that, you’ll see a Create Page button on the right. Click this button and choose Standard Landing Page.

Create new landing page

Then, select Blank Page and give your page a name. “Blog” is generally what most people go with. When you check your dashboard, you’ll see your newly created page under the name you gave it.

You’ve just completed the first step. Let’s move forward to the next one.

Add the Embed Codes

You have your blog page created. Now, it’s time to add the embed code from your DropInBlog account.

Click on your page in the dashboard, choose Edit Design, and select the Html (<>) icon at the bottom of the left menu.

Add html Instapage

You’ll now see an HTML box has been added to your page. Drag the HTML box to the desired location on the page, and increase its width. Click Edit after you’ve done this. It’ll look something like this:

Edit html

Now you’re ready to copy the embed codes from DropInBlog. Open a new tab in your browser, log in to your DropInBlog account, and click Code & Layout. This will lead you to the page with your personal blog embed code. You need to copy the code from both Step1 and Step 2 and paste it into the HTML block you’ve just added to your blog page on Instapage.

This is DropInBlog the code from Step 1:

<script>
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
</script>
<script src="https://io.dropinblog.com/js/embed.js"></script>

Keep in mind that your personal DropInBlog ID will be a combination of uppercase letters and numerals. Here, we’re showing Xs just for illustrative purposes.

The code from Step 2 looks like this:

<div id="dib-posts"></div>

Once you paste the Step 1 and Step 2 blog embed code, you’ll see something like this:

Edit html block

Now click Done on the HTML box, and then click Save in the navigation bar at the top of the page. You can now exit the page builder.

Exit page builder

After you exit the page builder, you’ll see a preview of what your blog looks like: 

Publish experience Instapage

Next, you need to click Publish Experience, after which you’ll see four available options:

  1. Publish through a custom domain; 
  2. Publish through WordPress; 
  3. Publish through Drupal;
  4. Publish via pagedemo.co for testing purposes.

You’ll most likely choose the first option and use your own personal domain. Though for our purposes here, I’m going to use a pagedemo.co URL. After you finish up the publishing process you can head over to your published blog page to see it in its full glory.

DropInBlog page published

Paste the Blog URL into Your DropInBlog Account

This one is the final step. Go to your Instapage dashboard and find your blog page. Right-click on the URL link below the name of your page and select Copy link address.

Copy blog link DropInBlog

Now, head back to your DropInBlog account and click Settings in the navigation bar. Paste your Instapage blog URL into the Blog URL field. Make sure to Save All Changes before leaving the page. 

This last step fully connects your Instapage blog page to your DropInBlog account. You can now create and manage blog posts from within the DropInBlog dashboard.

Paste blog url DropInBlog

Et voilà! You’re all set to embark on your blogging journey.

Recent Posts Widget

Your Instapage blog is all set, but in case you want to dive deeper into DropInBlog and make use of the other powerful features it offers, you can head over to the Code & Layout page and add some more functionalities. The ones that we’ll show you here are optional but highly recommended.

To display a preview of your recent blog posts on any of your landing pages, you can simply add the DropInBlog recent posts widget. 

To do that, go to the Code & Layout page in DropInBlog. Under Advanced, you’ll find the Widget Code section. Similar to the code we copied and pasted before, under Recent Posts Code, you’ll see these few lines:

<script>
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
var dib_recent_posts = 3;
</script>
<script src="https://io.dropinblog.com/js/embed.js"></script>

You can change the number of recent posts according to your own liking. It can be any number that makes sense for you.

In addition to the above, there’s one more piece of code that you’ll need in order to display the recent posts widget on your landing page:

<div id="dib-recent-posts"></div>

Copy these two snippets of code and go to your Instapage landing page. The procedure is the same as the one we used before; click on your landing page, click Edit Design, scroll down and choose an Html block (<>). 

Drag the box and place it wherever you want your recent blog posts to show. Adjust the size of the box to your liking, and paste the two snippets of code from above.

Recent post widget code

After you’ve pasted the code, click Done, Update, Confirm, and Exit Builder. Open your page to see the changes. There might be some additional adjustments you need to make if your recent blog posts overlap with other elements on your page, but this is all it takes to add the recent posts widget.

If you’re adding the widget while creating a landing page for the first time, the procedure will be the same as what we did earlier when we built our blog page. So, after clicking Done, you’ll need to click Save, Exit Builder, Publish Experience, and, lastly, choose to either publish through your custom domain or publish for testing purposes.

Tips for Using DropInBlog With Instapage

While playing around with your new blog, you’ll definitely want to explore the DropInBlog SEO Analyzer, which draws on SEO best practices to evaluate your blog posts before publishing. It gives you tips on how to improve your SEO score and achieve higher search engine rankings.

DropInBlog also allows you to automate posting by scheduling your posts for any time in the future. Furthermore, your blog inherits the already existing styles of your landing page template, so it will match your design aesthetic right out of the box. 

However, if you want, you can customize the design of your blog. One way to do that is, again, by adding a new HTML block and adding your own CSS code between <style></style> tags.

In short, you can do a ton with DropInBlog. If you need any help with anything, please do not hesitate to contact us; we’ll be more than glad to help.

Get started embedding a blog into your website right now

Try It For Free