Custom Twitter Feed in Webpage using Twitter API and Javascript
You can easily integrate live tweets of user/company using Twitter API. For this purpose, use the following two javascripts.
Please note that these both javascripts will need to be inserted before the closing body tag (</body>). The first script has two functions who are responsible for processing the JSON returned by the second script. You will need to replace "your_user_or_company.json" of second javascript with your desired user or company name what you want to get the tweets from. For example, if you want to get tweets from google on twitter then the your javascript url will be
http://twitter.com/statuses/user_timeline/google.json?callback=twitterCallback2&count=3
Here 'twitterCallback2' is the callback function where the data will be thrown to process further once we get data by the above url and 'count' represents the number of tweets will be returned by that javascript. So, the above url will return a json containing 3 tweets from the google on twitter and will throw them to callback function to generate the html for you to use in your webpage.
You can customize blogger.js script as you want to view in webpage. You can modify the script generated html code or add your custom html code inside it. The script has a way inside to set the area where you want to display the feed/tweets on your webpage. For this, you will need is to set the area in the code of blogger.js and you will get the response in that area once the page is hit in the browser.
The area can be div element, or paragraph i,e. area made by html element. But it's good to use <ul> tag for the container of the tweets and <li> tags for the individual tweets. That will represent/render your data visually good. Say you want to display the tweets in a ul area named "tweet_list", then the html code is
<body>
<ul id="tweet_list"></ul>
http://twitter.com/javascripts/blogger.js
http://twitter.com/statuses/user_timeline/your_user_or_company.json?callback=twitterCallback2&count=3
</body>
blogger.js:
Are you getting the twitterCallback2 empty just like twitterCallback2[] ?
then use the below url instead of the second javascript url because the second url is deprecated and might not work for sometimes.
Ok. Now you should have the twitterCallback2 with tweets in JSON format.
Here is a working source code/package which can help you to code in the same way to use in your webpage.
Hope that helps. Good luck!
http://twitter.com/javascripts/blogger.js
http://twitter.com/statuses/user_timeline/your_user_or_company.json?callback=twitterCallback2&count=3
Please note that these both javascripts will need to be inserted before the closing body tag (</body>). The first script has two functions who are responsible for processing the JSON returned by the second script. You will need to replace "your_user_or_company.json" of second javascript with your desired user or company name what you want to get the tweets from. For example, if you want to get tweets from google on twitter then the your javascript url will be
http://twitter.com/statuses/user_timeline/google.json?callback=twitterCallback2&count=3
Here 'twitterCallback2' is the callback function where the data will be thrown to process further once we get data by the above url and 'count' represents the number of tweets will be returned by that javascript. So, the above url will return a json containing 3 tweets from the google on twitter and will throw them to callback function to generate the html for you to use in your webpage.
You can customize blogger.js script as you want to view in webpage. You can modify the script generated html code or add your custom html code inside it. The script has a way inside to set the area where you want to display the feed/tweets on your webpage. For this, you will need is to set the area in the code of blogger.js and you will get the response in that area once the page is hit in the browser.
The area can be div element, or paragraph i,e. area made by html element. But it's good to use <ul> tag for the container of the tweets and <li> tags for the individual tweets. That will represent/render your data visually good. Say you want to display the tweets in a ul area named "tweet_list", then the html code is
<body>
<ul id="tweet_list"></ul>
http://twitter.com/javascripts/blogger.js
http://twitter.com/statuses/user_timeline/your_user_or_company.json?callback=twitterCallback2&count=3
</body>
blogger.js:
Update the following code so that the id name is same as the ul area id. For this example:
document.getElementById('tweet_list').innerHTML = statusHTML.join('');
Are you getting the twitterCallback2 empty just like twitterCallback2[] ?
then use the below url instead of the second javascript url because the second url is deprecated and might not work for sometimes.
https://api.twitter.com/1/statuses/user_timeline.json?screen_name=MendonLeasing&count=3&callback=twitterCallback2
Ok. Now you should have the twitterCallback2 with tweets in JSON format.
Here is a working source code/package which can help you to code in the same way to use in your webpage.
Hope that helps. Good luck!
Comments
Post a Comment