Cookbook
Mr. Pickles the AdPlugg Pug

Adding AdPlugg Ads to Your Squarespace Blog Sidebar

This recipe teaches you how to add AdPlugg ads to your Squarespace Blog Sidebar.

Setup

Start by following this recipe to set up AdPlugg and install the AdPlugg JavaScript SDK into your Squarespace site's header.

Enable the Squarespace Blog Sidebar

Not all themes support adding a blog sidebar but most of the ones that do, have it disabled by default.  If you are using the Bedford template family, Montauk template family, or similar, you can enable the blog sidebar by using the following steps:

  1. In the Squarespace admin, go to Pages and then click on your blog. If you don't yet have a blog, click the + and then choose blog.
  2. With the Blog page selected, click the "<- Home" button to return to the main menu.
  3. From the Home menu, and with the blog showing in the preview pane, click "Design" and then "Style Editor".
  4. Depending on what template you are using, enable the sidebar using one of the following:
    1. If you are using a template in the Bedford family, scroll down to the "Sidebar" section and uncheck the "Hide Blog Sidebar" option.
    2. If you are using a template in the Montauk family, scroll down to the "Blog Styles" section and for the "Blog Layout" selector, choose either the "Right Sidebar" or "Left Sidebar" layout.

Add the AdPlugg Ad Tag to the Squarespace Blog Sidebar

Once you have your blog sidebar enabled (see above), follow the below instructions to add an Ad Tag to the sidebar.

  1. From the Squarespace admin, go to Pages and then click on your blog page.
  2. Hover over the content pane on the right and scroll to the bottom (if the page has enough content to require scrolling). Note that the right sidebar is responsive and drops to the bottom on small screens (and when viewed within the preview pane). While hovering at the bottom of the page, you should see a popup that says "Right Sidebar Content" with an "Edit" button. Click the Edit button.
  3. Click the + button or an Insert Point to open the block menu.
  4. In the block menu, scroll down to the "More" section and choose "Code" to add a Code block to the sidebar.
  5. Back in the AdPlugg Admin, go to Download > Snippet.  
  6. Click the Get the Snippet! button at the bottom, copy the Ad Tag and paste it into the Code block (overwriting the default "hello world" value). Tip: leave the type set to HTML and the "Display Source" checkbox turned off.
  7. Save the block.

Your ads should now start displaying in your blog's sidebar.

More Ideas

Add a Header above Your Ads

Optionally, you can add a "Sponsors" (or similar) header above the ads using a Text block. Edit your sidebar (see above) and just above the Code block with your Ad Tag, insert a text block and put in something like "Sponsors" for the text.

Control Your Sidebar Ads Using a Zone

Set up a "Right Sidebar" Zone in AdPlugg and update the code block to use the Ad Tag for the Zone. Now you can target specific ads to your sidebar by targeting the ads to the Zone.

Rotate Your Sidebar Ads

Use any of the recipes in the Ad Rotator section of the AdPlugg Cookbook to configure your ads to rotate (which one shows on top and/or in and out of a limited number of spots in the sidebar).