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

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.

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.

<style> /* ColorBox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative;} #cboxLoadedContent{overflow:auto;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} .cboxPhoto{float:left; margin:auto; border:0; display:block;} .cboxIframe{width:100%; height:100%; display:block; border:0;} /* User Style: Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay{background:#000;opacity:0.5 !important;} #colorbox{ box-shadow:0 0 15px rgba(0,0,0,0.4); -moz-box-shadow:0 0 15px rgba(0,0,0,0.4); -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); } #cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;} #cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;} #cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;} #cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;} #cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;} #cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;} #cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;} #cboxContent{background:#fff; overflow:visible;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;} #cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center center;} #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:left; width:100%; font-weight:bold; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;} /*-----------------------------------------------------------------------------------*/ /* Facebook Likebox popup /*-----------------------------------------------------------------------------------*/ #subscribe { font: 12px/1.2 Arial,Helvetica,san-serif; color:#666; } #subscribe a, #subscribe a:hover, #subscribe a:visited { text-decoration:none; } .box-title { color: #404040; font-size: 14px !important; font-weight: bold; text-align: left; margin: 0px 0; border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; margin: 5px; line-height:18px; font-family:arial !important; } .box-tagline { color: #999; margin: 10; text-align: left; } #subs-container { padding: 35px 0 30px 0; position: relative; } a:link, a:visited { border:none; } .demo { display:none; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> <script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*30; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#subscribe"}); } }); </script> <!-- This contains the hidden content for inline calls --> <div style='display:none'> <div id='subscribe' style='padding:10px; background:#fff;'> <h3 class="box-title">Get our updates on Facebook! Just click the Like button below<center><p style="line-height:3px;" >▼</p></center></h3> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftypepad&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe> </center> </div> </div>

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

[David Ewart]

Trying this with no luck.

In the last p:

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

Is it the "typepad" within "%2Ftypepad&width" that is replaced?

And is replaced - not with the full FB url - but only with the part that follows Facebook's own url?

So that - using your sony example - it looks like:
www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsony&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258

And can the link be to a FB page rather than a FB profile?

And is possible to customize the width and height dimensions?

[Michael Taylor]

Doesn't work ...

[Michelle Raponi]

Thi isn't working for me either. Where do we go to "embed oyour own HTML"? Also, I can't find the word typepad in this code anywhere.

[A Twitter User]

Where in that code we need to paste our FB URL? Look at your post and read it, you ended it with "false".....but that is incomplete....how ? It does not work because instructions are disorganized and confusing.

[The Typepad Team]

Hi David! We've made a correction to the code above - there was a bit of a malfunction, but it's working properly now. We're sorry about that! Just select and copy and add the code to an Embed Your Own HTML module at Design > Content, then update the Facebook URL so that the bit at the very end has your page URL - leave the %2F part and the &width part. You just want to replace the word there with what you have on your own URL at the end. Once you're done making changes, just click OK and position the module at the top of the sidebar. Save your changes, and you're all set.

PS: This is ideal for a business or fan page rather than a personal profile.

[The Typepad Team]

Hi Michael! We've made a correction to the code above - there was a bit of a malfunction, but it's working properly now. We're sorry about that!

Just select and copy and add the code to an Embed Your Own HTML module at Design > Content, then update the Facebook URL so that the bit at the very end has your page URL.

Once you're done making changes, just click OK and position the module at the top of the sidebar. Save your changes, and you're all set.

[The Typepad Team]

Hi Michelle! We've made a correction to the code and instructions above - there was a bit of a malfunction, but it's working properly now. We're sorry about that!

To find where to replace your URL, after you've copied all the code I'd do a "find in page" and search for yourfacebookpage - which is what we've replaced in the code to make it easier for you - just replace that part specifically with what comes at the end of the URL for your own page. Sound good?

Select and copy and add the code to an Embed Your Own HTML module at Design > Content, then update the Facebook URL so that the bit at the very end has your page URL. Once you're done making changes, just click OK and position the module at the top of the sidebar. Save your changes, and you're all set.

[The Typepad Team]

Hi Bree,

Sorry it's a bit confusing! We've made a correction to the code and instructions above - there was a bit of a malfunction, but it's working properly now.

We're sorry about that! Just select and copy and add the code to an Embed Your Own HTML module at Design > Content, then update the Facebook URL so that the bit at the very end has your page URL. If you can't find the spot to change, I'd suggest doing a "find in page" and looking for yourfacebookpage. That's the only bit you need to replace with that part of your own URL.

Once you're done making changes, just click OK and position the module at the top of the sidebar. Save your changes, and you're all set.

[Account Deleted]

I would love for this to work! I'm done trying for the night but will try again tomorrow - I think I am following the instructions correctly - though the SONY example is still a bit confusing to me. Is this only designed for a two column layout? Is there a way to tweak that?

[Michael Taylor]

Are you sure? All that happened was my Networked Blogs icon has changed place. It's been there for more than a year.

[Michael Taylor]

Not only that - I have 749 likes on Facebook and only 33 followers on Networked Blogs, which is EMBARASSING!!!!! NOT something I like having prominently displayed at the top of my sidebar.

[Kymberlie]

Hi Nathalie,

Could you open a help ticket with your Typepad account? We can then look at the code directly for any issues and work with you directly to get it fixed.

Thanks!

Kymberlie

[Kymberlie]

Hi Michael,

If you could open a help ticket within your account, we'd be happy to help troubleshoot what's happening.

Thanks!

Kymberlie

[CW Artsy Creative Soul]

AWESOME!!!! It works and I love it... Thanks you guys!

[Michael Taylor]

I don't know what you have done to my blog, but my sidebar has been totally screwed up as a result. My five polls and some of my widgets have all disappeared. Please restore things to the way they were.

[Jen]

Michael, the sidebar module on your blog contained an unclosed iframe tag which caused all content below it to be hidden. We corrected that for you & updated your open ticket. If you see any further problems, please update your ticket & we'll help you to get everything sorted. Thanks!

[Xhamster]

It works, Thanks you!

[Amy Rachel Kaplan]

Didn't work.

[Greg West]

Works great! Thanks so much y'all!

[Jen]

Hi Amy. Can you open a help ticket in your Typepad account? Let us know on which blog you've added the code and include the Facebook Page URL that you want the pop-up box to link. Then, we can take a closer look at the code & help you to get the pop-up embedded on your preferred blog. Thanks!

[CreoleInDC]

I haven't been able to get this to work for me. Do I need to open a help ticket as well?