Typepad 101: Make Facebook Really Pop(Up) On Your Blog

January 20, 2014

Just about everyone now uses Facebook.  They use it to keep up with friends, relatives, and - importantly for you - the blogs they read and the products they love.

If you have a Facebook Page, you can add a pop-up box to your blog so that your readers can Like your Facebook Page, allowing them to get updates on Facebook about anthing you post to your Page.  This can include blog posts, promotions, and more.

Facebook_overlay
Your New Pop-Up!

This is what we're going to teach you to add to your blog using the steps below.

First, you need to go to Design > Content and create a new "Embed your own HTML" widget. 

Then, you can click (left click to view, right click and save as to save to your hard drive) this link to view and copy the necessary code, or copy it from the box below - just make sure to copy all of it or your overlay will not work.

Remember, make sure to copy the entire thing! Click in the box and key Cmd+A on a Mac or Ctrl+A on a Windows computer.

Next, paste the code into the pop up area of the Embed your own HTML module as we mentioned just above.

Towards the bottom of the code, you'll want to look for this block of code:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftypepad&amp;width=300&amp;
colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;
stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

and replace typepad with the trailing name (the bit from the very end) from the URL of your own Facebook Page.

As an example, if your Facebook Page was Sony's - https://www.facebook.com/Sony - you would replace typepad with sony in the code.

You can also look for the code to change the pop-up's wording to something more you. To do that, look for this line:

Get our updates on Facebook! Just click the Like button below

and simply change the text there to whatever you'd like.

Once you're happy with the message and you've got your own Facebook URL in place, click OK and drag the module into place on your Sidebar - the best place for it is at the very top. Scroll down to save your changes, and click View Blog to see your very own Facebook Like Box overlay!

Now when a reader visits your blog, they'll see a pop-up with the option to like your Facebook Page. So as to not annoy your readers, this will only appear on their first visit to your blog.

Important! If you're already using jQuery script elsewhere on your sidebar, remove this line from the code (shown in red in the file linked above):

< script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' >

After your readers sign up to get these updates, they're more likely to share them on Facebook for even more people to see, garnering more readers for your blog.

Remember before when we mentioned sharing your Typepad posts to your Facebook Page?  If you're not already doing this, you can learn how to automatically cross post from Typepad to Facebook here.

We hope you found this a useful tool to increase readership of your blog!

comments powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.