08.11.2017

Twenty Seventeen (Yirmi Onyedi) Blogger Teması son uyarlamış olduğum bir WordPress teması. Twenty Seventeen isminden de anlaşılacağı üzere meşhur WordPress blog sisteminin, WordPress geliştiricileri tarafından her yıl seri şekilde çıkardığı temalardan sonuncusu.
Aslında bu temayı uyarlayalı çok zaman olmasına rağmen ne kullanmaya ne de paylaşmaya fırsat bulamadım. Bir de tabi tema kodları ile ilgili yaşadığım sorunlar da bu sürenin uzamasına neden oldu.
Tema mobil uyumlu olup elimden geldiğince bire bir (yorum formu tasarımı dahil) entegre etmeye çalıştım. Fakat küçük eskiklikler ve hatalar bulunabilir.
Sabit sayfaları tam genişlikte kullanmak için
- Menü bileşini otomatik olup anlamadığım sebepten dolayı yerleşim sayfasında görünmüyor. Fakat blogger hesabına giriş yapılmış ise blog/site üzerinden (şaağıdaki resimde olduğu gibi) sayfalar eklenip çıkarılabiliyor.

Tema Önizleme Adresi : http://blogger2017tema.blogspot.com/
Tema İndirme Adresi : https://yadi.sk/d/Qk3IKtKw3PXZJ4
Twenty Seventeen (Yirmi Onyedi) Blogger Teması

Twenty Seventeen (Yirmi Onyedi) Blogger Teması son uyarlamış olduğum bir WordPress teması. Twenty Seventeen isminden de anlaşılacağı üzere meşhur WordPress blog sisteminin, WordPress geliştiricileri tarafından her yıl seri şekilde çıkardığı temalardan sonuncusu.
Aslında bu temayı uyarlayalı çok zaman olmasına rağmen ne kullanmaya ne de paylaşmaya fırsat bulamadım. Bir de tabi tema kodları ile ilgili yaşadığım sorunlar da bu sürenin uzamasına neden oldu.
Tema mobil uyumlu olup elimden geldiğince bire bir (yorum formu tasarımı dahil) entegre etmeye çalıştım. Fakat küçük eskiklikler ve hatalar bulunabilir.
Twenty Seventeen Teması ile ilgili notlar :
Sabit sayfaları tam genişlikte kullanmak için
<!-- For Full Width Page -->
<b:if cond='data:blog.url == "http://blogger2017tema.blogspot.com/p/full-width.html"'>
<style>#primary{width:100% !important} aside{display:none !important}</style>
</b:if>
kod bloğunu bulup turuncu olan yere tam genişlikte kullanılacak sayfa bağlantısı eklenmesi gerekiyor.- Menü bileşini otomatik olup anlamadığım sebepten dolayı yerleşim sayfasında görünmüyor. Fakat blogger hesabına giriş yapılmış ise blog/site üzerinden (şaağıdaki resimde olduğu gibi) sayfalar eklenip çıkarılabiliyor.

Tema Önizleme Adresi : http://blogger2017tema.blogspot.com/
Tema İndirme Adresi : https://yadi.sk/d/Qk3IKtKw3PXZJ4
10.09.2017

Blogger'da etiketleri listelemek için Etiketler gadget'i (Blogger tabiliriyle) kullanılabiliyor. Fakat gadget desteği olmayan temalarda veya istenilen yerde ve sayfalarda etiketleri listelemek için alternatiflere yönelmek gerekiyor. Bu alternatifler birisi de javascript kullanarak etiketleri istenilen yerde listelemek.
Bizzat bloğumda test etmiş olduğum aşağıdaki kod ile etiketler sabit sayfalarda da listeleniyor. Kodun eksik bir yönü bulunuyor o da etikete ait kaç adet yazının olduğunu göstermemesi. Onun haricinde aşağıdaki kodlar nerede kullanılmak isteniyorsa oraya eklenerek etiketler listelenebilir ve vermiş olduğum diğer CSS kodları isteğe göre değiştirilip, geliştirilebilir.
CSS kodları
Blogger'da Gadget Kullanmadan Etiketleri Listeleme

Blogger'da etiketleri listelemek için Etiketler gadget'i (Blogger tabiliriyle) kullanılabiliyor. Fakat gadget desteği olmayan temalarda veya istenilen yerde ve sayfalarda etiketleri listelemek için alternatiflere yönelmek gerekiyor. Bu alternatifler birisi de javascript kullanarak etiketleri istenilen yerde listelemek.
Bizzat bloğumda test etmiş olduğum aşağıdaki kod ile etiketler sabit sayfalarda da listeleniyor. Kodun eksik bir yönü bulunuyor o da etikete ait kaç adet yazının olduğunu göstermemesi. Onun haricinde aşağıdaki kodlar nerede kullanılmak isteniyorsa oraya eklenerek etiketler listelenebilir ve vermiş olduğum diğer CSS kodları isteğe göre değiştirilip, geliştirilebilir.
Blogger Etiketleri Listeleme Kodu
<script type='text/javascript'>
//<![CDATA[
function showLabels(json) {
var label = json.feed.category;
document.write(' <div id="labels">');
document.write('<ul>');
for (var i = 0; i < label.length; i++) {
document.write('<li class="' + label[i].term + '"><a href="/search/label/' + label[i].term + '?max-results=9" data-filter=".' + label[i].term + '">' + label[i].term + '</a></li>');
}
document.write('<span class="show_ico icon-remove"/>');
document.write('</ul>');
document.write('</div><div style="clear:both"></div>');
}
document.write('<scr' + 'ipt src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=showLabels"><\/scr' + 'ipt>');
//]]>
</script>
CSS kodları
#labels{margin-bottom:20px; display:block}
#labels ul {list-style:none; margin:0; padding:0; text-align:left;}
#labels ul li {list-style:none; text-align:left; float:left; padding:5px; border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,.05);
background-color: #ffffff; color: #353535; border: 1px solid rgba(0,0,0,.15); margin:3px; font-size:12px}
30.08.2017

WampServer ile ilgili kurulum hatasına geçmeden önce hakkında bilgi sahibi olmayanlar için özetle WampServer yazılımının ne işe yaradığından bahsetmekte fayda var. WampServer PHP geliştiriciler, kodlayanlar, severler için hazırlanmış içerisinde MySQL, Apache ve PHP paketlerini barındıran PHP alt yapılı projeleri hazırlayıp test etmeye yarayan bir yazılım.
WampServer'ı işletim sistemi türüne göre 32bit veya 64 bit indirip kurmak için wampserver.com/en/ * Kurulum hatası almadan önce hazırlamış olduğum bu yazıya bakmakta fayda var.
WampServer kurulumunda VCRUNTIME140.dll hatası neden oluşur ve nasıl çözülür ?
WampServer kurulumunda VCRUNTIME140.dll hatası sadece Windows 10'a özgü olmayıp diğer Windows sürümlerinde de karşılaşılan bir sorun. Fakat diğer Windows sürümlerinde bazı paketlere ihtiyaç duyulmadığından veya WampServer'ın 32bit sürümü kurulduğundan Windows 10'a nazaran daha az meydana geliyor. Sorunun temelinde ise Microsoft Visual C++ paketlerinin eksik yüklenmesinde yatıyor. En azından ben hepsini yükleyerek sorunu o şekilde gideriyorum.
Özetle sorunu yaşamamak veya yaşanan bu sorunu çözmek için alttaki resimde olduğu gibi 2008,2010,2012,2013,2015'in hem 32bit hem de 64bit sürümleri yüklenmeli.

Bütün sürümlere ait indirme bağlantılarını Microsoft'un indirme sayfalarında liste halinde bulamadığımdan google'da aratarak hepsini bir araya toplayıp yazıya ekledim. WampServer hatalı bir şekilde yüklendi ve WampServer ikonu turuncu renkte kalıyorsa yüklemeyi kaldırıp Microsoft Visual C++ paketlerinin tümünü yükledikten sonra WampServer'ı tekrar yüklemek gerekiyor.
Microsoft Visual C++ indirme bağlantıları
Microsoft Visual C++ 2008 Redistributable Package (x86)
https://www.microsoft.com/en-us/download/details.aspx?id=29
Microsoft Visual C++ 2008 Redistributable Package (x64)
https://www.microsoft.com/en-us/download/details.aspx?id=15336
Microsoft Visual C++ 2010 Redistributable Package (x86)
https://www.microsoft.com/en-us/download/details.aspx?id=5555
Microsoft Visual C++ 2010 Redistributable Package (x64)
https://www.microsoft.com/en-us/download/details.aspx?id=14632
Visual C++ Redistributable for Visual Studio 2012 Update 4 x86-x64
https://www.microsoft.com/en-us/download/details.aspx?id=30679
Visual C++ Redistributable Packages for Visual Studio 2013 x86-x64
https://www.microsoft.com/en-us/download/details.aspx?id=40784
Visual C++ Redistributable Packages for Visual Studio 2015 x86-x64
https://www.microsoft.com/tr-TR/download/details.aspx?id=48145
* 2012, 2013 ve 2015 bağlantılarında hem x86 hem de x64 bulunmakta olup iki farklı sürümlerini de indirmek gerekiyor.
Windows 10 WampServer VCRUNTIME140.dll Kurulum Hatası ve Çözümü

WampServer ile ilgili kurulum hatasına geçmeden önce hakkında bilgi sahibi olmayanlar için özetle WampServer yazılımının ne işe yaradığından bahsetmekte fayda var. WampServer PHP geliştiriciler, kodlayanlar, severler için hazırlanmış içerisinde MySQL, Apache ve PHP paketlerini barındıran PHP alt yapılı projeleri hazırlayıp test etmeye yarayan bir yazılım.
WampServer'ı işletim sistemi türüne göre 32bit veya 64 bit indirip kurmak için wampserver.com/en/ * Kurulum hatası almadan önce hazırlamış olduğum bu yazıya bakmakta fayda var.
WampServer kurulumunda VCRUNTIME140.dll hatası neden oluşur ve nasıl çözülür ?
WampServer kurulumunda VCRUNTIME140.dll hatası sadece Windows 10'a özgü olmayıp diğer Windows sürümlerinde de karşılaşılan bir sorun. Fakat diğer Windows sürümlerinde bazı paketlere ihtiyaç duyulmadığından veya WampServer'ın 32bit sürümü kurulduğundan Windows 10'a nazaran daha az meydana geliyor. Sorunun temelinde ise Microsoft Visual C++ paketlerinin eksik yüklenmesinde yatıyor. En azından ben hepsini yükleyerek sorunu o şekilde gideriyorum.
Özetle sorunu yaşamamak veya yaşanan bu sorunu çözmek için alttaki resimde olduğu gibi 2008,2010,2012,2013,2015'in hem 32bit hem de 64bit sürümleri yüklenmeli.

Bütün sürümlere ait indirme bağlantılarını Microsoft'un indirme sayfalarında liste halinde bulamadığımdan google'da aratarak hepsini bir araya toplayıp yazıya ekledim. WampServer hatalı bir şekilde yüklendi ve WampServer ikonu turuncu renkte kalıyorsa yüklemeyi kaldırıp Microsoft Visual C++ paketlerinin tümünü yükledikten sonra WampServer'ı tekrar yüklemek gerekiyor.
Microsoft Visual C++ indirme bağlantıları
Microsoft Visual C++ 2008 Redistributable Package (x86)
https://www.microsoft.com/en-us/download/details.aspx?id=29
Microsoft Visual C++ 2008 Redistributable Package (x64)
https://www.microsoft.com/en-us/download/details.aspx?id=15336
Microsoft Visual C++ 2010 Redistributable Package (x86)
https://www.microsoft.com/en-us/download/details.aspx?id=5555
Microsoft Visual C++ 2010 Redistributable Package (x64)
https://www.microsoft.com/en-us/download/details.aspx?id=14632
Visual C++ Redistributable for Visual Studio 2012 Update 4 x86-x64
https://www.microsoft.com/en-us/download/details.aspx?id=30679
Visual C++ Redistributable Packages for Visual Studio 2013 x86-x64
https://www.microsoft.com/en-us/download/details.aspx?id=40784
Visual C++ Redistributable Packages for Visual Studio 2015 x86-x64
https://www.microsoft.com/tr-TR/download/details.aspx?id=48145
* 2012, 2013 ve 2015 bağlantılarında hem x86 hem de x64 bulunmakta olup iki farklı sürümlerini de indirmek gerekiyor.
17.08.2017

Olist blogger teması yine farklı bir blog platformundan blogger'a uyarladığım temalardan bir diğeri. Tema ismini ve platformunu (Ghost veya Jekyll) tam hatırlamamakla birlikte yapımcısının github.com/orderedlist adresindeki insan olduğunu düşündüğüm ve orijinal ismini list'li birşey olarak hatırladığım için ben de Olist ismini vermek istedim. Tabi ki temanın orijinal sürümü şuanki halinden şablon yapısı dışında farklı bir haldeydi.
- Yazılarda kullandığım tarih/zaman biçimi Twitter'dan hatırladığımız zaman biçimini kullandım (x gün önce, x ay önce gibi). Tarih/zaman biçimi ile alakalı yazı da şurada → Blogger Yazı Tarih Biçimini Twitter Tarzı ( x Zaman Önce ) Biçimine Dönüştürmek.
- - Bu zaman biçiminde sorun yaşamamak için şablona jquery kütüphanesi dahil edilmeli ve saat dilimi ayarlaması yapılması gerekiyor. Saat dilimi ayarı için Blogger → Ayarlar → Dil ve biçimlendirme sayfasından Saat diliminin (GMT+03:00) İstanbul yapılması gerekiyor.
- Yazı başlıklarının yanında bulunan ikonlar için → Blogger Yazı Etiketine Özel İkon Gösterme
- Resmi sosyal ağ paylaşım butonları için ise → Blogger Resmi Sosyal Paylaşım Butonları başlıklı yazıdan yararlandım.
Olist Tema İndirme Adresi : Olist Blogger Teması İndir
* Prensip gereği uyarladığım temalarda şifrelenmiş footer bağlantısı kullanmıyorum. İsteğe bağlı olarak silinebilir fakat kenarda köşede bu yazıya bağlantı verilirse mutlu olurum 😊
Olist Blogger Teması

Olist blogger teması yine farklı bir blog platformundan blogger'a uyarladığım temalardan bir diğeri. Tema ismini ve platformunu (Ghost veya Jekyll) tam hatırlamamakla birlikte yapımcısının github.com/orderedlist adresindeki insan olduğunu düşündüğüm ve orijinal ismini list'li birşey olarak hatırladığım için ben de Olist ismini vermek istedim. Tabi ki temanın orijinal sürümü şuanki halinden şablon yapısı dışında farklı bir haldeydi.
Olist blogger teması ile ilgili genel bilgiler
- Temada ikonlar için Font Awesome Icons kütüphanesinden ve sosyal ağ profil ikonlarının renklendirilmesinde brandcolors.net adresinden yararlandım.- Yazılarda kullandığım tarih/zaman biçimi Twitter'dan hatırladığımız zaman biçimini kullandım (x gün önce, x ay önce gibi). Tarih/zaman biçimi ile alakalı yazı da şurada → Blogger Yazı Tarih Biçimini Twitter Tarzı ( x Zaman Önce ) Biçimine Dönüştürmek.
- - Bu zaman biçiminde sorun yaşamamak için şablona jquery kütüphanesi dahil edilmeli ve saat dilimi ayarlaması yapılması gerekiyor. Saat dilimi ayarı için Blogger → Ayarlar → Dil ve biçimlendirme sayfasından Saat diliminin (GMT+03:00) İstanbul yapılması gerekiyor.
- Yazı başlıklarının yanında bulunan ikonlar için → Blogger Yazı Etiketine Özel İkon Gösterme
- Resmi sosyal ağ paylaşım butonları için ise → Blogger Resmi Sosyal Paylaşım Butonları başlıklı yazıdan yararlandım.
Olist Tema İndirme Adresi : Olist Blogger Teması İndir
* Prensip gereği uyarladığım temalarda şifrelenmiş footer bağlantısı kullanmıyorum. İsteğe bağlı olarak silinebilir fakat kenarda köşede bu yazıya bağlantı verilirse mutlu olurum 😊
13.08.2017

Daha önce Twitter'daki son tweetleri blogger tabanlı bloglarımızda göstermek için, Twitter'ın yeni Api'si ile yapılmış olan fakat biraz karmaşık olan bir eklenti paylaşmıştım. Bir kaç gün önce yapımcının eklentiyi güncellemesiyle birlikte kodların çalışmadığını farkettim. Ayrıca güncelleme ile birlikte artık sadece twitter kullanıcı ismi ile son tweetleri göstermek daha kolay hale getirilmiş.
Kodları varsayılan yapısından daha sade hale getirerek ve yalın bir halde paylaştım. Gerekli CSS özelleştirmeleri isteğe göre yapılabilir. Jason Mayes'in hazırladığı eklentinin orijinal haline codepen.io/jasonmayes/pen/Ioype ulaşılabilir.
</head> öncesine eklenmesi gereken javascript kodları :
Javascript kodları şablona eklenirken blogger kod dönüştürücü aracı ile dönüştürülüp eklenmelidir.
Notlar :
Kodların en alt kısmında yer alan ayarların açıklamaları aşağıdaki şekilde. Önemli olan iki ayar kullanıcı adı ve kaç adet tweet gösterileceği. Diğer ayarlar isteğe göre düzenlenebilir.
CSS ayarları :
Tweetlerin gösterileceği element. Nerede ve ne şekilde kullanılacaksa oraya eklenmeli.
Not: Yazı 10 Mart 2019 tarihinde güncellenmiş olup kodlar aktif olarak çalışmaktadır. Kodları canlı olarak test etmek için zaferzent.com/p/twitter-gunlugum.html sayfasına bakabilirsiniz.
20.05.2021 Güncelleme:
- Kodların önizleme adresi güncellenmiştir.
- Kodlar aktif çalışmaktadır, fakat tarayıcınızda adblock tarzı reklam engelleme eklentileri varsa kod çalışmayacaktır.
19.06.2021 Güncelleme
- Test edilerek çalışır durumda olan kodlar eklenmiştir.
- *Not : Tarayıcınızda reklam engelleyici gibi eklentiler varsa çalışmayacaktır.
Blogger Son Tweetler Eklentisi

Daha önce Twitter'daki son tweetleri blogger tabanlı bloglarımızda göstermek için, Twitter'ın yeni Api'si ile yapılmış olan fakat biraz karmaşık olan bir eklenti paylaşmıştım. Bir kaç gün önce yapımcının eklentiyi güncellemesiyle birlikte kodların çalışmadığını farkettim. Ayrıca güncelleme ile birlikte artık sadece twitter kullanıcı ismi ile son tweetleri göstermek daha kolay hale getirilmiş.
Kodları varsayılan yapısından daha sade hale getirerek ve yalın bir halde paylaştım. Gerekli CSS özelleştirmeleri isteğe göre yapılabilir. Jason Mayes'in hazırladığı eklentinin orijinal haline codepen.io/jasonmayes/pen/Ioype ulaşılabilir.
</head> öncesine eklenmesi gereken javascript kodları :
Javascript kodları şablona eklenirken blogger kod dönüştürücü aracı ile dönüştürülüp eklenmelidir.
<script>(function(root,factory){if(typeof define==='function'&&define.amd){define([],factory);}else if(typeof exports==='object'){module.exports=factory();}else{factory();}}(this,function(){var domNode='';var maxTweets=20;var parseLinks=true;var queue=[];var inProgress=false;var printTime=true;var printUser=true;var formatterFunction=null;var supportsClassName=true;var showRts=true;var customCallbackFunction=null;var showInteractionLinks=true;var showImages=false;var useEmoji=false;var targetBlank=true;var lang='en';var permalinks=true;var dataOnly=false;var script=null;var scriptAdded=false;function handleTweets(tweets){if(customCallbackFunction===null){var x=tweets.length;var n=0;var element=document.getElementById(domNode);var html='<ul>';while(n<x){html+='<li>'+tweets[n]+'</li>';n++;}
html+='</ul>';element.innerHTML=html;}else{customCallbackFunction(tweets);}}
function strip(data){return data.replace(/<b[^>]*>(.*?)<\/b>/gi,function(a,s){return s;}).replace(/class="(?!(tco-hidden|tco-display|tco-ellipsis))+.*?"|data-query-source=".*?"|dir=".*?"|rel=".*?"/gi,'');}
function targetLinksToNewWindow(el){var links=el.getElementsByTagName('a');for(var i=links.length-1;i>=0;i--){links[i].setAttribute('target','_blank');}}
function getElementsByClassName(node,classname){var a=[];var regex=new RegExp('(^| )'+classname+'( |$)');var elems=node.getElementsByTagName('*');for(var i=0,j=elems.length;i<j;i++){if(regex.test(elems[i].className)){a.push(elems[i]);}}
return a;}
function extractImageUrl(image_data){if(image_data!==undefined&&image_data.innerHTML.indexOf('data-srcset')>=0){var data_src=image_data.innerHTML.match(/data-srcset="([A-z0-9%_\.-]+)/i)[0];return decodeURIComponent(data_src).split('"')[1];}}
var twitterFetcher={fetch:function(config){if(config.maxTweets===undefined){config.maxTweets=20;}
if(config.enableLinks===undefined){config.enableLinks=true;}
if(config.showUser===undefined){config.showUser=true;}
if(config.showTime===undefined){config.showTime=true;}
if(config.dateFunction===undefined){config.dateFunction='default';}
if(config.showRetweet===undefined){config.showRetweet=true;}
if(config.customCallback===undefined){config.customCallback=null;}
if(config.showInteraction===undefined){config.showInteraction=true;}
if(config.showImages===undefined){config.showImages=false;}
if(config.useEmoji===undefined){config.useEmoji=false;}
if(config.linksInNewWindow===undefined){config.linksInNewWindow=true;}
if(config.showPermalinks===undefined){config.showPermalinks=true;}
if(config.dataOnly===undefined){config.dataOnly=false;}
if(inProgress){queue.push(config);}else{inProgress=true;domNode=config.domId;maxTweets=config.maxTweets;parseLinks=config.enableLinks;printUser=config.showUser;printTime=config.showTime;showRts=config.showRetweet;formatterFunction=config.dateFunction;customCallbackFunction=config.customCallback;showInteractionLinks=config.showInteraction;showImages=config.showImages;useEmoji=config.useEmoji;targetBlank=config.linksInNewWindow;permalinks=config.showPermalinks;dataOnly=config.dataOnly;var head=document.getElementsByTagName('head')[0];if(script!==null){head.removeChild(script);}
script=document.createElement('script');script.type='text/javascript';if(config.list!==undefined){script.src='https://syndication.twitter.com/timeline/list?'+'callback=__twttrf.callback&dnt=false&list_slug='+
config.list.listSlug+'&screen_name='+config.list.screenName+'&suppress_response_codes=true&lang='+(config.lang||lang)+'&rnd='+Math.random();}else if(config.profile!==undefined){script.src='https://syndication.twitter.com/timeline/profile?'+'callback=__twttrf.callback&dnt=false'+'&screen_name='+config.profile.screenName+'&suppress_response_codes=true&lang='+(config.lang||lang)+'&rnd='+Math.random();}else if(config.likes!==undefined){script.src='https://syndication.twitter.com/timeline/likes?'+'callback=__twttrf.callback&dnt=false'+'&screen_name='+config.likes.screenName+'&suppress_response_codes=true&lang='+(config.lang||lang)+'&rnd='+Math.random();}else{script.src='https://cdn.syndication.twimg.com/widgets/timelines/'+
config.id+'?&lang='+(config.lang||lang)+'&callback=__twttrf.callback&'+'suppress_response_codes=true&rnd='+Math.random();}
head.appendChild(script);}},callback:function(data){if(data===undefined||data.body===undefined){inProgress=false;if(queue.length>0){twitterFetcher.fetch(queue[0]);queue.splice(0,1);}
return;}
if(!useEmoji){data.body=data.body.replace(/(<img[^c]*class="Emoji[^>]*>)|(<img[^c]*class="u-block[^>]*>)/g,'');}
if(!showImages){data.body=data.body.replace(/(<img[^c]*class="NaturalImage-image[^>]*>|(<img[^c]*class="CroppedImage-image[^>]*>))/g,'');}
if(!printUser){data.body=data.body.replace(/(<img[^c]*class="Avatar"[^>]*>)/g,'');}
var div=document.createElement('div');div.innerHTML=data.body;if(typeof(div.getElementsByClassName)==='undefined'){supportsClassName=false;}
function swapDataSrc(element){var avatarImg=element.getElementsByTagName('img')[0];avatarImg.src=avatarImg.getAttribute('data-src-2x');return element;}
var tweets=[];var authors=[];var times=[];var images=[];var rts=[];var tids=[];var permalinksURL=[];var x=0;if(supportsClassName){var tmp=div.getElementsByClassName('timeline-Tweet');while(x<tmp.length){if(tmp[x].getElementsByClassName('timeline-Tweet-retweetCredit').length>0){rts.push(true);}else{rts.push(false);}
if(!rts[x]||rts[x]&&showRts){tweets.push(tmp[x].getElementsByClassName('timeline-Tweet-text')[0]);tids.push(tmp[x].getAttribute('data-tweet-id'));if(printUser){authors.push(swapDataSrc(tmp[x].getElementsByClassName('timeline-Tweet-author')[0]));}
times.push(tmp[x].getElementsByClassName('dt-updated')[0]);permalinksURL.push(tmp[x].getElementsByClassName('timeline-Tweet-timestamp')[0]);if(tmp[x].getElementsByClassName('timeline-Tweet-media')[0]!==undefined){images.push(tmp[x].getElementsByClassName('timeline-Tweet-media')[0]);}else{images.push(undefined);}}
x++;}}else{var tmp=getElementsByClassName(div,'timeline-Tweet');while(x<tmp.length){if(getElementsByClassName(tmp[x],'timeline-Tweet-retweetCredit').length>0){rts.push(true);}else{rts.push(false);}
if(!rts[x]||rts[x]&&showRts){tweets.push(getElementsByClassName(tmp[x],'timeline-Tweet-text')[0]);tids.push(tmp[x].getAttribute('data-tweet-id'));if(printUser){authors.push(swapDataSrc(getElementsByClassName(tmp[x],'timeline-Tweet-author')[0]));}
times.push(getElementsByClassName(tmp[x],'dt-updated')[0]);permalinksURL.push(getElementsByClassName(tmp[x],'timeline-Tweet-timestamp')[0]);if(getElementsByClassName(tmp[x],'timeline-Tweet-media')[0]!==undefined){images.push(getElementsByClassName(tmp[x],'timeline-Tweet-media')[0]);}else{images.push(undefined);}}
x++;}}
if(tweets.length>maxTweets){tweets.splice(maxTweets,(tweets.length-maxTweets));authors.splice(maxTweets,(authors.length-maxTweets));times.splice(maxTweets,(times.length-maxTweets));rts.splice(maxTweets,(rts.length-maxTweets));images.splice(maxTweets,(images.length-maxTweets));permalinksURL.splice(maxTweets,(permalinksURL.length-maxTweets));}
var arrayTweets=[];var x=tweets.length;var n=0;if(dataOnly){while(n<x){arrayTweets.push({tweet:tweets[n].innerHTML,author:authors[n]?authors[n].innerHTML:'Unknown Author',author_data:{profile_url:authors[n]?authors[n].querySelector('[data-scribe="element:user_link"]').href:null,profile_image:authors[n]?authors[n].querySelector('[data-scribe="element:avatar"]').getAttribute('data-src-1x'):null,profile_image_2x:authors[n]?authors[n].querySelector('[data-scribe="element:avatar"]').getAttribute('data-src-2x'):null,screen_name:authors[n]?authors[n].querySelector('[data-scribe="element:screen_name"]').title:null,name:authors[n]?authors[n].querySelector('[data-scribe="element:name"]').title:null},time:times[n].textContent,timestamp:times[n].getAttribute('datetime').replace('+0000','Z').replace(/([\+\-])(\d\d)(\d\d)/,'$1$2:$3'),image:extractImageUrl(images[n]),rt:rts[n],tid:tids[n],permalinkURL:(permalinksURL[n]===undefined)?'':permalinksURL[n].href});n++;}}else{while(n<x){if(typeof(formatterFunction)!=='string'){var datetimeText=times[n].getAttribute('datetime');var newDate=new Date(times[n].getAttribute('datetime').replace(/-/g,'/').replace('T',' ').split('+')[0]);var dateString=formatterFunction(newDate,datetimeText);times[n].setAttribute('aria-label',dateString);if(tweets[n].textContent){if(supportsClassName){times[n].textContent=dateString;}else{var h=document.createElement('p');var t=document.createTextNode(dateString);h.appendChild(t);h.setAttribute('aria-label',dateString);times[n]=h;}}else{times[n].textContent=dateString;}}
var op='';if(parseLinks){if(targetBlank){targetLinksToNewWindow(tweets[n]);if(printUser){targetLinksToNewWindow(authors[n]);}}
if(printUser){op+='<div class="user">'+strip(authors[n].innerHTML)+'</div>';}
op+='<p class="tweet">'+strip(tweets[n].innerHTML)+' ';if(printTime){if(permalinks){op+='<a class="time" href="'+permalinksURL[n]+'">'+times[n].getAttribute('aria-label')+'</a></p>';}else{op+='<p class="timePosted">'+
times[n].getAttribute('aria-label')+'</p>';}}}else{if(tweets[n].textContent){if(printUser){op+='<p class="user">'+authors[n].textContent+'</p>';}
op+='<p class="tweet">'+tweets[n].textContent+'</p>';if(printTime){op+='<p class="timePosted">'+times[n].textContent+'</p>';}}else{if(printUser){op+='<p class="user">'+authors[n].textContent+'</p>';}
op+='<p class="tweet">'+tweets[n].textContent+'</p>';if(printTime){op+='<p class="timePosted">'+times[n].textContent+'</p>';}}}
if(showInteractionLinks){op+='<p class="interact"><a href="https://twitter.com/intent/'+'tweet?in_reply_to='+tids[n]+'" class="twitter_reply_icon"'+
(targetBlank?' target="_blank">':'>')+'Reply</a><a href="https://twitter.com/intent/retweet?'+'tweet_id='+tids[n]+'" class="twitter_retweet_icon"'+
(targetBlank?' target="_blank">':'>')+'Retweet</a>'+'<a href="https://twitter.com/intent/favorite?tweet_id='+
tids[n]+'" class="twitter_fav_icon"'+
(targetBlank?' target="_blank">':'>')+'Favorite</a></p>';}
if(showImages&&images[n]!==undefined&&extractImageUrl(images[n])!==undefined){op+='<div class="media">'+'<img src="'+extractImageUrl(images[n])+'" alt="Image from tweet" />'+'</div>';}
if(showImages){arrayTweets.push(op);}else if(!showImages&&tweets[n].textContent.length){arrayTweets.push(op);}
n++;}}
handleTweets(arrayTweets);inProgress=false;if(queue.length>0){twitterFetcher.fetch(queue[0]);queue.splice(0,1);}}};window.__twttrf=twitterFetcher;window.twitterFetcher=twitterFetcher;return twitterFetcher;}));
var configProfile = {
"profile": {"screenName": 'TWITTERKULLANICIADI'},
"domId": 'tweets',
"maxTweets": 20,
"enableLinks": true,
"showUser": false,
"showTime": true,
"showImages": false,
"lang": 'tr'
};
twitterFetcher.fetch(configProfile);
</script>
Notlar :
Kodların en alt kısmında yer alan ayarların açıklamaları aşağıdaki şekilde. Önemli olan iki ayar kullanıcı adı ve kaç adet tweet gösterileceği. Diğer ayarlar isteğe göre düzenlenebilir.
var configProfile = {
"profile": {"screenName": 'webgunlugu'}, // Twitter Kullanıcı adı
"domId": 'tweets', // Tweetlerin gösterileceği div ID'si
"maxTweets": 20, // Gösterilecek tweet sayısı
"enableLinks": true, // Tweetlerdeki bağlantıların tıklanabilir olup/olmaması
"showUser": false, // Kullanıcı bilgileri gösterme/gizleme
"showTime": true, // Tweet zamanı gösterme/gizleme
"showImages": false, // Tweetlerdeki fotoğrafların gösterme/gizleme
"showInteraction":false, // Retweet, Reply, Retweet, Favorite gibi bağlantıları göster/gizle
"lang": 'tr' // Tweet zaman dili
};
CSS ayarları :
<style>
#tweets{overflow:auto}
#tweets .interact{display:none}
#tweets .tweet{padding:10px;}
#tweets .tweet a{text-decoration:none; color:#fff; }
#tweets .tweet a.time{border-bottom: 1px dashed #fff; cursor:pointer; background: #f7f7f7;
padding: 3px;
border-radius: 5px;
font-size: 13px;
}
#tweets ul, ul li{list-style:none; padding:0; margin:0; }
#tweets .tweet{float:left; font-family: "Segoe UI",Arial,sans-serif;}
</style>
Tweetlerin gösterileceği element. Nerede ve ne şekilde kullanılacaksa oraya eklenmeli.
<div id="tweets"></div>
Not: Yazı 10 Mart 2019 tarihinde güncellenmiş olup kodlar aktif olarak çalışmaktadır. Kodları canlı olarak test etmek için zaferzent.com/p/twitter-gunlugum.html sayfasına bakabilirsiniz.
20.05.2021 Güncelleme:
- Kodların önizleme adresi güncellenmiştir.
- Kodlar aktif çalışmaktadır, fakat tarayıcınızda adblock tarzı reklam engelleme eklentileri varsa kod çalışmayacaktır.
19.06.2021 Güncelleme
- Test edilerek çalışır durumda olan kodlar eklenmiştir.
- *Not : Tarayıcınızda reklam engelleyici gibi eklentiler varsa çalışmayacaktır.