Blogger Son Tweetler Eklentisi

blogger son tweetler eklentisi 2021
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.

Yorumlar

  1. kodları kaydetmeye çalıştığım zaman kayıt işlemi gerçekleştirilmiyor. Bilginize.

    YanıtlaSil
    Yanıtlar
    1. Kullandığınız temadan kaynaklı bir sorun olabilir. Kodların canlı olarak çalıştığını zaferzent.com/p/twitter-gunlugum.html adresinden görebilirsiniz.

      Sil
  2. Merhabalar, JS kodlarını kaydetmeye çalıştığımda bir bölümde hata veriyor ve ilerlemiyor.

    YanıtlaSil
    Yanıtlar
    1. Kodlarda hata alma gibi bir durum yok onun için kod dönüştürücü kullanabilirsin. Fakat Twitter api ile ilgili ya genel bir sorun ya da kısıtlama olduğundan dolayı yine de çalışmayacaktır. Alternatif javascript eklentileri araştırdım fakat onlarda şuanda çalışmıyor.

      Sil

Akış

Blogger Son Tweetler Eklentisi yazısı güncellendi - 19 Haziran 2021

Blogdan 100 adet güncelliğini yitirmiş içerik silindi - 25.06.2021

Blogger Permalink - Kalıcı Bağlantı Ayarları Nasıl Yapılır ? yazısı güncellendi - 29 Haziran 2021

Yazı İçeriği

Kategoriler

Son Yorumlar

Abonelik

En son tema güncellemeleri, özel teklifler ve faydalı kaynaklardan haberdar olmak için e-posta adresinizle abone olun.