Add Videos/Images in Blogger/Blogspot Comments

Maybe many of you have wondered if it is possible to post youtube videos and images into your blogger comments. Well, now it is! But first of all you should know that if you have blogger threaded comments activated, it won't work. So if you want to have this feature, you should remove blogger threaded comments firstly. Read here how to remove blogger threaded comments.

How to add videos/images in Blogger comments

Step 1. First log in to your Blogger account, go to Dashboard >> Design >> Edit HTML >> check the "Expand widget templates" box (make a backup)

Step 2. Find (CTRL + F) the following piece of code:

</body>

Step 3. Immediately above/before this code, paste the code below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[img\]/gi, "<div style='clear:both'></div><img style='float:left;margin:10px 0;border:1px solid #DDD;max-width:490px;background:#FFF;padding:4px' src='");
theText = theText.replace(/\[\/img\]/gi, "'/><div style='clear:both'></div>");
theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/\[\/youtube\]/gi, "frameborder='0' allowfullscreen></iframe>");bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Step 4. Now find (CTRL + F) this code:

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

Step 5. Just above it, add the following code:

<div id='multimedia'>

Step 6. Then find:

</b:loop>

Note: look for this piece of code after the code on the step 4.

Step 7. Just after it, paste this:

</div>

Step 8. Save template.

Instructions

Now everytime you want to post images & videos in comments, you should add the following tags at the beginning and after the url of your youtube videos or images you want to share:

For example:

We have a youtube url:
www.youtube.com/watch?v=jEgX64n3T7g

To make a youtube video appear in blogger comments, you'll have to add the red codes at the beginning and after the youtube URL of the video:

[youtube]www.youtube.com/watch?v=jEgX64n3T7g[/youtube]

To put images in blogger comments, add these codes at the beginning and at the end of your image url:

[img]your-image-url[/img]

Note: replace your-image-url with the url address of your image

Settings

To instruct your visitors on how to post images and videos into your blogger comments, you can add a message just above your blogger comment form. To do that go to Dashboard >> Settings >> Comments - and add the following text in the Comment Form Message box:

If you want to post a youtube video or a image in your comment, use <b>[img]YOUR-IMAGE-URL-HERE[/img]</b> for posting images and <b>[youtube]YOUTUBE-VIDEO-URL-HERE[/youtube]</b>

You can see it in my screenshot:

Press Save Settings and you're done !

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below.