Instagram merupakan media umum yang sangat menarik di sini Anda sanggup membagikan foto, video dan story Anda sehingga instagram menjadi sosial media yang paling banyak diminati di beberapa tahun belakangan ini.
Banyak fitur-fitur gres dari Instagram yang sangat menarik, sehingga menciptakan penggunanya lebih merasa nyaman dan asik saat memakai sosial media yang satu ini.
Sebagai seorang blogger saya menemukan satu hal yang menarik ialah kini kita sanggup menambahkan widget galeri foto ke blogger.
Dengan begitu kita sanggup menampilkan foto-foto yang ada di instagram ke blog atau website Anda.
Apabila website atau blog kita mempunyai trafik yang cukup banyak tentu hal ini sanggup menambah jumlah followers instagram Anda.
Apalagi kalau foto atau video yang Anda bagikan sangat berkaitan dengan website atau blog milik Anda, ini akan menjadi nilai konkret untuk blog dan akun instagram Anda.
Baca juga: 4 Cara Menghapus Akun Instagram Permanen dan Sementara
Selain untuk menambah jumlah followers, dengan memasang widget instagram ini di blog Anda juga sanggup menambah jumlah like pada foto Anda atau jumlah views pada video yang Anda bagikan di instagram.
Jika Anda tertarik ingin menampilkan foto-foto dan video Anda yang ada di instagram ke blog atau website silahkan ikuti langkah-langkahnya di bawah ini.
Apabila blog Anda sudah memakai Font Awesome sebelumnya maka Anda sanggup pribadi ke tahap selanjutnya.
1. Masuk ke Blogger
2. Lalu klik Tema > Edit HTML
3. Tambahkan arahan css ini, kemudian simpan di atas arahan
Banyak fitur-fitur gres dari Instagram yang sangat menarik, sehingga menciptakan penggunanya lebih merasa nyaman dan asik saat memakai sosial media yang satu ini.
Sebagai seorang blogger saya menemukan satu hal yang menarik ialah kini kita sanggup menambahkan widget galeri foto ke blogger.
Dengan begitu kita sanggup menampilkan foto-foto yang ada di instagram ke blog atau website Anda.
Apabila website atau blog kita mempunyai trafik yang cukup banyak tentu hal ini sanggup menambah jumlah followers instagram Anda.
Apalagi kalau foto atau video yang Anda bagikan sangat berkaitan dengan website atau blog milik Anda, ini akan menjadi nilai konkret untuk blog dan akun instagram Anda.
Baca juga: 4 Cara Menghapus Akun Instagram Permanen dan Sementara
Selain untuk menambah jumlah followers, dengan memasang widget instagram ini di blog Anda juga sanggup menambah jumlah like pada foto Anda atau jumlah views pada video yang Anda bagikan di instagram.
Jika Anda tertarik ingin menampilkan foto-foto dan video Anda yang ada di instagram ke blog atau website silahkan ikuti langkah-langkahnya di bawah ini.
Cara Memasang Widget Instagram di Blog
Sebelum memasang widget instagram di blog, pastikan blog Anda sudah memakai fitur Font Awesome. Jika belum, silahkan tambahkan arahan ini di atas arahan</head><script type='text/javascript'> //<![CDATA[ //CSS Ready function 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>Apabila blog Anda sudah memakai Font Awesome sebelumnya maka Anda sanggup pribadi ke tahap selanjutnya.
1. Masuk ke Blogger
2. Lalu klik Tema > Edit HTML
3. Tambahkan arahan css ini, kemudian simpan di atas arahan
</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>4. Kemudian tambahkan arahan javascript ini di atas arahan
</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 merupakan media umum yang sangat menarik di sini Anda sanggup membagikan foto Cara Memasang Widget Galeri Foto Instagram di Blog" 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>5. Lalu tambahkan arahan markup ini dan simpan dibagian tag
<body> hingga </body> Anda sanggup menambahkannnya di atas arahan footer atau di bawah arahan 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'>6285364919.1677ed0.45cfb2a51eb94c0bae00b42fe30fffff</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>6. Silahkan ganti arahan jalan masuk token di atas dengan memakai arahan milik Anda
7. Jika sudah klik Simpan tema
Cara Menadapatkan Akses Token Akun Instagram
Untuk menadapatkan arahan jalan masuk token akun Instagram, silahkan login ke Facebook dan Instagram pada browser yang Anda gunakan.Setelah itu buka situs berikut ini:
http://instagram.pixelunion.net/
Kemudian klik Generate Access Token
Jika muncul pesan ibarat gambar di bawah ini, silahkan klik Authorize.
Silahkan salin arahan token milik Anda dan gunakan untuk mambahkan widget instagram di blog Anda.
Kesimpulan
Sekarang Anda sanggup menampilkan foto maupun video yang Anda posting di instagram ke dalam blog atau website Anda dengan memakai cara ini.Menambahkan atau memasang widget instagram di blog sanggup menambah jumlah followers dan like pada akun instagram Anda.
Itulah artikel mengenai cara memasang widget galeri foto instagram di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/
Cara Menadapatkan Akses Token Akun Instagram
Untuk menadapatkan arahan jalan masuk token akun Instagram, silahkan login ke Facebook dan Instagram pada browser yang Anda gunakan.Setelah itu buka situs berikut ini:
http://instagram.pixelunion.net/
Kemudian klik Generate Access Token
Jika muncul pesan ibarat gambar di bawah ini, silahkan klik Authorize.
Silahkan salin arahan token milik Anda dan gunakan untuk mambahkan widget instagram di blog Anda.
Kesimpulan
Sekarang Anda sanggup menampilkan foto maupun video yang Anda posting di instagram ke dalam blog atau website Anda dengan memakai cara ini.Menambahkan atau memasang widget instagram di blog sanggup menambah jumlah followers dan like pada akun instagram Anda.
Itulah artikel mengenai cara memasang widget galeri foto instagram di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/
Related Posts
- 2 Cara Menciptakan Bingkai Di Facebook Untuk Foto Profil (Lengkap) Facebook, mempunyai banyak sekali macam fitur menarik dan setiap beberapa waktu selalu ditambah dan diperbarui. Nah, salah satu yang terkenal bela ...
- Cara Mengatasi Windows 7 Selalu Masuk Safe Mode Tips dan Tik Komputer - Cara Mengatasi Windows 7 Selalu Masuk Safe Mode memang sangat menyebalkan alasannya ialah sudah terang kalian terjebak ...
- Cara Menampilkan Author Profile Di Bawah Postingan BloggerAuthor porfile merupakan salah satu widget blogger yang berfungsi untuk menampilkan ringkasan profil penulis artikel di suatu blog. Di antara banyak ...
- Cara Mengatasi Wifi Limited Access Pada Windows 7,8, Dan 10 Tips dan Trik Komputer - Cara Mengatasi Wifi Limited Access pada Windows 7,8, dan 10 sudah kita ketahui kini kebanyakan komputer kini sudah mema ...
- Cara Menciptakan Tool Parse Dengan Mudah Hai, sobat bloger! Pada artikel sebelumnya, saya pernah berjanji di artikel sebelumnya, bahwa saya akan membagikan artikel untuk menciptakan to ...
- Cara Live Streaming Youtube Di Pc Dengan Obs StudioYouTube merupakan media yang paling banyak dipakai oleh orang lain untuk mengupload aneka macam jenis video seperti, vlog, game, tutorial, musik, dan ...
