Basic
Basic

Simple page

Corporate
Corporate

corporate

E-shop
E-shop

eshop

Wednesday, 12 June 2013 14:03

How to Display Twitter Posts with the new 1.1 Api - jQuery script

How to Display Twitter Posts with the new 1.1 Api - jQuery script

Many of you might have not heard about the lattest Twitter api changes but not all of you got ready on time right?

We will see how to create an easy plugin in order to draw lattest Twiteer posts from an account.

 

First of all, due to the lattest changes indroduced from Twitter team OAuth is required in order to validate the user or script, more info here: https://dev.twitter.com/docs/auth

You can find the hole procedure here: http://www.slideshare.net/Tweetganic/generate-twitter-applications

 

In a few worlds you need to create a Twitter application on the page: https://dev.twitter.com/apps/new

With your Unique namespace and custom options and once you have your Access Tokens you are good to go!

 

Now all we need in order to get the latest Tweets from our page is use the function GET Statuses / usertimeline https://dev.twitter.com/docs/api/1.1

So we create our custom javascript function named getTweets witch uses in this case jQuery library and codebird framework https://github.com/mynetx/codebird-js

$.fn.getTweets = function(options) {
 var defaults = {
 tweets: 5,
 before: '',
 after: '',
 key: '',
 keysec: '',
 token: '',
 tokensec: ''
 };
var options = $.extend(defaults, options);

 var cb = new Codebird;
 cb.setConsumerKey(options.key, options.keysec);

 cb.setToken(options.token, options.tokensec);

 return this.each(function() {
 var obj = $(this);

 cb.__call(
 'statuses/userTimeline',
 {count: options.tweets},
  function (reply) {
    $.each(reply, function(i, tweet) {
    if(tweet.text !== undefined) {

    var tweethref= tweet.text.split(" ",1);
    $(obj).append(options.before+'
<a class="external" href="/+tweethref+">'+tweet.text+'</a>'+options.after);
    }
 });

 });
});
};

After having this hole function, all we have to do is execute a jquery script on page load placing it where we please.

 
<script type="text/javascript">// ![DATA[
// ![DATA[
$(document).ready(function() { $('#getTweets').getTweets({ tweets: 5,
				key: 'BaqRhGUU7BwlPjO1sQ5H8w',
				keysec: 'tnrLnA53W1cESxkvlr9vkIWqXXXXXXXXXX,
				token: '
				519748211 - DMhkgVPgVKPYq3tYjUVP5Pd6E1OaVth5n2zBZ6Hi ',
				tokensec: '
				J92YlL0O8wjIpUA1kMO4ZhIXXXXXXXXXXX '
 });
 });

// ]]></script>

You can find the hole script attached, enjoy!

Read 10591 times Last modified on Monday, 29 July 2013 17:29
Tagged under
Download attachments:

Related items

More in this category: « Maphighlight script with inversed highlighting support Application Instantiation Error - Joomla »

Leave a comment

back to top