MyBlogLog widget for WordPress.com blogs — One of the best web widgets available

I was one of the people who was a little disappointed that WordPress.com supports Snap Preview Anywhere but not MyBlogLog. If you look at adoption of the Snap Preview Anywhere widget it was disabled by most major blogs after just a short trial because users hate it (problogger, johnchow, lorelle, digital inspiration, a VC, instigator, ).

NOTE: Readers can disable Snap Preview Anywhere on *ALL* blogs they read by clicking this link. You will have to do it on all your web browsers because it is a cookie setting.

The response to MyBlogLog however was very different. People love it because it’s a way for readers to promote their blogs, and for bloggers to find out who their readers are. After MyBlogLog was acquired by Yahoo I was hoping they’d get an official sidebar plug-in. I was surprised to find out that I was the first WordPress.com user to ask for it.

I haven’t found an official announcement for it, but MyBlogLog has come up with a non-javascript widget (probably the same method they use for MySpace) to add support for WordPress.com users. Here is the HTML code to put into a sidebar widget. It works by using images instead of javascript.

How to Add a MyBlogLog Widget to A WordPress.com Blog

1. Login or create an account at MyBlogLog.com
   • Create a site or edit settings on a blog you author
   • Make sure the site URL ends in wordpress.com
2. Save the settings on MyBlogLog.com
3. Get the widget code for the site (press the Get Widget button)
4. Go to your wordpress.com dashboard and create a new text sidebar widget
   • Dashboard >> Presentation >> Sidebar Widgets
   • See this page for more information if you’ve never used sidebar widgets before
5. Save your sidebar changes
   • If you have a custom domain name then log back into MyBlogLog.com and edit the site URL to use the custom domain name

Sample Code

Example of Sidebar Text Widget code for engtech.wordpress.com:

<div class="mblrr_v"><br />
<h2><span>Recent Readers</span></h2><br />
<p><a href="http://www.mybloglog.com/pt.php?s=UNIQUEID&p=0">
<img src="http://ipub.mybloglog.com/i/vUNIQUEID_req.jpg" alt="View My Profile" title=""View My Profile"></a>
<a href="http://www.mybloglog.com/pt.php?s=UNIQUEID&p=1">
<img src="http://ipub.mybloglog.com/i/vUNIQUEID_1.jpg" alt="View My Profile" title="View My Profile"></a>
<a href="http://www.mybloglog.com/pt.php?s=UNIQUEID&p=2">
<img src="http://ipub.mybloglog.com/i/vUNIQUEID_2.jpg" alt="View My Profile" title="View My Profile"></a>
<a href="http://www.mybloglog.com/pt.php?s=UNIQUEID&p=3">
<img src="http://ipub.mybloglog.com/i/vUNIQUEID_3.jpg" alt="View My Profile" title="View My Profile">
</a><a href="http://www.mybloglog.com/pt.php?s=UNIQUEID&p=4"><
img src="http://ipub.mybloglog.com/i/vUNIQUEID_4.jpg" alt="View My Profile" title="View My Profile"></a><br />
<div>
<a href="http://www.mybloglog.com/buzz/community/YOUR_COMMUNITY_NAME/">
<span>View Entire Community</span></a>
<a href="http://www.mybloglog.com/"><span>Provided by MyBlogLog</span></a></div><br />
</div><br /><p>

In order for that code to work you will have to change UNIQUEID to your MyBlogLog ID and YOUR_COMMUNITY_NAME to your MyBlogLog user name. Do not cut-and-paste this code into your text widget, go to MyBlogLog.com and get the specific code for your site from them.

They also give you optional CSS code (you will need the CSS upgrade to use — CSS is not required for the upgrade to work).

Example of CSS:

<style type="text/css">
body .mblrr_v{
width:160px;
overflow:hidden;
background-color:white;
font-family:tahoma,sans-serif;
border:1px solid teal;
}

body .mblrr_v img {
border:0;
}

body .mblrr_v h2 {
font-size:16px;
margin:0;
color:white;
background-color:teal;
}

body .mblrr_v h2 span {
padding-left:5px;
color:white;
}

body .mblrr_v a {
font-size:10px;
text-align:center;
display:block;
color:black;
}

body .mblrr_v a:visited {
font-size:10px;
text-align:center;
display:block;
color:black;
}

body .mblrr_v a img {
border-top:1px solid teal;
}

body .mblrr_v div {
border-top:1px solid teal;
}

</style>

Here’s the gotcha though: they only give you the code if your blog domain name ends in WordPress.com.

Getting the Code When Your Domain Name Doesn’t End in WordPress.com

So if you are running a WordPress.com blog with a custom domain name you’ll have to change your MyBlogLog setting to your WordPress.com domain name temporarily in order to get the widget code. Leave a comment if you are having trouble.