Home
Blogger

Embed Image and YouTube Video inside Blogger Default Comment

Embed Image and YouTube Video inside Blogger Default Comment Box
add image in comment box

Blogger default comment box only allow simple text and nothing else. But by the bless of Jquery now we are able to display pre-loaded emotion or smile in our Blogger default comment system. This is really hardest part to add Image and videos inside Blogger comment box.

There are many visitors who wants to add screenshot in Blogger comment section for solving various issues. But external image displaying is not possible generally. So I have developed this widget to display image and videos inside Blogger comment system. This widget help to convert Image link on Blogger comment section into main image. As well as YouTube videos can be display on Blogger comment system. And Videos can view able into full screen mode. In case of YouTube video your Browser must support and Installed Adobe Flash. So no more talk lets proceed to the tutorial-


Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3 Now Find the below code block By Pressing Ctrl+F (Windows) or CMD+F (Mac)

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

Step 4 And now wrap the whole code block by

<div id='bloggerspiceciv'>
--------------------------------
--------------------------------
</div>

For example code will be like below after wrap. 

<div id='bloggerspiceciv'>
<b:loop values='data:post.comments' var='comment'>... </b:loop>
</div>

Step 5 Now again find the </body> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 6 Copy the script from below and Paste it above/before </body> 

<script style='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('1w(10(p,a,c,k,e,d){e=10(c){11(c<a?\'\':e(1r(c/a)))+((c=c%a)>1q?15.1m(c+1l):c.1n(1o))};12(!\'\'.13(/^/,15)){16(c--){d[e(c)]=k[c]||e(c)}k=[10(e){11 d[e]}];e=10(){11\'\\\\w+\'};c=1};16(c--){12(k[c]){p=p.13(1p 1b(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}11 p}(\'7=J.O(\\\'h-R\\\');g(7){b=7.D("p");Z(i=0;i<b.A;i++){g(b.a(i).y(\\\'B\\\')==\\\'h-F\\\'){1=b.a(i).d.4(/:\\\\)\\\\)/5,"<6 9=\\\'E://2.w.u.c/-n/m-o/q/t/s/r.G\\\' H=\\\'\\\' f=\\\'k\\\'/>");1=1.4(/:6:/5,"<6 9=\\\'");1=1.4(/:T:/5,"\\\' l=8 f=\\\'k\\\'>");1=1.4(/:e:/5,"<j 9=\\\'//Y.e.c/v/");1=1.4(/:K:/5,"?I=L&M;P=3\\\' N=\\\'Q/x-V-X\\\' l=\\\'8\\\' S=\\\'8\\\' z=\\\'W\\\' U=\\\'C\\\'></j>");b.a(i).d=1}}}\',14,14,\'|1v|||13|1s|1k|1t|1x|1h|17||1a|1y|19|18|12|1j||1c|1i|1g|1f|1d|1e||1u|1N|1X|1V|1U||1Z||1R|1S|1T|1Y|21|26|25|23|24|20|22|1W|1P|1E|1F|1D|1C|1z|1A|1B|1G|1H|1Q|1O|1M|1L|1I|1J\'.1K(\'|\'),0,{}))',62,131,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||function|return|if|replace|62|String|while|item|class|youtube|com|RegExp|embed|Ph2wxEvy2mc|fdHjI|UTIr8|width|src|bloggerspiceciv|comment|img|29|fromCharCode|toString|36|new|35|parseInt|gi|ct|AAAAAAAABAo|_str|eval|auto|innerHTML|version|application|holder|getElementById|type|zh_TW|amp|height|eimg|www|for|split|flash|always|taunt|shockwave|eyoutube|allowfullscreen|getAttribute|allowscriptaccess|length|blogspot|3use2PsPhMA|document|s1600|CLASS|bp|alt|true|hl|content|gif|http|getElementsByTagName'.split('|'),0,{}))
//]]>
</script>

Step 7 Finally hit the Save template button.

Main part of the widget integration has done. Now we will see how to display Image and Videos in Blogger template's comment section.

ShortCode for Displaying Image and YouTube videos

Here We will use a simple short code for displaying Image and YouTube videos inside Blogger comment section. While making comment just we need hosted Image link and Hosted YouTube video code.

ShortCode for Image Embedding

Main shortcode for embedding image inside Blogger default comment box are as follows-
:img:IMAGE URL HERE:eimg:
For Example
:img: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgndNCZfBogpMVWzKfguhUJrYY0byAwjTQIU22L-wD1qZg5VFON7zoTcE1_OHZJPc6-8qIBhcFoJfo8pX4zhYEo9H7F29GdnvT-Y-s9C8tFpoQYotEUx7P-u3I6Si4bA_MzS253CD1-ve0/s1600/How+to+Get+Visitors+to+Return+to+Your+Site.jpg:eimg:
simply wrap the image url inside shortcode and add it in comment box. And see your Image is display on default comment box.
image in default comment

ShortCode for YouTube Video Embedding

In case of Video shortcode is same but we need only the video ID not the whole video link.
:youtube:VIDEO ID HERE:eyoutube:
For Example

A YouTube video link is like this https://www.youtube.com/watch?v=32VknlEnYgc and the video ID is 32VknlEnYgc this part only.

So for embedding the video we will use shortcode like below
:youtube:32VknlEnYgc:eyoutube:
You have to wrap the video ID and paste it inside Blogger comment section. After publishing the comment you will able to see the video inside Blogger default comment box.


video in default comment

I hope This tutorial will solve the Image and video display issue. And now Blogger will get any kinds of screenshots and videos in their comment box.

11 comments

  1. :img:http://textimages.us/thanks/thanks07/thanks-010.png:eimg:
    • In my site you don't have to use any conditional tag. Just add the image link and you will see the image like below--

      http://textimages.us/thanks/thanks07/thanks-010.png
  2. Hello, Rabi Very Great Article.
    But not working in my Template... I am using All tech Buzz blogger template old version...
    the you mentioned above is not in my template
    • Hi Deepak,

      +Have you found the below code snippet in your template?

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

      if yes then it must work. try this trick in a Blogger default template and after that copy the script from Blogger default template to your custom template. The you would understand where to add code snippet in your custom template. I think it will work. Let me know? :t
  3. testing
    :youtube:uc2AN8JEDIY:eyoutube:

  4. Not work now bro :(
  5. Oh, sr I'm wrong, it works. Thanks so much. However, I want it shows image just with image direct link in comment blogger, should I do bro?
    • Hi Phu :)
      You have to upload the image in different image hosting server or in Blogger then you can display the image. Direct URL won't work. And too much image in comment section doesn't look good. That's why i have disable this feature in my Blog.
  6. Thanks for sharing your tutorial.
    I did not think about this awesome trick.
    Its perfectly working onto my blog.
  7. Thanks for this! I have been trying to find a solution for a while and this works well. One question, though: Is there a way to add specific sizes? The videos are so small. Thanks again!
    • Hello Debbie, this is a responsive design code, so it will adjust based on the screen resolution. However, you can try to change the "s1600" value in the code.
Go Up