Blogger için Instagram Widget/Eklentisi

Blogger gün geçtikçe gelişiyor, geliştikçe çok güzel görüntüler ortaya çıkıyor. İşte bu eklenti sayensinde instagramdaki resimlerinizi blogunuzun header, sidebar, footer... istediğiniz yerinde yayınlayabileceksiniz. En son eklediğiniz güncel resimlerinizi otomatik olarak blogunuzda/sitenizde ziyaretçilerinize gösterebilirsiniz.

Blogger'a Instagram Widget/Eklentisini Nasıl Yüklerim?

Olmazsa olmazımız: Instagram Access Token
http://instagram.pixelunion.net adresine gidip Generate Access Token'a tıklıyoruz. Önümüze çıkan ekranda Instagram hesabımızla giriş yapmamız gerektiği söyleniyor. Eğer giriş yapmazsak ID'mizi alamayız. Giriş yaptıktan sonra bize bir kod veriyor. O kod şimdilik kenarda dursun. Lazım olduğunda kullanacağız.

1. Adım
Blogger > Tema > HTML'yi Düzenle yolunu izleyip ]]></b:skin> kodunu bulalım ve aşağıdaki kodu bu kodun hemen üzerine yapıştıralım.

CSS
/* Instagram widget/eklenti Css Başlangıç */
.insta-wrap {
    padding: 0;
    text-align: center;
}
.insta-wrap h2 {
   display:none;
}
.instag ul.thumbnails > li {
width:32% !important;
}
.instag ul.thumbnails > li img:hover {
opacity:.8;
}
.instag ul li {
margin:0;
padding-bottom:0;
border-bottom:none;
}
#instafeed {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0
}
#instafeed img {
    height: auto;
    width: 100%
}
#instafeed a {
    padding: 0;
    margin: 0;
    display: inline-block;
    position: relative
}
#instafeed li {
    width: 12.5%;
    display: inline-block;
    margin: 0!important;
    padding: 0!important;
    background: #fff;
    border: 0
}
#instafeed .insta-likes {
    width: 100%;
    height: 100%;
    margin-top: -100%;
    opacity: 0;
    text-align: center;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.4);
    position: absolute;
    text-shadow: 2px 2px 8px #fff;
    font: normal 400 11px Roboto, sans-serif;
    color: #222;
    line-height: normal;
    transition: all .35s ease-out;
    -o-transition: all .35s ease-out;
    -moz-transition: all .35s ease-out;
    -webkit-transition: all .35s ease-out
}
#instafeed a:hover .insta-likes{opacity:1}
.featureinsta {
margin: auto;
position: relative;
transition: all 1s ease;
height: auto;
overflow: hidden;
}
/* Instagram widget/eklenti Css Bitiş */

2. Adım
Blogger > Tema > HTML'yi Düzenle yolunu izleyip </head> kodunu bulalım ve aşağıdaki kodu bu kodun hemen üzerine yapıştıralım.

jQuery
<script>
//<![CDATA[
// Generated by CoffeeScript 1.3.3
(function(){var e,t;e=function(){function e(e,t){var n,r;this.options={target:"instafeed",get:"popular",resolution:"thumbnail",sortBy:"none",links:!0,mock:!1,useHttp:!1};if(typeof e=="object")for(n in e)r=e[n],this.options[n]=r;this.context=t!=null?t:this,this.unique=this._genKey()}return e.prototype.hasNext=function(){return typeof this.context.nextUrl=="string"&&this.context.nextUrl.length>0},e.prototype.next=function(){return this.hasNext()?this.run(this.context.nextUrl):!1},e.prototype.run=function(t){var n,r,i;if(typeof this.options.clientId!="string"&&typeof this.options.accessToken!="string")throw new Error("Missing clientId or accessToken.");if(typeof this.options.accessToken!="string"&&typeof this.options.clientId!="string")throw new Error("Missing clientId or accessToken.");return this.options.before!=null&&typeof this.options.before=="function"&&this.options.before.call(this),typeof document!="undefined"&&document!==null&&(i=document.createElement("script"),i.id="instafeed-fetcher",i.src=t||this._buildUrl(),n=document.getElementsByTagName("head"),n[0].appendChild(i),r="instafeedCache"+this.unique,window[r]=new e(this.options,this),window[r].unique=this.unique),!0},e.prototype.parse=function(e){var t,n,r,i,s,o,u,a,f,l,c,h,p,d,v,m,g,y,b,w,E,S;if(typeof e!="object"){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"Invalid JSON data"),!1;throw new Error("Invalid JSON response")}if(e.meta.code!==200){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,e.meta.error_message),!1;throw new Error("Error from Instagram: "+e.meta.error_message)}if(e.data.length===0){if(this.options.error!=null&&typeof this.options.error=="function")return this.options.error.call(this,"No images were returned from Instagram"),!1;throw new Error("No images were returned from Instagram")}this.options.success!=null&&typeof this.options.success=="function"&&this.options.success.call(this,e),this.context.nextUrl="",e.pagination!=null&&(this.context.nextUrl=e.pagination.next_url);if(this.options.sortBy!=="none"){this.options.sortBy==="random"?d=["","random"]:d=this.options.sortBy.split("-"),p=d[0]==="least"?!0:!1;switch(d[1]){case"random":e.data.sort(function(){return.5-Math.random()});break;case"recent":e.data=this._sortBy(e.data,"created_time",p);break;case"liked":e.data=this._sortBy(e.data,"likes.count",p);break;case"commented":e.data=this._sortBy(e.data,"comments.count",p);break;default:throw new Error("Invalid option for sortBy: '"+this.options.sortBy+"'.")}}if(typeof document!="undefined"&&document!==null&&this.options.mock===!1){a=e.data,this.options.limit!=null&&a.length>this.options.limit&&(a=a.slice(0,this.options.limit+1||9e9)),n=document.createDocumentFragment(),this.options.filter!=null&&typeof this.options.filter=="function"&&(a=this._filter(a,this.options.filter));if(this.options.template!=null&&typeof this.options.template=="string"){i="",o="",l="",v=document.createElement("div");for(m=0,b=a.length;m<b;m++)s=a[m],u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),o=this._makeTemplate(this.options.template,{model:s,id:s.id,link:s.link,image:u,caption:this._getObjectProperty(s,"caption.text"),likes:s.likes.count,comments:s.comments.count,location:this._getObjectProperty(s,"location.name")}),i+=o;v.innerHTML=i,S=[].slice.call(v.childNodes);for(g=0,w=S.length;g<w;g++)h=S[g],n.appendChild(h)}else for(y=0,E=a.length;y<E;y++)s=a[y],f=document.createElement("img"),u=s.images[this.options.resolution].url,this.options.useHttp||(u=u.replace("http://","//")),f.src=u,this.options.links===!0?(t=document.createElement("a"),t.href=s.link,t.appendChild(f),n.appendChild(t)):n.appendChild(f);document.getElementById(this.options.target).appendChild(n),r=document.getElementsByTagName("head")[0],r.removeChild(document.getElementById("instafeed-fetcher")),c="instafeedCache"+this.unique,window[c]=void 0;try{delete window[c]}catch(x){}}return this.options.after!=null&&typeof this.options.after=="function"&&this.options.after.call(this),!0},e.prototype._buildUrl=function(){var e,t,n;e="https://api.instagram.com/v1";switch(this.options.get){case"popular":t="media/popular";break;case"tagged":if(typeof this.options.tagName!="string")throw new Error("No tag name specified. Use the 'tagName' option.");t="tags/"+this.options.tagName+"/media/recent";break;case"location":if(typeof this.options.locationId!="number")throw new Error("No location specified. Use the 'locationId' option.");t="locations/"+this.options.locationId+"/media/recent";break;case"user":if(typeof this.options.userId!="number")throw new Error("No user specified. Use the 'userId' option.");if(typeof this.options.accessToken!="string")throw new Error("No access token. Use the 'accessToken' option.");t="users/"+this.options.userId+"/media/recent";break;default:throw new Error("Invalid option for get: '"+this.options.get+"'.")}return n=""+e+"/"+t,this.options.accessToken!=null?n+="?access_token="+this.options.accessToken:n+="?client_id="+this.options.clientId,this.options.limit!=null&&(n+="&count="+this.options.limit),n+="&callback=instafeedCache"+this.unique+".parse",n},e.prototype._genKey=function(){var e;return e=function(){return((1+Math.random())*65536|0).toString(16).substring(1)},""+e()+e()+e()+e()},e.prototype._makeTemplate=function(e,t){var n,r,i,s,o;r=/(?:\{{2})([\w\[\]\.]+)(?:\}{2})/,n=e;while(r.test(n))i=n.match(r)[1],s=(o=this._getObjectProperty(t,i))!=null?o:"",n=n.replace(r,""+s);return n},e.prototype._getObjectProperty=function(e,t){var n,r;t=t.replace(/\[(\w+)\]/g,".$1"),r=t.split(".");while(r.length){n=r.shift();if(!(e!=null&&n in e))return null;e=e[n]}return e},e.prototype._sortBy=function(e,t,n){var r;return r=function(e,r){var i,s;return i=this._getObjectProperty(e,t),s=this._getObjectProperty(r,t),n?i>s?1:-1:i<s?1:-1},e.sort(r.bind(this)),e},e.prototype._filter=function(e,t){var n,r,i,s,o;n=[],i=function(e){if(t(e))return n.push(e)};for(s=0,o=e.length;s<o;s++)r=e[s],i(r);return n},e}(),t=typeof exports!="undefined"&&exports!==null?exports:window,t.Instafeed=e}).call(this);
//]]></script>

Not: Blogunuzda jQuery kütüphanesi yüklü değilse aşağıdaki kodu </head> kodunun üzerine yapıştırın.

jQuery
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js' type='text/javascript'/>

3. Adım (1. Yol > Gadget Ekleyerek) 
Sıra geldi Instagram widget/eklentimizi nereye yükleyeceğimize. Bu eklentiyi Blogger > Yerleşim yolunu izleyerekte kurabilirsiniz. Ama bütün temalarda aynı görsel güzelliği sağlamayabilir. Yine de ben iki yolu da anlatacağım. Blogger > Yerleşim > Gadget Ekle yolunu izleyip HTML/JavaScript ekliyoruz. Daha sonra aşağıdaki kodu karşımıza çıkan pencereye yapıştırıyoruz.

HTML
<div id='instafeed'/>
<script type='text/javascript'>//<![CDATA[
var feed = new Instafeed({
 get: 'user',
 userId: 1596470057,
  limit:8,
  sortBy:'random',
accessToken: '1596470057.1677ed0.1e5c7859132f4f418b221a8eb9550b4c',
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></a></li>',
 resolution: 'standard_resolution'
 });
 feed.run();
//]]>
</script></div>

İlk başta anlattığım Instagram Access Token ID'mizi yukarıda mavi ile belirttiğim yerlere yapıştırıyoruz.

userId: Bu kısım Access Token ID'mizin ilk 10 hanesinden ibaret.

ID'mizi gerekli yerlere yazdıktan sonra Instagram Widget/Eklentimiz kullanıma hazır. Lakin en başta da dediğim gibi ben bu şekilde kullanmanızı önermiyorum. Okumaya devam edin...

3. Adım (2. Yol > HTML Kısmına Ekleyerek)
Blogger > Tema > HTML'yi Düzenle yolunu izleyip aşağıdaki kodu Instagram Widget/Eklentisinin blogunuzun üst kısmında görünmesini istiyorsanız </head> kodunun hemen altına, blogunuzun alt kısmında görünmesini istiyorsanız <div class='footer-wrapper'> kodunun hemen üzerine ekleyin.

HTML
<div class='insta-wrap'>
 <b:section class='featureinsta' id='Instagram Widget' maxwidget='1' showaddelement='yes'>
   <b:widget id='HTML208' locked='false' title='My Instagram' type='HTML' version='1'>
     <b:widget-settings>
       <b:widget-setting name='content'>&lt;div id=&#39;instafeed&#39;/&gt;
&lt;script type=&#39;text/javascript&#39;&gt;//&lt;![CDATA[
var feed = new Instafeed({
 get: &#39;user&#39;,
 userId: 1596470057,
  limit:8,
  sortBy:&#39;random&#39;,
accessToken: &#39;1596470057.1677ed0.1e5c7859132f4f418b221a8eb9550b4c&#39;,
template: &#39;&lt;li&gt;&lt;a href=&quot;{{link}}&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;{{image}}&quot; /&gt;&lt;div class=&quot;insta-likes&quot;&gt;&lt;div style=&quot;display: table; vertical-align: middle; height: 100%; width: 100%;&quot;&gt;&lt;span style=&quot;display: table-cell; vertical-align: middle; height: 100%; width: 100%;&quot;&gt;{{likes}} &lt;i class=&quot;fa fa-heart&quot;&gt;&lt;/i&gt;&lt;br/&gt;{{comments}} &lt;i class=&quot;fa fa-comment&quot;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;&#39;,
 resolution: &#39;standard_resolution&#39;
 });
 feed.run();
//]]&gt;
&lt;/script&gt;&lt;/div&gt;</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
   </b:widget>
 </b:section>
</div>

Yukarıda mavi ile belirttiğim kısımlara kendi Instagram Access Token ID'nizi yazın. Benim hoşuma giden görüntü böyle oluyor. Seçim sizin. Güle güle kullanın...

Önizleme

Daha iyi bloglar için...