Sunday, October 16, 2011

Adding Scrolling Twitter Tweets on your Blog or Websites

Twitter , a famous Social Networking  site also marks way of promoting your page links  through Twitter Resources like Follow Button,Tweet Button,Twitter icons/logos and Twitter Widgets.Using these inbuilt codes in Twitter ,you can customize them to your needs if you have a Twitter account.(check later)

How to add a horizontal scroll for Twitter Tweets?


Backup your templates in case you need them

1. Login Blogger and got to your dashboard-> Design-> Edit HTML

2. Using "Ctrl+F" , search for <b:/skin> by expanding the html codes . Before it place the below ajax codes


/* The container for the module */
#twitter {
background: #f1f2f8;

width: 553px; /* Up to you but remember to change the div width below as well if you change it */
padding: 0 10px;

overflow: hidden; /* clearfix */

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

#twitter h5 {
float: left; /* We'll make the heading sit on its own line next to the tweets */
width: 120px; /* Might wanna change this depending on the text in the heading */
margin: 0;
padding: 6px 0; /* I'll set the top and bottom padding here rather than in the container so as not to cut off any text */

font-size: 12px;
color: #4b9fff;
line-height: 1;
}

/* The marquee plug-in turns a marquee element into a div */
#twitter p,
#twitter marquee,
#twitter div {
float: right;
width: 430px; /* Container width - heading width - 10px (for some right padding) */
margin: 0;
padding: 6px 0; /* Again we set the padding in here so as not to cut text */
line-height: 1;
}

/* All the tweets will be links pointing to your page on twitter */
#twitter marquee a,
#twitter div a {
margin: 0 10px 0 0;
color: #333;
text-decoration: none;
}

/* The i is used to display the date of the tweet */
#twitter marquee a i,
#twitter div a i {
font-style: normal;
color: #999;
}


The above codes defines how our feeds would like ,basically the skins.Save it (Important).

3. Now, find and place the below javascript code before it


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/> 
<script src='http://writershome.googlecode.com/files/jquery.marquee.js'/>
<script type='text/javascript'>
//<![CDATA[
var Twitter = {
init: function () {
// Pass in the username you want to display feeds for
this.insertLatestTweets('writershome');
},

// This replaces the <p>Loading...</p> with the tweets
insertLatestTweets: function (writershome) {
var limit = 5; // How many feeds do you want?
var url = 'http://twitter.com/statuses/user_timeline.json?screen_name=' + writershome + '&count=' + limit + '&callback=?';

// Now ajax in the feeds from twitter.com
$.getJSON(url, function (data) {
// We'll start by creating a normal marquee-element for the tweets
var html = '<marquee behavior="scroll" scrollamount="1" direction="left">';

// Loop through all the tweets and create a link for each
for (var i in data) {
html += '<a href="http://twitter.com/' + writershome + '#status_' + data[i].id_str + '">' + data[i].text + ' <i>' + Twitter.daysAgo(data[i].created_at) + '</i></a>';
}

html += '</marquee>';

// Now replace the <p> with our <marquee>-element
$('#twitter p').replaceWith(html);

// The marquee element looks quite shite so we'll use Remy Sharp's plug-in to replace it with a smooth one
Twitter.fancyMarquee();
});
},

// Replaces the marquee-element with a fancy one
fancyMarquee: function () {
// Replace the marquee and do some fancy stuff (taken from remy sharp's website)
$('#twitter marquee').marquee('pointer')
.mouseover(function () {
$(this).trigger('stop');
})
.mouseout(function () {
$(this).trigger('start');
})
.mousemove(function (event) {
if ($(this).data('drag') == true) {
this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
}
})
.mousedown(function (event) {
$(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
})
.mouseup(function () {
$(this).data('drag', false);
});
},

// Takes a date and return the number of days it's been since said date
daysAgo: function (date) {
// TODO: Fix date for IE...
if ($.browser.msie) {
return '1 day ago';
}

var d = new Date(date).getTime();
var n = new Date().getTime();

var numDays = Math.round(Math.abs(n - d) / (1000 * 60 * 60 * 24));
var daysAgo = numDays + ' days ago';

if (numDays == 0) {
daysAgo = 'today';
}
else if (numDays == 1) {
daysAgo = numDays + ' day ago';
}

return daysAgo;
}
};

Twitter.init();
//]]>
</script>

Replace writershome marked in red with your own twitter id in the above code. Again, Save this template(Important)

4. Next, go to the Page elements and add a HTML widget and paste this below code


<div id="twitter"> 
<h5>Latest tweets</h5>
<p>Loading...</p>

<noscript>This feature requires JavaScript</noscript>

</div>

5.Save it and now view your blog ..tada :)

Finally I have learned how to do this in a easy way : D

Febriana Febriana

About Febriana Febriana

Author Description here.. Nulla sagittis convallis. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.