Cara Menambah Widget Instagram di Blogger
Daftar Isi
Cara Menambah Widget Instagram di Blogger - Instagram adalah platform media sosial berbasis gambar yang rajin menyajikan fitur-fitur baru, mulai dari fitur feed dan cerita. Kini Instagram memiliki lebih dari 1 miliar pengguna aktif di dunia sehingga popularitasnya mampu mengalahkan media sosial yang sudah ada di dunia, seperti Twitter dan media sosial lainnya.
 |
Sebagai media sosial paling populer, ada kalanya orang yang mengikuti blog Anda ingin mengetahui postingan terbaru dari Instagram Anda tanpa harus masuk ke Instagram. Yaitu dengan menambahkan widget Instagram di Blogger bahwa Anda akan memudahkan para pengikut blog untuk mengetahui posting terbaru dari Instagram melalui situs Anda. Bagi yang penasaran, silahkan ikuti tips berikut.
Sebelum menambahkan widget ini, pastikan bahwa blog Anda telah menginstal Fontawesome. Jika tidak, tambahkan kode ini sebelumnya </head> or </head><!--<head/>-->
************************************
<script type='text/javascript'>//<![CDATA[//CSS Readyfunction loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");//]]></script>
Pertama buka Blogger> Klik menu Tema dan klik tombol Edit HTML> Tambahkan kode CSS ini sebelumnya </head> or </head><!--<head/>-->
***************************************
<style type='text/css'>/* Instagram Widget */.instagram-widget{height:100%;background:#ccc;overflow:hidden;min-height:250px;transition:all .3s ease}.instagram-widget .widget{margin-bottom:0!important}#insta .title{background:#4776e6;padding:20px;text-align:center;color:#fff;font-size:18px;display:inline-block;position:absolute;border-radius:20pc;top:100px;left:43%;z-index:1}.instagram-logo{display:inline-block;width:50px;height:50px;line-height:50px;border-radius:50%;text-align:center;color:#fff;left:50%;position:absolute;margin-left:-26px;z-index:1;font-size:30px;margin-top:100px;background:#fff;background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4);box-shadow:0 5px 15px rgba(0,0,0,0.15)}body.boxed-layout .instagram-logo{margin-top:72px}ul.il-instagram-lite{padding:0;margin:0}li.il-item{float:left;list-style:none;padding:0;width:16.6666666%;height:250px;overflow:hidden;position:relative;font-size:14px}body.boxed-layout li.il-item{height:200px}body.boxed-layout .instagram-widget{min-height:200px}li.il-item:before{content:"";font-family:Fontawesome;display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.1)}li.il-item img{height:100%;width:100%;overflow:hidden;object-fit:cover;transition:all .3s ease}.il-photo__meta{position:absolute;bottom:-65px;text-align:center;left:0;right:0;padding:20px;transition:all .3s ease;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.34),rgba(0,0,0,0.55),rgba(0,0,0,0.68))}.il-photo__likes{width:43%;color:#fff;float:left;text-align:right}.il-photo__comments{width:43%;color:#fff;float:right;text-align:left}li.il-item:hover .il-photo__meta{bottom:0;transition:all .3s ease}.il-photo__meta a{color:#fff}.il-photo__likes:before{content:"\f08a";font-family:Fontawesome;margin-right:5px}.il-photo__comments:before{content:"\f0e5";font-family:Fontawesome;margin-right:5px}@media screen and (max-width: 768px) {li.il-item{float:left;list-style:none;padding:0;width:50%;height:150px}.instagram-widget{background:#fff;overflow:hidden;height:100%}.instagram-logo{margin-top:200px}}</style>
Kemudian tambahkan kode ini sebelumnya </body> or <!--</body>--></body>
********************************************
<script type='text/javascript'>//<![CDATA[// Instagram Widget!function(t){t.fn.instagramLite=function(e){if(!this.length)return this;plugin=this,plugin.defaults={accessToken:null,limit:null,list:!0,videos:!1,urls:!1,captions:!1,date:!1,likes:!1,comments_count:!1,error:function(){},success:function(){}};var i=t.extend({},plugin.defaults,e),s=t(this),a=function(t){for(var e=t.split(" "),i="",s=0;s<e.length;s++){var a;if("@"==e[s][0])a='<a href="http://twitter.com/'+e[s].replace("@","").toLowerCase()+'" target="_blank">'+e[s]+"</a>";else if("#"==e[s][0]){a='<a href="http://twitter.com/hashtag/'+e[s].replace("#","").toLowerCase()+'" target="_blank">'+e[s]+"</a>"}else a=e[s];i+=a+" "}return i};!function(){if(i.accessToken){var e="https://api.instagram.com/v1/users/self/media/recent/?access_token="+i.accessToken+"&count="+i.limit;t.ajax({type:"GET",url:e,dataType:"jsonp",success:function(t){200===t.meta.code&&t.data.length?(function(t){for(var e=0;e<t.length;e++){var o,n,l=t[e];if("image"===l.type||!i.videos){if(o='<img class="il-photo__img" src="'+l.images.standard_resolution.url+'" alt="Instagram Image" data-filter="'+l.filter+'" />',i.urls&&(o='<a href="'+l.link+'" target="_blank">'+o+"</a>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+='<a href="'+l.link+'" target="_blank"><div class="il-photo__meta">'),i.captions&&l.caption&&(o+='<div class="il-photo__caption" data-caption-id="'+l.caption.id+'">'+a(l.caption.text)+"</div></a>"),i.date){var r=new Date(1e3*l.created_time),c=r.getDate(),d=r.getMonth()+1,u=r.getFullYear();r.getHours(),r.getMinutes(),r.getSeconds(),o+='<div class="il-photo__date">'+(r=d+"/"+c+"/"+u)+"</div>"}i.likes&&(o+='<div class="il-photo__likes">'+l.likes.count+"</div>"),i.comments_count&&l.comments&&(o+='<div class="il-photo__comments">'+l.comments.count+"</div>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+="</div>")}"video"===l.type&&i.videos&&l.videos&&(l.videos.standard_resolution?n=l.videos.standard_resolution.url:l.videos.low_resolution?n=l.videos.low_resolution.url:l.videos.low_bandwidth&&(n=l.videos.low_bandwidth.url),o='<video poster="'+l.images.standard_resolution.url+'" controls>',o+='<source src="'+n+'" type="video/mp4;"></source>',o+="</video>"),i.list&&o&&(o='<li class="il-item" data-instagram-id="'+l.id+'">'+o+"</li>"),""!==o&&s.append(o)}}(t.data),i.success.call(this)):i.error.call(this)},error:function(){i.error.call(this)}})}}()}}(jQuery);// Activate Instagram$(function(){$(".il-instagram-lite").instagramLite({accessToken:instaCode,urls:!0,limit:6,captions:!1,likes:!0,comments_count:!0,success:function(){console.log("The request was successful!")},error:function(e,s){console.log("There was an error with the request")}})});//]]></script>
Kemudian tambahkan markup widget ini di mana saja di dalam tag <body> dan </ body>, misalnya dalam demo blog saya menambahkannya sebelum footer
*******************************/
<div class='instagram-widget'> <b:section class='insta' id='insta' maxwidgets='1' showaddelement='no'> <b:widget id='HTML120' locked='true' title='Instagram Widget' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>8306057439.1677ed0.57fd28e607fd45ea8d4c72096772412c</b:widget-setting> </b:widget-settings> <b:includable id='main'> <div class='widget-content'> <script type='text/javascript'> var instaCode = '<data:content/>' ; </script> </div> </b:includable> </b:widget> <b:widget id='HTML121' locked='true' title='hide Instagram Widget' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'/> </b:widget-settings> <b:includable id='main'> <b:if cond='data:content == "hide"'> <style> .instagram-widget { display: none; } </style> </b:if> </b:includable> </b:widget> </b:section> <ul class='il-instagram-lite'/> <span class='instagram-logo'> <i aria-hidden='true' class='fa fa-instagram'/> </span></div>
Ubah kode yang ditandai dengan mengakses token akun Instagram Anda. Kemudian klik Simpan tema.
Cara Mendapatkan Akses ke Token Akun Instagram
Untuk mendapatkan kode akses token Instagram Anda, pastikan browser telah masuk ke Facebook dan telah mengakses situs Instagram. Jika demikian, silakan kunjungi situs ini http://instagram.pixelunion.net. Klik tombol Hasilkan Token Akses
 |
| Akses Token |
Jika setelah tombol klik Hasilkan Token Akses halaman berikutnya tidak muncul, maka Anda harus mengaktifkan VPN di browser Anda.
Setelah mengaktifkan VPN, klik tombol kembali. Hasilkan Token Akses dan salin kode yang Anda dapatkan dan ganti kode token yang telah saya lingkari di atas atau juga melalui tata letak widget Instagram dengan kode akses token Instagram Anda.
 |
| Akses Token |
Selesai, lihat hasilnya di blog Anda.
Posting Komentar