Adding MyBlogLog Images to Comments with WordPress
March 22, 2007 | Comments (7) | Filed under: Tutorials
For just over a week and a half now, I’ve been testing out the automated addition of MyBlogLog images into comments here at Bookmark Bliss. You can see it in action over at our post of 50 sources for web design inspiration. It was actually pretty easy to setup, and I think it makes the comments just that much more personal. I was going to try and find a Wordpress plugin that already accomplishes this, but instead I just looked at a few other sites for the required HTML and implemented it myself. Now, if you have a MyBlogLog account, and you make a post here using the URL of your MyBlogLog community site, your image will automatically appear next to your post.
If you’re interested in adding MyBlogLog images to your own comments in WordPress, its actually really easy. Inside the comments.php file for your template, find the spot where your comment text is actually being printed. This is usually with a php call similar to this:
<?php comment_text( ) ?>
Then, depending on how you want the image to look, you simply need to put the following in the right place to match your theme and layout:
<a href=”http://www.mybloglog.com/buzz/co_redir.php?&t=&href=<?php comment_author_url(); ?>” target=”_blank”><img src=”http://pub.mybloglog.com/coiserv.php?href=<?php comment_author_url(); ?>” border=”0″ alt=”Visit my Community at MyBlogLog” title=”Visit my Community at MyBlogLog” onload=”if (this.width < 48) { this.title = ‘Get a MyBlogLog account’; this.alt = ‘Get a MyBlogLog account’}” /></a>
In our case, we put this line just above the one that prints the comment text and wrapped it in a div like so:
<div class=”mybloglog-image”>{CODE ABOVE}</div>
Then we just floated it right of the text with our CSS:
.mybloglog-image {
float: right;
margin-top: 15px;
margin-left: 10px;
}
That’s all there is to it. The reason this works so easily is MyBlogLog takes care of almost all the work. The image call automatically returns the correct image, or else links a small ? image if none is available. So, if any of you out there are interested in incorporating this into your own site, hopefully this will help you get there.
feel free to leave a comment
Comment Guidelines: Basic XHTML is allowed (a href, strong, em, code). All line breaks and paragraphs are automatically generated. Off-topic or inappropriate comments will be edited or deleted. Email addresses will never be published. Keep it PG-13 people!
XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
All fields marked with " * " are required.
7 people have left comments
I just implemented this a few days ago.. but something else you should consider is nested comments… you can find the plugin here:
http://meidell.dk/archives/2004/09/04/nested-comments/
good luck with your site!
It’s a really nifty idea. I toyed with it for awhile, but opted not to install them. But, I do like the idea of the Recent Readers.
Hey! I have just installed it following your article and was very easy!
Thanks man, you are helping me a lot!
No problem. Glad I could help out
Awesome little snippet of code there. I must try this out. I have tried a few Wordpress plugins on this and realized that I’ve customized my template to the point where most plugins are meaningless.
Thanks for this heads up!