Website বা Blog এ “Flying Twitter Bird” যুক্ত করুন| javascript Tutorial

আসসালামুআলাইকুম। প্রিয় বন্ধুরা কেমন আছেন সবাই? আশা রাখি আল্লাহর মেহেরবাণীতে ভালো আছেন। ব্লগ নিয়ে চেইন টিউন করার ইচ্ছা থাকলেও আমার থেকে অনেক যোগ্য টিউনাররা পূর্বেই তা করেছেন। তাই ঐ দিকে আর হাত বাড়ালাম না, আজকে ভাসমান Flying Twitter Bird শেয়ার বাটন কিভাবে ব্লগে যোগ করা হয় তা আমরা শিখবো(অনেকেই হয়তো পূর্বে থেকেই জানেন)। ব্লগে ভাসমান শেয়ার বাটন যোগ করলে সৌন্দর্য দারুন বৃদ্ধি পায় এবং পছন্দের Post গুলো ব্লগের ভিজিটররা সহজে Twitter সামাজিক সাইটে এ শেয়ার করতে পারে। Page scroll করার সময় এটি সর্বদা দৃশ্যমান থাকবে। তাই দেখতে অনেক সুন্দর এবং ব্লগকে আকর্ষনীয় করে তুলে। এর Demo দেখতে এখানে ক্লিক করুন

নিচের Code গুলো গুলো Copyকরুন।
<script type=”text/javascript”>
<!– Change twitterAccount=”Your user name”  –>
var twitterAccount = “learn24bd”;
function tripleflapInit(a){if(typeof a==”undefined”){window.setTimeout(“tripleflapInit(1)”,250);return}if(!showOnMobile&&typeof navigator.userAgent==”string”&&is_mobile(navigator.userAgent)){return}if(!is_utf8(tweetThisText))tweetThisText=utf8_encode(tweetThisText);
var b=”http://twitter.com/home?status=”+escape(tweetThisText);if(twitterAccount==””)showTweet=false;
var c=twitterAccount!=””?”http://twitter.com/”+twitterAccount:otherPageOrFeed!=false?otherPageOrFeed:”http://twitter.com/”;
var d=document.createElement(“a”);d.setAttribute(“id”,”tBird”);d.setAttribute(“href”,c);d.setAttribute(“target”,”_blank”);d.style.display=”block”;d.style.position=”absolute”;d.style.left=birdPosX+”px”;d.style.top=birdPosY+”px”;d.style.width=spriteWidth+”px”;d.style.height=spriteHeight+”px”;d.style.background=”url(‘”+birdSprite+”‘) no-repeat transparent”;d.style.backgroundPosition=”-0px -0px”;d.style.zIndex=”947″;d.onmouseover=function(){scareTheBird();showButtonsTimeout=window.setTimeout(“showButtons(0,”+windowWidth+”,”+windowHeight+”)”,400);window.clearTimeout(hideButtonsTimeout)};d.onmouseout=function(){hideButtonsTimeout=window.setTimeout(“hideButtons()”,50)};document.body.appendChild(d);
var e=document.createElement(“a”);e.setAttribute(“id”,”tBirdLtweet”);e.setAttribute(“href”,b);e.setAttribute(“target”,”_blank”);e.setAttribute(“title”,”tweet this”);e.style.display=”none”;e.style.position=”absolute”;e.style.left=”0px”;e.style.top=”-100px”;e.style.background=”url(‘”+birdSprite+”‘) no-repeat transparent”;e.style.opacity=”0″;e.style.filter=”alpha(opacity=0)”;e.style.backgroundPosition=”-64px -0px”;e.style.width=”58px”;e.style.height=”30px”;e.style.zIndex=”951″;e.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};e.onmouseout=function(){hideButtonsTimeout=window.setTimeout(“hideButtons()”,50)};document.body.appendChild(e);
var f=e.cloneNode(false);f.setAttribute(“id”,”tBirdLfollow”);f.setAttribute(“href”,c);f.setAttribute(“title”,”follow “+(twitterAccount?”@”+twitterAccount:”me”));f.style.backgroundPosition=”-64px -30px”;f.style.width=”58px”;f.style.height=”20px”;f.style.zIndex=”952″;f.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};f.onmouseout=function(){hideButtonsTimeout=window.setTimeout(“hideButtons()”,50)};document.body.appendChild(f);if(showTweet==true){var g=document.createElement(“div”);g.setAttribute(“id”,”tBirdStatxLow”);g.style.display=”none”;g.style.position=”absolute”;g.style.left=”0px”;g.style.top=”-100px”;g.style.background=”transparent”;g.style.opacity=”0″;g.style.filter=”alpha(opacity=0)”;g.style.width=”192px”;g.style.zIndex=”955″;g.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};g.onmouseout=function(){hideButtonsTimeout=window.setTimeout(“hideButtons()”,50)};
var h=g.cloneNode(false);h.setAttribute(“id”,”tBirdStatxUpr”);h.onmouseover=function(){window.clearTimeout(hideButtonsTimeout)};h.onmouseout=function(){hideButtonsTimeout=window.setTimeout(“hideButtons()”,50)};var i=document.createElement(“div”);i.setAttribute(“id”,”tBirdStatxArrLow”);i.style.background=”url(‘”+birdSprite+”‘) no-repeat transparent”;i.style.backgroundPosition=”-64px -50px”;i.style.width=”32px”;i.style.height=”9px”;i.style.margin=”0 0 -1px 56px”;i.style.position=”relative”;i.style.zIndex=”957″;
var j=i.cloneNode(false);j.setAttribute(“id”,”tBirdStatxArrUpr”);j.style.backgroundPosition=”-96px -50px”;j.style.margin=”-1px 0 0 60px”;
var k=document.createElement(“div”);k.setAttribute(“id”,”tBirdStatxInLow”);k.style.background=”#fbfcfc”;k.style.border=”1px solid #555″;k.style.MozBorderRadius=”6px”;k.style.borderRadius=”6px”;k.style.padding=”3px 5px”;k.style.fontSize=”11px”;k.style.fontFamily=”Arial”;k.style.textAlign=”left”;k.style.position=”relative”;k.style.zIndex=”956″;k.innerHTML=”loading…”;
var l=k.cloneNode(false);l.setAttribute(“id”,”tBirdStatxInUpr”);l.innerHTML=”loading…”;g.appendChild(i);g.appendChild(k);h.appendChild(l);h.appendChild(j);document.body.appendChild(g);document.body.appendChild(h)}var m=window.setTimeout(“animateSprite(0,0,0,0,null,true)”,spriteAniSpeed);window.onscroll=recheckposition;if(showTweet==true)loadStatusText();recheckposition()}function animateSprite(a,b,c,d,e,f){if(typeof d!=”number”||d>c-b)d=0;document.getElementById(“tBird”).style.backgroundPosition=”-“+Math.round((b+d)*spriteWidth)+”px -“+spriteHeight*a+”px”;if(f==true)return;if(typeof e!=”number”)e=spriteAniSpeed;timeoutAnimation=window.setTimeout(“animateSprite(“+a+”,”+b+”,”+c+”,”+(d+1)+”,”+e+”)”,e)}function animateSpriteAbort(){window.clearTimeout(timeoutAnimation)}function recheckposition(a){if(a!=true)a=false;if(birdIsFlying)return false;windowHeight=getWindowHeight();windowWidth=getWindowWidth();if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;if(typeof window.pageYOffset==”number”)scrollPos=window.pageYOffset;else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;birdPosY=parseInt(document.getElementById(“tBird”).style.top);birdPosX=parseInt(document.getElementById(“tBird”).style.left);if(scrollPos+birdSpaceVertical>=birdPosY||scrollPos+windowHeight-spriteHeight<birdPosY||a){hideButtons();elemPosis=chooseNewTarget();if(elemPosis.length<1){elemType=null;elemNr=null;elemTop=scrollPos+Math.round(Math.random()*(windowHeight-spriteHeight));elemLeft=Math.round(Math.random()*(windowWidth-spriteWidth));elemWidth=0}else{newTarget=elemPosis[Math.round(Math.random()*(elemPosis.length-1))];elemType=newTarget[0];elemNr=newTarget[1];elemTop=newTarget[2];elemLeft=newTarget[3];elemWidth=newTarget[4]}targetTop=elemTop-spriteHeight;targetLeft=Math.round(elemLeft-spriteWidth/2+Math.random()*elemWidth);if(targetLeft>windowWidth-spriteWidth-24)targetLeft=windowWidth-spriteWidth-24;else if(targetLeft<0)targetLeft=0;birdIsFlying=true;flyFromTo(birdPosX,birdPosY,targetLeft,targetTop,0)}}function chooseNewTarget(){var a=new Array;var b=scrollPos+spriteHeight+birdSpaceVertical;var c=scrollPos+windowHeight-birdSpaceVertical;for(var d=0;d<targetElems.length;d++){var e=targetElems[d];var f=document.getElementsByTagName(e).length;for(var g=0;g<f;g++){var h=document.getElementsByTagName(e)[g].offsetTop;
var i=document.getElementsByTagName(e)[g].offsetLeft;
var j=document.getElementsByTagName(e)[g].offsetWidth;if(h<=b||h>=c||j<minElemWidth||i<0){continue}a[a.length]=new Array(e,g,h,i,j);if(a.length>=neededElems4random)return a}}return a}function flyFromTo(a,b,c,d,e,f){justStarted=e==0;e+=e>birdSpeed/2?birdSpeed:Math.round(e==0?birdSpeed/4:birdSpeed/2);solvedFuture=e+(e>birdSpeed/2?birdSpeed:Math.round(birdSpeed/2));distanceX=c-a;distanceY=d-b;distance=Math.sqrt(distanceX*distanceX+distanceY*distanceY);solvPerc=Math.abs(1/distance*e);solvDistX=Math.round(distanceX*solvPerc);solvDistY=Math.round(distanceY*solvPerc);solvPercFuture=Math.abs(1/distance*solvedFuture);solvDistXFuture=Math.round(distanceX*solvPercFuture);solvDistYFuture=Math.round(distanceY*solvPercFuture);if(typeof f!=”string”){f=null;angle=(distanceX!=0?Math.atan(-distanceY/distanceX)/Math.PI*180:90)+(distanceX<0?180:0);if(angle<0)angle+=360;if(angle<45)f=”o”;else if(angle<135)f=”n”;else if(angle<202.5)f=”w”;else if(angle<247.5)f=”sw”;else if(angle<292.5)f=”s”;else if(angle<337.5)f=”so”;else f=”o”}if(Math.abs(solvDistXFuture)>=Math.abs(distanceX)&&Math.abs(solvDistYFuture)>=Math.abs(distanceY)){animateSpriteAbort();switch(f){case”so”:animateSprite(1,0,0,0,null,true);break;case”sw”:animateSprite(1,2,2,0,null,true);break;case”s”:animateSprite(0,2,2,0,null,true);break;case”n”:animateSprite(4,0,0,0,null,true);break;case”o”:animateSprite(1,0,0,0,null,true);break;case”w”:animateSprite(1,2,2,0,null,true);break;default:animateSprite(0,0,0,0,null,true)}timeoutAnimation=window.setTimeout(“animateSprite(0,0,0,0,null,true)”,spriteAniSpeed)}if(Math.abs(solvDistX)>=Math.abs(distanceX)&&Math.abs(solvDistY)>=Math.abs(distanceY)){solvDistX=distanceX;solvDistY=distanceY;birdIsFlying=false;window.setTimeout(“recheckposition()”,500)}else{if(justStarted){animateSpriteAbort();switch(f){case”so”:animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout(“animateSprite(1,1,1,0,null,true)”,spriteAniSpeed);break;case”sw”:animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout(“animateSprite(1,3,3,0,null,true)”,spriteAniSpeed);break;case”s”:animateSprite(0,2,2,0,null,true);timeoutAnimation=window.setTimeout(“animateSprite(0,3,3,0,null,true)”,spriteAniSpeed);break;case”n”:timeoutAnimation=window.setTimeout(“animateSprite(4,0,3,0,”+spriteAniSpeedSlow+”)”,1);break;case”o”:animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout(“animateSprite(2,0,3,0,”+spriteAniSpeedSlow+”)”,spriteAniSpeed);break;case”w”:animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout(“animateSprite(3,0,3,0,”+spriteAniSpeedSlow+”)”,spriteAniSpeed);break;default:animateSprite(0,0,0,0,null,true)}}timeoutFlight=window.setTimeout(“flyFromTo(“+a+”,”+b+”,”+c+”,”+d+”,”+e+”,'”+f+”‘)”,50)}hideButtons();document.getElementById(“tBird”).style.left=a+solvDistX+”px”;document.getElementById(“tBird”).style.top=b+solvDistY+birdSetUp+”px”}function scareTheBird(a){newTS=(new Date).getTime();if(scareTheBirdLastTime<newTS-scareTheBirdTime){scareTheBirdCount=1;scareTheBirdLastTime=newTS}else{scareTheBirdCount++;if(scareTheBirdCount>=scareTheBirdMouseOverTimes){scareTheBirdCount=0;scareTheBirdLastTime=0;recheckposition(true)}}}function showButtons(a,b,c){birdPosY=parseInt(document.getElementById(“tBird”).style.top);birdPosX=parseInt(document.getElementById(“tBird”).style.left);if(a==0&&document.getElementById(“tBirdLtweet”).style.display==”block”)a=100;if(birdIsFlying)a=0;opacity=Math.round(a*15);if(opacity<0)opacity=0;if(opacity>100)opacity=100;if(birdPosX<b-300||birdPosX<b/2){buttonPosX1=birdPosX+spriteWidth-15;buttonPosX2=birdPosX+spriteWidth-10}else{buttonPosX1=birdPosX+16-parseInt(document.getElementById(“tBirdLtweet”).style.width);buttonPosX2=birdPosX+11-parseInt(document.getElementById(“tBirdLfollow”).style.width)}buttonPosY1=birdPosY-0;buttonPosY2=birdPosY-0+parseInt(document.getElementById(“tBirdLtweet”).style.height);document.getElementById(“tBirdLtweet”).style.left=buttonPosX1+”px”;document.getElementById(“tBirdLtweet”).style.top=buttonPosY1+”px”;document.getElementById(“tBirdLtweet”).style.display=”block”;document.getElementById(“tBirdLtweet”).style.opacity=opacity/100;document.getElementById(“tBirdLtweet”).style.filter=”alpha(opacity=”+opacity+”)”;document.getElementById(“tBirdLfollow”).style.left=buttonPosX2+”px”;document.getElementById(“tBirdLfollow”).style.top=buttonPosY2+”px”;document.getElementById(“tBirdLfollow”).style.display=”block”;document.getElementById(“tBirdLfollow”).style.opacity=opacity/100;document.getElementById(“tBirdLfollow”).style.filter=”alpha(opacity=”+opacity+”)”;if(showTweet==true){if(typeof window.pageYOffset==”number”)scrollPos=window.pageYOffset;else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;if(birdPosX<64)boxMoveX=64-birdPosX;else if(birdPosX>b-64)boxMoveX=b-birdPosX-64;else boxMoveX=0;txtBoxPosX=Math.round(birdPosX+spriteWidth/2-parseInt(document.getElementById(“tBirdStatxLow”).style.width)/2+boxMoveX);if(birdPosY<c/2+scrollPos){txtBoxPosY=birdPosY+spriteHeight;document.getElementById(“tBirdStatxLow”).style.left=txtBoxPosX+”px”;document.getElementById(“tBirdStatxLow”).style.top=txtBoxPosY+”px”;document.getElementById(“tBirdStatxLow”).style.display=”block”;document.getElementById(“tBirdStatxLow”).style.opacity=opacity/100;document.getElementById(“tBirdStatxLow”).style.filter=”alpha(opacity=”+opacity+”)”}else{txtBoxPosY=birdPosY-document.getElementById(“tBirdStatxUpr”).offsetHeight;document.getElementById(“tBirdStatxUpr”).style.left=txtBoxPosX+”px”;document.getElementById(“tBirdStatxUpr”).style.top=txtBoxPosY+”px”;document.getElementById(“tBirdStatxUpr”).style.display=”block”;document.getElementById(“tBirdStatxUpr”).style.opacity=opacity/100;document.getElementById(“tBirdStatxUpr”).style.filter=”alpha(opacity=”+opacity+”)”}}if(opacity>=100)return;a++;showButtonsTimeout=window.setTimeout(“showButtons(“+a+”,”+b+”,”+c+”)”,60)}function hideButtons(){window.clearTimeout(showButtonsTimeout);document.getElementById(“tBirdLtweet”).style.display=”none”;document.getElementById(“tBirdLtweet”).style.opacity=”0″;document.getElementById(“tBirdLtweet”).style.filter=”alpha(opacity=0)”;document.getElementById(“tBirdLfollow”).style.display=”none”;document.getElementById(“tBirdLfollow”).style.opacity=”0″;document.getElementById(“tBirdLfollow”).style.filter=”alpha(opacity=0)”;if(showTweet==true){document.getElementById(“tBirdStatxLow”).style.display=”none”;document.getElementById(“tBirdStatxLow”).style.opacity=”0″;document.getElementById(“tBirdStatxLow”).style.filter=”alpha(opacity=0)”;document.getElementById(“tBirdStatxUpr”).style.display=”none”;document.getElementById(“tBirdStatxUpr”).style.opacity=”0″;document.getElementById(“tBirdStatxUpr”).style.filter=”alpha(opacity=0)”}}function loadStatusText(){param=”tuac=”+twitterAccount;var a=window.XMLHttpRequest?new XMLHttpRequest:window.ActiveXObject?new ActiveXObject(“Microsoft.XMLHTTP”):false;if(!a){document.getElementById(“tBirdStatxInLow”).innerHTML=”Error: could not create Ajax-request”}a.open(“POST”,twitterfeedreader,true);a.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);a.setRequestHeader(“Content-Length”,param.length);a.setRequestHeader(“Connection”,”close”);a.onreadystatechange=function(){if(a.readyState==4){resp=a.status==200?a.responseText:”Error: Ajax-request failed,HTTP-Code “+a.status;resp=resp.replace(/<a /g,'<a style=”‘+hyperlinkStyle+'” ‘);document.getElementById(“tBirdStatxInLow”).innerHTML=resp;document.getElementById(“tBirdStatxInUpr”).innerHTML=resp}};a.send(param)}function getWindowWidth(){if(typeof window.innerWidth==”number”)ww=window.innerWidth;else if(document.documentElement&&document.documentElement.clientWidth)ww=document.documentElement.clientWidth;else if(document.body&&document.body.clientWidth)ww=document.body.clientWidth;else ww=800;return ww}function getWindowHeight(){if(typeof window.innerHeight==”number”)wh=window.innerHeight;else if(document.documentElement&&document.documentElement.clientHeight)wh=document.documentElement.clientHeight;else if(document.body&&document.body.clientHeight)wh=document.body.clientHeight;else wh=450;return wh}function is_mobile(a){return a.toLowerCase().search(/(iphone|ipod|opera mini|windows ce|windows phone|palm|blackberry|android|symbian|series60|samsung|nokia|playstation portable|htc[\-_]|up\.browser|profile\/midp|[1-4][0-9]{2}x[1-4][0-9]{2})/)>-1}function utf8_encode(a){a=a.replace(/\r\n/g,”\n”);utf8str=””;for(n=0;n<a.length;n++){c=a.charCodeAt(n);if(c<128){utf8str+=String.fromCharCode(c)}else if(c>127&&c<2048){utf8str+=String.fromCharCode(c>>6|192);utf8str+=String.fromCharCode(c&63|128)}else{utf8str+=String.fromCharCode(c>>12|224);utf8str+=String.fromCharCode(c>>6&63|128);utf8str+=String.fromCharCode(c&63|128)}}return utf8str}function is_utf8(a){strlen=a.length;for(i=0;i<strlen;i++){ord=a.charCodeAt(i);if(ord<128)continue;else if((ord&224)===192&&ord>193)n=1;else if((ord&240)===224)n=2;else if((ord&248)===240&&ord<245)n=3;else return false;for(c=0;c<n;c++)if(++i===strlen||(a.charCodeAt(i)&192)!==128)return false}return true}if(typeof twitterAccount!=”string”)var twitterAccount=””;if(typeof tweetThisText!=”string”||tweetThisText==””)var tweetThisText=document.title+” “+document.URL;if(typeof showTweet!=”boolean”)var showTweet=false;var tweetthislink=null;if(typeof otherPageOrFeed!=”string”||otherPageOrFeed==””)var otherPageOrFeed=false;var birdSprite=”http://3.bp.blogspot.com/-fpgSNHUcoS4/T_-ZGlGVsVI/AAAAAAAAAfE/eFBmY3qbWeQ/s1600/flying.twitter.png”;var twitterfeedreader=””;var hyperlinkStyle=”color:#27b;text-decoration:none;”;var birdSpeed=12;var birdSpaceVertical=16;var birdSetUp=2;var spriteWidth=64;var spriteHeight=64;var spriteAniSpeed=72;var spriteAniSpeedSlow=Math.round(spriteAniSpeed*1.75);var targetElems=new Array(“img”,”hr”,”input”,”textarea”,”button”,”select”,”table”,”td”,”div”,”ul”,”ol”,”li”,”h1″,”h2″,”h3″,”h4″,”p”,”code”,”object”,”a”,”b”,”strong”,”span”);var neededElems4random=10;var minElemWidth=Math.round(spriteWidth/3);var scareTheBirdMouseOverTimes=4;var scareTheBirdTime=1e3;var showOnMobile=false;var birdIsFlying=false;var scrollPos=0;var windowHeight=getWindowHeight();var windowWidth=getWindowWidth();if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;var birdPosX=Math.round(Math.random()*(windowWidth-spriteWidth+200)-200);var birdPosY=-2*spriteHeight;var timeoutAnimation=false;var timeoutFlight=false;var showButtonsTimeout=null;var hideButtonsTimeout=null;var scareTheBirdLastTime=0;var scareTheBirdCount=0
</script><!– Use this code external sheet –>

<!– Flying Twitter Bird Ends –>

<script type=”text/javascript”>
var title = document.title;
var url = document.URL;
var tweetThisText = title + ” ” + url;
tripleflapInit();
</script>

Paste করে Save করুন।

শুধু টুইটার একাউন্ট ব্যবহারকারী নাম পরিবর্তন করুন।

E – bidyutbiswas@outlook.com

About বিদ্যুৎ বিশ্বাস

একটি উত্তর দিন