Cara Memasang Widget Galeri Foto Instagram Di Blog

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.

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:&quot;&quot;;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:&quot;\f08a&quot;;font-family:Fontawesome;margin-right:5px} .il-photo__comments:before{content:&quot;\f0e5&quot;;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 = &#39;<data:content/>&#39; ;                </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 == &quot;hide&quot;'>                <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/

Related Posts