How to add MyBlogLog comment avatars (author images) to your comments section

A great way to add a sense of community to your blog is by using comment avatars: an image (or icon) which is unique to the person who is making the comment. When using comment avatars in your blog, you will easily be able to recognize comment authors, especially those who regularly visit your blog. Also I feel this adds a greater sense of interaction between blog authors and their readers.

By default, Blogger only shows comment avatars on comment pages (either pop-up or full screen, depending on your comment settings). However, no comment avatars appear in the most visually important place: in your item pages where comments are displayed beneath your posts. Additionally, only the comment avatars of registered Blogger users may appear on these pages, so if your readers blog on a different blogging platform, their avatar cannot appear at all.

But there is a solution: add MyBlogLog comment avatars to your blog!

When you register your membership with MyBlogLog (a community website for bloggers) you will be able to upload a photo or avatar which will then be used to identify yourself in MyBlogLog's many services.

Thanks to Blog Bloke's post about MyBlogLog comment avatars, I am now using Merlinox's MyBlogLog Blogger Plugin to feature MyBlogLog comment avatars in this blog. This is based on MyAvatars, a Wordpress plugin designed by Napolux. This technique displays the comment authors MyBlogLog avatar beside their name and comment, and where no avatar is found (usually when the commenter has not registered with MyBlogLog), you will instead see a default image.

You can find Merlinox's original instructions for installing MyBlogLog avatars here (which also includes a tutorial for those using Classic Blogger templates). Here I have also provided full instructions for installation, which I hope will help clarify any issues which may be unclear in Merlinox's post.

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 tag in your template, insert the following lines of code:

   <script src='http://putratoo.googlepages.com/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!

Related Posts by Categories

U want get it? click here | Yul Jet