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.
Go Up