Sunday, February 18, 2007

Blogger beta - Most Popular Posts widget

Please note: This post is now somewhat out of date, as AffiliateBrand have introduced version 2.0 and have switched everyone over. This post describes how to set up version 1.0. If you want to know how to install version 2.0 in Blogger, please visit my new post - How to restyle your Most Popular Posts widget - Part 1 - setting up your widget. Parts 2 and 3 of the series (how to restyle the widget if you want to) are linked from Part 1.

Alternatively, if you want to use this post (which it seems many of you still do), start at instruction 6 further down this page, and ignore instructions 1-5, as they are no longer valid.

The completed widget. I was randomly surfing around, looking for interesting blog widgets, and I found this one from AffiliateBrand.com - the blog window widget which displays my most popular posts. You can see it in my sidebar. Currently it's at the top of the sidebar, but I think I'll wait until it's fully populated and then I'll decide whether or not to move it further down the page.

Okay, I moved it down a bit. I figure for maximum effectiveness it needs to be near the top of my page, with at least part of it above the fold, but I think it looks a bit egotistical being right at the very top, so I've moved it under my "Friends who blog" list.

Gene Kavner, who created the widget, reckons it's increased the length of time people spend on his blog by 25% - because it catches your eye and might tempt you into visiting another post or two. I'll let you know if it has the same effect here.

I must say that's quite appealing, because the majority of you arrive at my blog via a Google referral, and many of you view just one post and then leave again. *sniff*! I'd like to share a few more of my musings with you! Won't you stay awhile?

I'm also interested in this widget because while Site Meter gives me some awesome statistics on my visitors (which I review daily), it doesn't really give me an easily accessible day-by-day summary of which posts are the most popular - which is what this widget was designed to do.

OK. You can see that it works in Blogger, so here's how to make it do its thing...

Start off by going here - Enhance Your Blog With AffiliateBrand Blog Window Widget - this link will open in a new window so you can keep reading my blog while visiting AffiliateBrand.

Follow the instructions (which are very straightforward) on that page. Firstly you'll have to create an account and register your blog URL with AffiliateBrand, because the widgety goodness comes from their site via a piece of JavaScript you put in your template.

Once you've created an account and verified you're not a spambot, and have registered your URL, you'll be taken to a page where you are given the two bits of JavaScript you need and can then configure your widget to your own specifications:


  1. Copy the first piece of JavaScript from your AffiliateBrand configuration page.

  2. In your Blogger Toolbar, click on Customize and then select Edit HTML from your Template menu.

  3. Before you do anything else, you should back up your template, so you can restore it if anything goes wrong. There's a link to Download Full Template under the heading Backup / Restore Template at the top of the page.

  4. Scroll down in the Edit Template window until you come to the closing tag of the head part of the template. You'll find it almost at the end of your template if you're using Blogger Beta, because all the styles and variables are also stored in the head. You're looking for something in your code that looks like this:
    </head>

    <body>
    Add that first bit of JavaScript into your template, DIRECTLY BEFORE the </head> tag.

  5. Save your template.

  6. Now copy the second bit of JavaScript from your AffiliateBrand configuration page and click on Page Elements in your Blogger Template menu. This will take you to the page where you can add and arrange Page Elements.

  7. In the sidebar area you'll see a link that says Add a Page Element. Click on this and you'll see the Choose a New Page Element popup window.

  8. Select the Page Element called HTML/JavaScript.

  9. Click the Add to Blog button.

  10. Type a title for your Page Element into the Title box. Mine is entitled Most Popular.

  11. Paste your second piece of JavaScript into the Content box.

  12. Click Save Changes.

  13. In your Add and Arrange Page Elements page you will now see your new Page Element listed at the top of the sidebar. You can reposition it now or later if you want to.

  14. View your blog. You will see the new widget at the top of your sidebar. If there's no content yet, and all you can see is the box and the blue header don't panic! The moment someone visits your blog (now that you've added this widget) you'll see it start to populate itself with the titles of your most popular pages. Keep on refreshing your blog page every so often to see the pages start to appear in the list.

The original unstyled widget. Let's assume everything went as planned and your widget is in place and starting to populate itself. What else can you do to it?

The easiest changes can be made via your window configuration page at AffiliateBrand. You'll see there are two coloured boxes on this page - one orange, the other yellow. In the orange box are the current settings for your widget. You can make changes by putting new values into the yellow box and saving them. You can change:
  • The width of the widget
  • The height of the widget
  • Over how many days you'd like your page popularity to be measured
  • The number of lines (ie how many posts you want listed at any one time)
  • The text for the widget title
  • The stylesheet URL (we'll get to that later)

There's also a nifty set of boxes entitled char's to cut off from LEFT and char's to cut off from RIGHT. Blogger adds the name of your blog at the beginning of every page title, which is a lot of repetition and takes up valuable space, so you can cut this off in the page titles within the widget. Just count the number of characters in your blog title. Include each space as 1 character. WebWeaver's World: is 19 characters including a space at the end after the :

Put your number into the yellow box entitled char's to cut off from LEFT - new and click save changes. The page titles in your widget should now display without your blog title at the begining of each one.

Now that your blog widget's up and running, you may decide to change the colours and styling on it, so that it more closely matches your blog. You do this by creating your own stylesheet for the widget and replacing the existing default stylesheet with your own. You'll have to have somewhere to host your stylesheet - so if you don't have access to a server you won't be able to do this bit. My stylesheet is stored on my website at WebWeaver Productions.

Go to Make Your Blog Window Look Like Your Site With a Stylesheet and follow the instructions. You'll see a link to the default stylesheet which you will need to download and modify, and then host on your own server. The instructions on what style in the CSS refers to which part of the widget are very clear, so I won't repeat them here.

I found the easiest way was to save a copy of the default stylesheet on my server, then go back to my configurations page at AffiliateBrand and add the stylesheet URL in the yellow box.

The completed widget again. Once the stylesheet was in place I changed one thing at a time (eg the colour of the title), re-uploaded it and checked the effect of the changes in my blog. It took me a while to get it how I wanted it, but I think it looks much better now that it's the right colours, and matching font.

The widget is built inside a series of nested tables, and there are some things that you can't change (like cellspacing, for example). I did figure out how to make some changes to the table borders, but I eventually trashed these because I decided the original was better. In some ways I'd rather it wasn't in a table at all, or at least that I could make it disappear completely using the stylesheet, but overall I'm happy with the way it's looking.

The only other weird thing is that the addition of the JavaScript seems to have caused my Blogger toolbar to move down about 15px from the top of the page, and there's now a gap above it. Not very pretty! I'll see if I can figure out how to fix that...

I think it's a great little widget. I hope these instructions have been of use to you if you want to add it to your Blogger template.

Update 30/04/07: This widget has gone down a couple of times due to a server error at AffiliateBrand, but I think it's such a useful widget, that I'm willing to live with that. It doesn't happen very often, and when it does I just comment out the JavaScript until it's back online again.

Technorati tags: , , , , , , , .

17 comments:

Anonymous said...

Hi,
Very Interesting widget. But one problem! Individual posts on my blog do not display post titles after blog title like your blog does. What should I change in Blogger Settings to enable this? Only my Blog title is displayed!

webweaver said...

Hi Anonymous!

Can you tell me what template you're using and whether you're on Blogger beta or the old Blogger? A link to your blog would be best so I can have a look at it.

:)

webweaver said...

Hi again Anonymous,

Can you just check for me - under Settings/Formatting there's a yes/no selector for Show Title field - do you have that set to Yes? If not, set it to yes and see if you get the page title showing up.

I'm not 100% sure if this is what it controls, but try it and see...

Gene Kavner said...

Webweaver -- thanks for commenting on my Blog Window widget! Yes, I had a small issue with the site that I could not fix during my trip out of the country (Murphy's law at its finest!).

However, it's all fixed now, so give it a shot!

Thanks again,

Gene Kavner

Jeremy said...

Rock on! Works like a charm. Thanks...great instructions!

webweaver said...

Awesome! Thanks heaps for letting me know, Jeremy!

rjramones said...

hiya webweaver... great post, just what i was looking for.

after installing it for about...ohh...two days? I have to take it out. Affiliate brand is returning a server error. I see you've mentioned that on an update of yours.

Seems like their service is not that reliable. Or maybe its just me?

Do you have any suggestions?

webweaver said...

Hi rjramones!

Interesting... when did you install it? Have you had server errors recently? I check my blog all the time, and I haven't seen a server error being returned for weeks - not since I mentioned it in this post back in February.

While there was a server error I just took the code out of the template, and left everything else in place, then put the code back into the template when it was back online again.

Maybe you could try doing that (assuming you're still getting a server error). The next step I think would be to get in touch with Affiliate Brand via their website and ask for help.

But.. I just checked your blog and your widget looks fine! Very nice in fact! Can you see it properly on your PC? 'Cos it looks great from here!

rjramones said...

heya webweaver,

just checked back to see what you have to say. thanks for spending time to reply.

yea it's back up now. didn't do anything, it was magically back up :-)

i'm still looking for a replacement, though. but affiliatebrand will do for now.

cya around.

Zia Rezvi said...

Excellent, just what I was looking for!

Zia

www.ziarezvi.com

Zia Rezvi said...

You mention

# Copy the first piece of JavaScript from your AffiliateBrand configuration page.

# In your Blogger Toolbar, click on Customize and then select Edit HTML from your Template menu.

...I only get one piece of script on the AffiliateBrand configuration page ! Not 2??

webweaver said...

@Zia - glad to be of help! Enjoy!

webweaver said...

@Zia - let me take a look at it tonight and I'll do an update of this post.

I know they've changed the styling of the widget recently, so I'm guessing they've also changed the way the JavaScript is supplied. I'll get back to you!

webweaver said...

@Zia - I've written a new series of posts on how to install and then restyle version 2.0 of the widget. This new version only uses one piece of JavaScript, as you pointed out, which now makes this post somewhat redundant.

You can find instructions on setting up the 2.0 version of the widget at How to restyle your Most Popular Posts widget - Part 1. Parts 2 and 3 (restyling your widget if you want to) are linked from Part 1.

pearlie said...

Your posts are a great find - but I am having some problems since I don't know CSS and do not have the stuff you were talking about.
Would like to find out from you if you have still have the codes for your older widget, "The completed widget again." and if there is any way I can somehow put that into my blog.

Thanks!

webweaver said...

@pearlie:

I'm a bit confused about what exactly you want - can you please clarify?

Ta!

Me.Myself said...

I have done a popular posts widget with postrank feed.

welcome to try and comment !

http://itblood.blogspot.com/2008/11/popular-posts-widget-with-postrank-feed.html