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.
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:</head>
Add that first bit of JavaScript into your template, DIRECTLY BEFORE the </head> tag.
<body>
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:
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. 
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: Blogger beta, hacks, widget, most popular posts, AffiliateBrand, Blog Window Widget, Gene Kavner, web development.
Sunday, February 18, 2007
Blogger beta - Most Popular Posts widget
Subscribe to:
Post Comments (Atom)
16 comments:
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!
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.
:)
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...
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
Rock on! Works like a charm. Thanks...great instructions!
Awesome! Thanks heaps for letting me know, Jeremy!
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?
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!
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.
Excellent, just what I was looking for!
Zia
www.ziarezvi.com
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??
@Zia - glad to be of help! Enjoy!
@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!
@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.
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!
@pearlie:
I'm a bit confused about what exactly you want - can you please clarify?
Ta!
Post a Comment