instagramwidget

Instagram is a mobile, desktop, and Internet-based photo-sharing application and service that allows users to share pictures and videos either publicly or privately.

It is the most popular photo sharing platform for bloggers. I received many questions related to ‘How to display Instagram Photo on my website”. Because of this, today I make this post to help everyone to integrate Instagram widget to their website blog.

instagramwidget

Demo Preview

You also can get directly widget code and widget from this link:

Get Instagram Widget

By following the few steps below, the Instagram widget will appear on your website.

To open HTML editing:

For Blogger: Dashboard -> Theme -> Edit HTML.

For WordPress: Dashboard -> Appearance -> Editor

Step 1: Copy scripts below and put it before </body> tag:


<script>
//<![CDATA[
var _0x7963=['$(O).3y(7(){(7(){8 k=7(){7 d(b,e){8 c;4.6={35:"E",W:"1y",1s:"3u",L:"1H",2D:!0,2A:!1,1x:!1};n("2s"==9 b)v(c 2r b){8 f=b[c];4.6[c]=f}4.J=j!=e?e:4;4.P=4.2q()}m d.s.2p=7(){m"G"==9 4.J.R&&0<4.J.R.t},d.s.41=7(){m 4.2p()?4.1w(4.J.R):!1},d.s.1w=7(b){8 e,c,f;n("G"!=9 4.6.S&&"G"!=9 4.6.D)u p("2i S 2h D.");n("G"!=9 4.6.D&&"G"!=9 4.6.S)u p("2i S 2h D.");m j!=4.6.1K&&"7"==9 4.6.1K&&4.6.1K.x(4),"1L"!=9 r&&j!==r&&(f=r.1t("3R"),f.1O="E-3w",f.1Q=b||4.1T(),e=r.46("45"),e[0].1V(f),c="1Z"+4.P,O[c]=26 d(4.6,4),O[c].P=4.P),!0},d.s.2d=7(b){8 e,c,f;n("2s"!=9 b){n(j!=4.6.y&&"7"==9 4.6.y)m 4.6.y.x(4,"1d 2e q"),!1;u p("1d 2e 37");}n(36!==b.1G.3t){n(j!=4.6.y&&"7"==9 4.6.y)m 4.6.y.x(4,b.1G.2R),!1;u p("p 1k 1D: "+b.1G.2R);}n(0===b.q.t){n(j!=4.6.y&&"7"==9 4.6.y)m 4.6.y.x(4,"1m 1n 2S 2W 1k 1D"),!1;u p("1m 1n 2S 2W 1k 1D");}j!=4.6.1A&&"7"==9 4.6.1A&&4.6.1A.x(4,b);4.J.R="";j!=b.2Z&&(4.J.R=b.2Z.38);n("1H"!==4.6.L){"X"===4.6.L?c=["","X"]:c=4.6.L.1u("-");8 a="3H"===c[0]?!0:!1;2z(c[1]){A"X":b.q.2m(7(){m.5-34.X()});B;A"1q":b.q=4.1p(b.q,"3b",a);B;A"3F":b.q=4.1p(b.q,"1o.U",a);B;A"44":b.q=4.1p(b.q,"1j.U",a);B;2I:u p("1d 1i v L: \'"+4.6.L+"\'.");}}n("1L"!=9 r&&j!==r&&!1===4.6.2A){a=b.q;j!=4.6.M&&a.t>4.6.M&&(a=a.2G(0,4.6.M+1||3S));b=r.3Z();j!=4.6.1I&&"7"==9 4.6.1I&&(a=4.2C(a,4.6.1I));n(j!=4.6.1g&&"G"==9 4.6.1g){c=e="";8 g=r.1t("F");8 d=0;v(f=a.t;d<f;d++){c=a[d];8 h=c.1n[4.6.1s].28;4.6.1x||(h=h.1a("V://","//"));c=4.1Y(4.6.1g,{3Y:c,1O:c.1O,18:c.18,1S:h,2v:4.I(c,"2v.H"),1o:c.1o.U,1j:c.1j.U,Y:4.I(c,"Y.1U")});e+=c}g.12=e;e=[].2G.x(g.39);c=0;v(h=e.t;c<h;c++)a=e[c],b.1V(a)}1W v(d=0,f=a.t;d<f;d++)c=a[d],g=r.1t("1X"),h=c.1n[4.6.1s].28,4.6.1x||(h=h.1a("V://","//")),g.1Q=h,!0===4.6.2D?(e=r.1t("a"),e.Q=c.18,e.12(g),b.12(e)):b.12(g);a=13("3z");c=13("3A==");$("#E").3D(b).1P(\'<a K="\'+c+\'" T="H-21: 22 !\'+a+";23:24 !"+a+";1N:27 !"+a+";1M:1 !"+a+";z-29:2a !"+a+";2b:2c !"+a+";1r: o !"+a+";2f: 2g !"+a+";1f: 1e !"+a+";2j-1f: 1e !"+a+";2k: 2l(N,N,N,0.3)!"+a+";2n:#2o !"+a+";15: 1v !"+a+";1h: 1v !"+a+";C-1h: o !"+a+";C-Z: o !"+a+";C-15: o !"+a+";C-1r: o !"+a+";H-2t: 2u ! "+a+";1R-2w: 2x !"+a+";Z: o !"+a+";2y: 1l !"+a+";1c: 1l !"+a+";1c-T: 2B !"+a+\';" Q="V://1J.19/2E/10/14/2F-17-2H-1F-2J-17-2K/?2L=2M-2N">\'+13("2O=")+"</a>");$("#E").2P({1M:"1"});b=$("."+c+"");n("0"==b.t)$("#E").1P(\'<a K="\'+c+\'" T="H-21: 22 !\'+a+";23:24 !"+a+";1N:27 !"+a+";1M:1 !"+a+";z-29:2a !"+a+";2b:2c !"+a+";1r: o !"+a+";2f: 2g !"+a+";1f: 1e !"+a+";2j-1f: 1e !"+a+";2k: 2l(N,N,N,0.3)!"+a+";2n:#2o !"+a+";15: 1v !"+a+";1h: 1v !"+a+";C-1h: o !"+a+";C-Z: o !"+a+";C-15: o !"+a+";C-1r: o !"+a+";H-2t: 2u ! "+a+";1R-2w: 2x !"+a+";Z: o !"+a+";2y: 1l !"+a+";1c: 1l !"+a+";1c-T: 2B !"+a+\';" Q="V://1J.19/2E/10/14/2F-17-2H-1F-2J-17-2K/?2L=2M-2N">\'+13("2O=")+"</a>");1W n(25!=$("."+c+"").3a("T").1u(";").t||"1H"==b.2P("1N"))$("2Q").3c(),$("2Q").1P("3d. 3e 3f 3g 3h 3i. 3j 3k 3l 1k 3m."),3n(7(){O.Y.Q="V://1J.19"},3o);3p{3q O[3r 0]}3s(l){}}m j!=4.6.1E&&"7"==9 4.6.1E&&4.6.1E.x(4),!0},d.s.1T=7(){8 b;2z(4.6.W){A"1y":8 e="11/1y";B;A"3v":n("G"!=9 4.6.1C)u p("1m 3x 1U 2T. 2U 2V \'1C\' 1i.");e="3B/"+4.6.1C+"/11/1q";B;A"Y":n("3C"!=9 4.6.1B)u p("1m Y 2T. 2U 2V \'1B\' 1i.");e="3E/"+4.6.1B+"/11/1q";B;A"2X":e="3G/"+4.6.2Y+"/11/1q";B;2I:u p("1d 1i v W: \'"+4.6.W+"\'.");}m b="3I://3J.1F.19/3K/"+e,j!=4.6.D?b+="?3L="+4.6.D:b+="?3M="+4.6.S,j!=4.6.M&&(b+="&U="+4.6.M),b+="&3N=1Z"+4.P+".2d",b},d.s.2q=7(){8 b;m b=7(){m(3O*(1+34.X())|0).3P(16).3Q(1)},""+b()+b()+b()+b()},d.s.1Y=7(b,e){8 c,f;8 a=/(?:\\{{2})([\\w\\[\\]\\.]+)(?:\\}{2})/;v(c=b;a.3T(c);){8 d=c.3U(a)[1];d=j!=(f=4.I(e,d))?f:"";c=c.1a(a,""+d)}m c},d.s.I=7(b,e){8 c;e=e.1a(/\\[(\\w+)\\]/g,".$1");v(c=e.1u(".");c.t;){8 d=c.3V();n(!(j!=b&&d 2r b))m j;b=b[d]}m b},d.s.1p=7(b,e,c){8 d;m d=7(a,b){8 d,f;m d=4.I(a,e),f=4.I(b,e),c?d>f?1:-1:d<f?1:-1},b.2m(d.3W(4)),b},d.s.2C=7(b,d){8 c;8 e=[];8 a=7(a){n(d(a))m e.3X(a)};8 g=0;v(c=b.t;g<c;g++){8 k=b[g];a(k)}m e},d}();("1L"!=9 1z&&j!==1z?1z:O).30=k}).x(4);(7(){8 k=$("#E").H().31(),d=$("#E").H().1u(".")[0].31();(26 30({W:"2X",2Y:d,D:k,M:20,1s:"40",1g:\'<32><a Q="{{18}}" 35="42"><1X 1Q="{{1S}}" /><F K="43"><F><33>{{1o}} <i K="1b 1b-47"></i><48/>{{1j}} <i K="1b 1b-49"></i></33></F></F> <F K="4a"></F></a></32>\'})).1w()}).x(4)});',
"|","split","||||this||options|function|var|typeof||||||||||null|||return|if|0px|Error|data|document|prototype|length|throw|for||call|error||case|break|margin|accessToken|instafeed|div|string|text|_getObjectProperty|context|class|sortBy|limit|255|window|unique|href|nextUrl|clientId|style|count|http|get|random|location|right||media|innerHTML|atob||top||to|link|com|replace|fa|transform|Invalid|20px|height|template|left|option|comments|from|inherit|No|images|likes|_sortBy|recent|bottom|resolution|createElement|split|auto|run|useHttp|popular|exports|success|locationId|tagName|Instagram|after|instagram|meta|none|filter|raintemplates|before|undefined|opacity|display|id|append|src|font|image|_buildUrl|name|appendChild|else|img|_makeTemplate|instafeedCache||indent|1px|visibility|visible||new|block|url|index|2147483647|position|absolute|parse|JSON|width|133px|or|Missing|line|background|rgba|sort|color|fff|hasNext|_genKey|in|object|align|center|caption|size|11px|float|switch|mock|flat|_filter|links|2017|how|slice|add|default|widget|blog|action|remove|watermark|UmFpbnRlbXBsYXRlcyBXaWRnZXQ|css|body|error_message|were|specified|Use|the|returned|user|userId|pagination|Instafeed|trim|li|span|Math|target|200|response|next_url|childNodes|attr|created_time|empty|Sorry|You|are|using|free|version|It|prevents|you|modifying|setTimeout|4E3|try|delete|void|catch|code|thumbnail|tagged|fetcher|tag|load|aW1wb3J0YW50|cmFpbnRlbXBsYXRlc3dpZGdldA|tags|number|html|locations|liked|users|least|https|api|v1|access_token|client_id|callback|65536|toString|substring|script|9E9|test|match|shift|bind|push|model|createDocumentFragment|standard_resolution|next|_blank|moreinfo|commented|head|getElementsByTagName|heart|br|comment|hoverbox",
"","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?_0x7963[4]:b(parseInt(a/e)))+(35<(a%=e)?String[_0x7963[5]](a+29):a.toString(36))};if(!_0x7963[4][_0x7963[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return _0x7963[7]};a=1}for(;a--;)c[a]&&(d=d[_0x7963[6]](new RegExp(_0x7963[8]+b(a)+_0x7963[8],_0x7963[9]),c[a]));return d}(_0x7963[0],62,259,_0x7963[3][_0x7963[2]](_0x7963[1]),0,{}));

//]]>
</script>

To WordPress user, From Editor -> Open Theme Footer and add code inside it.

Step 2: Copy scripts below and put it before </head> tag:


<style>
#instafeed {position:relative; opacity:0;}
#instafeed li { display: inline-block;list-style-type: none;width: 10%;position: relative;padding: 5px;}
#instafeed li a {display:block; position:relative; width:100%; height:100%;}
#instafeed li img {width:100%; height:auto;}
.moreinfo {position:absolute; bottom:10px; left:10px; z-index:99999; visibility:hidden;-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;}
.moreinfo span, .moreinfo i {font-size:10px; color:#fff;}
.moreinfo i {color:#fff;}
.hoverbox {background:rgba(0,0,0,0.5); position:absolute; width:100%; height:100%; left:0px; top:0px; z-index:888; opacity:0; -webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;}
#instafeed li:hover .hoverbox {opacity:1;}
#instafeed li:hover .moreinfo {visibility:visible;}
#instafeed li {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box;}
</style>

To WordPress user, From Editor -> Open Theme Header and add code inside it.

Step 3: Choose the position to display widget.

In this article, I guide you to put widget at the bottom of the page but you can put it in any position of your website blog but you should style it for better.

For Blogger:

Please add new widget is HTML widget (Dashboard -> Layout -> Add a Gadget -> HTML/Javascript)

Then put the code below in the widget content section:


<div id="instafeed">
Add-your-Instagram-Access-token-here
</div>

You need to add your Instagram Access Token to this widget. Access Token is an encrypted code which is generated by Instagram. Without this access token, your website can’t display the photo from your Instagram timeline. I registered new Instagram application which helps you to get your Instagram Access Token.

You can get Access Token from this link: http://raintemplates.com/instagram/

Since you have Instagram Access Token, put it as the photo below:

Generate Instagram Widget For Blog

 

For WordPress: You can make new widget from Dashboard -> Appearance -> Widgets -> Custom HTML.

 

That is all done. Now your website has a great Instagram widget. This widget is basic then you can custom it for displaying well on your website.

Sometimes, the widget won’t run as expected, please check:

  • The code you copied is exact or not.
  • If not, add script after <head> tag:

    <script src="//code.jquery.com/jquery-1.8.3.min.js"></script>

If you do not know how to custom it with color and font, feel free leave a comment here or give a ticket in Support page.

I hope you will enjoy with this widget.

One thought on “How to add Instagram Photo Widget to Your Blog (WordPress and Blogger)

  1. You said it very well.!
    canadianpharmaciesbnt.com
    pharmacy prices compare

Leave a Reply

Your email address will not be published. Required fields are marked *