How to Add MyBlogLog comment avatars in your Blogger Layouts Blog

How to install MyBlogLog comment avatars in your Blogger Layouts blog

1. First, make a full backup of your blog template by going to Template>Edit HTML in your Blogger dashboard, then clicking on the "Download full template" link near the top of the page. It is always good practice to do this before making any adjustments to your blog's template in case you make a mistake and need to revert back to a working template afterwards!
2. Next, go back to the Edit HTML section of your dashboard, and check the "expand widget templates" box. Then, just before the closing </head> tag in your template, insert the following lines of code:

   <script src='http://blog.merlinox.com/MrX/Blog/test/myBlogAvatar2.js' type='text/javascript'/>

   This will link to the javascript used to power the comment avatars which is hosted by Merlinox.
3. Next, you will need to find the following line of code:

   <b:loop values='data:post.comments' var='comment'>

   This will be in the comments section of your template, and is easily found using the search function of your browser (CTRL+F). If you cannot find this line, this is probably because you have forgotten to expand the widget templates!
4. Right after this phrase, add the following section of code:

   <div style='border:0;float:left;margin: 0 5px 0 0;'>
   <script>
   myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
   </script>
   </div>
   

5. Now, save your template and take a look at one of your blog posts which has a few comments. You will see that any commenter who has a MyBlogLog account and avatar will now have their image featured beside their name. Those who do not have a MyBlogLog account will feature the default question mark avatar instead.

 

As you have read, this is quite an easy hack to implement in your blog. This will enable MyBlogLog comment avatars for your comments, even if you are not a member of MyBlogLog yourself!

What you should know about using MyBlogLog comment avatars

There are a few things you should be aware of if you decide to use MyBlogLog avatars in your blog template:

• MyBlogLog avatars are linked to the URL of your blog, rather than your Blogger profile. So in order for your avatar to display, you'll need to comment as "Other" rather than using your Blogger display name (your Blogger account).
  
  For blog authors, this also means you would need to change your settings for comments, and enable "anyone" to comment, rather than only registered users.
• In the same sense, those who log in as "other" and provide their URL when commenting will not see their Blogger profile on Bloggers comments pages (the pages which appear when you post a comment). One solution to provide consistency for the comments is to disable "profile images on comments" in Settings>Comments of your Blogger dashboard.
• The "default" image used for those who don't have a MyBlogLog avatar is much smaller than the 48x48px image used for those who do have an avatar. (As yet, I haven't been able to find a solution to use a different default avatar, though if I do discover a solution I will be sure to update this post!)
• If you have recently become a member of MyBlogLog, your avatar will not display straight away. It may take up to three days for your avatar to display on blogs which have enabled this feature, so don't worry that it's not working, just wait a few days and your avatar will soon appear!

 

The instructions I provided above will link to the required script which is hosted on Merlinox's server (as he encourages readers to do this in his tutorial). If you would prefer to host the Javascript yourself, you should download this from Merlinox's post, upload to your own hosting account, and change the link to the script in the head of your template to refer to the location of your hosted script like this:

<script src='http://your-hosting-provider.com/your-folder/myBlogAvatar2.js' type='text/javascript'/>

Of course, you should substitute the URL in this example for the exact URL where your script is hosted.

 

I hope this tutorial has helped you to easily install Merlinox's Blogger plugin for MyBlogLog comment avatars in your own blog templates. If you enjoyed this post and would like to hear of future updates, please consider subscribing to the Blogger Buster feed.

As always, your comments and opinions are much appreciated. And if you have an account with MyBlogLog, don't forget to choose "other" when you leave your comments and use your URL so that your avatar will appear beside your message!