Showing posts with label Twitter. Show all posts
Showing posts with label Twitter. Show all posts

Monday, January 25, 2010

7 beautiful twitter icons ( FREE )

7 different cool twitter birds, Very beautiful!By: ArtdesignerDOWNLOAD HERE: http://artdesigner.lv/archives/434

Friday, August 21, 2009

Add a retweet counter on your website with ReTweet.com

Some time ago I wrote a popular post about how to integrate into your web pages a Tweetmeme button that shows the number of retweets received by a single post or page of your blog or website. In the past days a new service, similar to Tweetmeme, has been launched. This service is ReTweet.com that shows popular links being retweeted across Twitter and provides a simple widget that shows the number of retweets received by your posts.


You can quickly integrate into your site this widget, which shows a button with a counter, just in some seconds using two lines of JavaScript code. There are two versions of the button, big and small:

If you are a Blogger user find this code:

<b:includable id='post' var='post'>
<div class='post hentry'>

...and if you want to add the big button add immediately after the last row this code:

<script type="text/javascript">
url = '<data:post.url>';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

If you prefer the smaller button use this code:

<script type="text/javascript">
url = '<data:post.url>';
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>

If you use another blogging platform and want to add a ReTweet.com button on your website the only thing you have to change from the previous code is the value of the var url. Take a look at the official page here.


Add a retweet counter on your posts with TweetmemeHow to install Disqus comments into BloggerImprove the default comment system with Google Friend ConnectAdd TwitThis on your Blogger templateAdd Digg vote button on Blogger Template (update)Add delicious button with counter in your blogger postsPlace Google AdSense below post's title on BloggerAdd StumbleUpon button in your Blogger postsAdd reddit button with counter in your Blogger template Add Technorati blog reaction on your Blogger templateAdd Mixx button on Blogger templateAdd DZone button on Blogger templateAdd Design Float button on Blogger templateSome Blogger Tips you probably don't knowAdd Yahoo! Buzz button on Blogger Template

Thursday, July 23, 2009

Woork's Follow Friday List - Issue 01

Welcome to Woork's Follow Friday List, Issue 01 (23 July 2009). Every week I propose a new list with 10 interesting Twitter users you have to follow! Any suggestion for the next #FollowFriday list? Please Follow me on Twitter!


Ayelet Noff
AKA Blonde 2.0. Lover of social media and help companies understand how to use it to get their message across. Blogger. Addicted to life, travel and caffeine. Twitter Profile | Website

Brian Cray
Internet marketing, User experience design, Web development, Social media, Nearby Tweets & PXtoEM creator, Author, Blogger, Web 2.0, SEO, PHP, jQuery, Apple fan. Twitter Profile | Website

Calvin Lee
Self-Proclaimed Media Ho, Designer Guy and Twitter Addict. In his spare time, Stunt Doubles for the Hulk and a really Nice Guy! Twitter Profile | Website

Collis Ta'eed
Hola, I am Collis, I write about startups at TheNetsetter, and run one called Envato. Twitter Profile | Website

Cristian Vasile
SEO, Tech Geek, Webdesign, CSS, #LoveHelvetica
Twitter Profile

Chris Brogan
President, New Marketing Labs, a social media agency and education company. Twitter Profile | Website

David Perel
I am a designer, blogger, manager, online show host and I love life.
Twitter Profile | Website

Graham Smith
Freelance Logo and Brand Identity designer. Focused on the minimal and typographic. Blogger and writer. 22+ years experience. LoveHelvetica. LoveDogs. Twitter Profile | Website

Mike Lane
Senior UX Designer near Minneapolis, MN with 14 years experience in creative Web and Graphic Design. Twitter Profile | Website

Perry Belcher
Former Airbrush Artist, Hot Dog Vendor, Jeweler, Tattoo Slinger, Bartender and All Around Trouble Maker. Twitter Profile | Website


Any suggestion for the next #FollowFriday list? Please Follow me on Twitter!

Sunday, July 12, 2009

Twitter API: How to create a stream of messages Monitter-like with PHP and jQuery

This tutorial illustrates a very simple way to work with the Twitter API in order to implement a search in the Twitter public timeline and display search results with an animated stream of messages (tweets) similar to Monitter. In this example I used PHP, jQuery and a very useful Twitter Search API for PHP based on the work of David Billingham and actually developed by Ryan Faerman. This implementation is very simple to customize and integrate on your project. The result is something linke this:



You can download the full code here and reuse it for free on your projects.




I suggest you to take also a look at these posts:

- Simple PHP Twitter Search ready to use in your web projects
- Super simple way to work with Twitter API (PHP + CSS)
- Send messages from a PHP page using Twitter API


1. A little introduction

This package contains the following files:




- index.php: page with the search form + search results
- search.php: PHP search
- twitterapi.php: Twitter Search API for PHP
- jquery/jquery-1.3.2.min.js: jQuery framework

How it works? After submission the search form calls an ajax request to the page search.php that returns search results into an array. Each element of the array (every single tweet) appears into the div twitter-results with a nice fade-in effect. I set a delay between each tweet equal 2 seconds (2000 ms).



I suggest you to take a look at Monitter, and download the full code to try this tutorial on your local host. Now, take a look at the code.


2. index.php: HTML code

HTML code is very simple. Copy the following code in the tag <body>:

<div class="twitter_container">
<form id="twittersearch" method="post" action="">
<input name="twitterq" type="text" id="twitterq" />
<button type="submit">Search</button>
</form>
<div id="twitter-results"></div>
</div>

...and add into the tag <head> of the page a link to jQuery:

<script type="text/javascript" src="jquery.js"></script>

The result is a simple search form:





3. search.php

Now copy and paste the following code into search.php:

<?php
include('search.php');
if($_POST['twitterq']){
$twitter_query = $_POST['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();

foreach($results as $result){
echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}
}
?>


$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:

foreach($results as $result){
...
}

... and to get a specific attribute of the array I used this simple code:

$result->name_of_element

Take a look at this post for info about the search on Twitter.


4. index.php: JavaScript Code

Now take a look at the following JavaScript code that enables an ajax request for the search and display results into the page index.php with a fade in effect and a delay between each tweet equal to 2 seconds:

<script type="text/javascript">
$(document).ready(function(){
var twitterq = '';

function displayTweet(){
var i = 0;
var limit = $("#twitter-results > div").size();
var myInterval = window.setInterval(function () {
var element = $("#twitter-results div:last-child");
$("#twitter-results").prepend(element);
element.fadeIn("slow");
i++;
if(i==limit){
window.setTimeout(function () {
clearInterval(myInterval);
});
}
},2000);
}

$("form#twittersearch").submit(function() {
twitterq = $('#twitterq').attr('value');
$.ajax({
type: "POST",
url: "search.php",
cache: false,
data: "twitterq="+ twitterq,
success: function(html){
$("#twitter-results").html(html);
displayTweet();
}
});
return false;
});
});
</script>

This is a very basic implementation you can modify to get a real-time stream of messages for example calling a new ajax request (to search.php) every time the current array with the search results is totally displayed in the page.

That's all. If you have some suggestion please add a comment. Thanks!
You can download the full code of this tutorial here and reuse it on your projects.




Simple PHP Twitter Search ready to use in your web projectsSuper simple way to work with Twitter API (PHP + CSS)Send messages from a PHP page using Twitter API

Saturday, June 27, 2009

Simple PHP Twitter Search ready to use in your web projects

After my previous tutorial that illustrated how to implement a super simple way to work with Twitter API (PHP + CSS) I received a lot of emails from my readers that asked to me to write a post about how to implement a simple Twitter search and display search results in a web page with a custom format. So in this tutorial I want to illustrate how you can implement that using a very useful Twitter Search API for PHP developed by David Billingham.

Using this simple method you can obtain, just in some lines of PHP and CSS code, awesome results like this:



You can download the source code at the following link and reuse it for free in your web projects just in some seconds!




1. A little introduction
In this package you'll find two PHP file:



- index.php: the search page (search form + search results)
- search.php: Twitter Search API for PHP

You have to customize only index.php and your Twitter Search will be ready to be integrated into yor web projects in one minute!


2. Index.php
Take a look at index.php. This page contains a simple search form:

<form action="index.php" method="submit">
<input name="twitterq" type="text" id="twitterq" />
<input name="Search" type="submit" value="Search" />
</form>

...and some lines of PHP code:

<?php
include('search.php');
if($_GET['twitterq']){
$twitter_query = $_GET['twitterq'];
$search = new TwitterSearch($twitter_query);
$results = $search->results();

foreach($results as $result){
echo '<div class="twitter_status">';
echo '<img src="'.$result->profile_image_url.'" class="twitter_image">';
$text_n = toLink($result->text);
echo $text_n;
echo '<div class="twitter_small">';
echo '<strong>From:</strong> <a href="http://www.twitter.com/'.$result->from_user.'">'.$result->from_user.'</a>: ';
echo '<strong>at:</strong> '.$result->created_at;
echo '</div>';
echo '</div>';
}
}
?>


$result is the array that contains search results. To display all elements of the array (search results) I used this simple loop:

foreach($results as $result){
...
}

... and to get a specific attribute of the array I used this simple code:

$result->name_of_element

The structure of a tweet contains the following attributes (take a look at the Twitter API home page for a full list):

[text]: Text of the current tweet
[to_user_id]: User Id
[from_user]: User name
[id]: Tweet Id
[from_user_id]: User id
[source]: Source of the current tweet
[profile_image_url]: User profile image URL
[created_at]: Date of the current tweet

...so, if you want to display the text of a tweet you can use this code:

$result->text

The following line of code get the text of the current tweet and convert a textual link into a clickable link:

$text_n = toLink($result->text);

That's all! Now download the source code, open and upload all files in your test server, open index.php and try to search for something!
If you have some suggestion, please add a comment!




Super simple way to work with Twitter API (PHP + CSS)Send messages from a PHP page using Twitter API

Thursday, June 25, 2009

Super simple way to work with Twitter API (PHP + CSS)

In this post I want to illustrate a super simple way to work with Twitter API and PHP. In particular, this tutorial explains how to get public updates from Twitter public timeline and display them in a web page with a custom style using CSS. In order to get Twitter updates I used Twitterlibphp (a PHP implementation of the Twitter API) that allows you to take advantage of it from within your PHP applications.

Using this simple method you can obtain awesome results like this:


You can download the source code at the following link and reuse it for free in your web projects (you need PHP and APACHE):




1. A little introduction
Twitterlibphp returns Twitter timeline in XML format and with this structure (take a look at the Twitter API home page for a full list of available nodes.):

status
created_at
id
text
source
user
name
screen_name
description
profile_image_url
url
followers_count
...
...

So, if you want to display the user image, user status, and status date in your timeline you have to choose the following nodes:




But how you can display them? It's very simple! Take a look at the following code!


2. PHP code
Create a new file twitter_status.php and copy and paste the following code:

<div class="twitter_container">
<?php
// require the twitter library
require "twitter.lib.php";

// your twitter username and password
$username = "your_username";
$password = "your_password";

// initialize the twitter class
$twitter = new Twitter($username, $password);

// fetch public timeline in xml format
$xml = $twitter->getPublicTimeline();

$twitter_status = new SimpleXMLElement($xml);
foreach($twitter_status->status as $status){
foreach($status->user as $user){
echo '<img src="'.$user->profile_image_url.'" class="twitter_image">';
echo '<a href="http://www.twitter.com/'.$user->name.'">'.$user->name.'</a>: ';
}
echo $status->text;
echo '<br/>';
echo '<div class="twitter_posted_at">Posted at:'.$status->created_at.'</div>';
echo '</div>';
}
?>
<div>


How you can see, the previous code is very simple to understand. The line:

$xml = $twitter->getPublicTimeline();

get the 20 most recent public statuses posted. You can also use other functions such as:

getFriendsTimeline(): returns the 20 most recent statuses posted by the authenticating user and that user's friends.

- getUserTimeline(): returns the 20 most recent statuses posted from the authenticating user.

getReplies(): returns the 20 most recent @replies (status updates prefixed with @username) for the authenticating user.

Take a look at twitter.lib.php for the full list of available functions.

If you want to display different information, for example the source of the update (status->source) use this code:

$status->source

...or if you want to display the number of followers of the current user (follower_count) use this code:

$user->followers_count


3. CSS Code
Now you can customize the style of your timeline using CSS code. I used the following classes but you can customize the look how you prefer:

.twitter_container{

color:#444;
font-size:12px;
width:600px;
margin: 0 auto;

}
.twitter_container a{

color:#0066CC;
font-weight:bold;

}
.twitter_status{

height:60px;
padding:6px;
border-bottom:solid 1px #DEDEDE;

}
.twitter_image{

float:left;
margin-right:14px;
border:solid 2px #DEDEDE;
width:50px;
height:50px;

}
.twitter_posted_at{

font-size:11px;
padding-top:4px;
color:#999;

}


That's all! Download the source code, open twitter_status.php, change $username and $password with your Twitter username and password and upload the file in your test server.
If you have some suggestion, please add a comment!




Simple PHP Twitter Search ready to use in your web projectsSend messages from a PHP page using Twitter APITwitter API: How to create a stream of messages Monitter-like with PHP and jQuery

Friday, March 20, 2009

Add a retweet counter on your posts with Tweetmeme

Twitter is the best service I use daily to drive constantly a big amount of traffic on my blog. Retweets from my followers help me every time I write a new post to become popular on delicious and reach easily delicious home page.
Tweetmeme is a service which help you promote your blog by using the tweetmeme button, a simple and easy way you can integrate twitter into your blog and websites.
The result is a button like this:



If you want to add the tweetmeme button on your blogger template use this simple code:

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

The only thing you have to change from the original code provides by Tweetmeme is set the var tweetmeme_url = <data:post/url>.
That's all! If you have some problem or suggestion please leave a comment. Thanks!


Add a retweet counter on your website with ReTweet.comHow to install Disqus comments into BloggerImprove the default comment system with Google Friend ConnectAdd TwitThis on your Blogger templateAdd Digg vote button on Blogger Template (update)Add delicious button with counter in your blogger postsPlace Google AdSense below post's title on BloggerAdd StumbleUpon button in your Blogger postsAdd reddit button with counter in your Blogger template Add Technorati blog reaction on your Blogger templateAdd Mixx button on Blogger templateAdd DZone button on Blogger templateAdd Design Float button on Blogger templateSome Blogger Tips you probably don't knowAdd Yahoo! Buzz button on Blogger Template

Monday, January 19, 2009

30+ Interesting Twitter services and applications

Are you a Twitter addicted? Take a look at this list with 30+ interesting Twitter services and applications which simplify your life with Twitter adding photos on your profile, creating tiny polls, monitoring the twittersphere and much more!

If you want to suggest other interesting links, please add a comment.

Twitter Search
Search Twitter in realtime - see what the world is doing right now.

TwitterTroll
TwitterTroll is the only real-time Twitter search engine providing the best way to find new twitter friends.

TweetScan
In the innovative world of Microblogging, one site aims to organize it all. Tweet Scan searches Twitter, identi.ca and other Laconica-based sites with more being added all the time.

Twittercal
It's a free service that connects your Twitter account to your Google Calendar. Add events in a snap from your favorite Twitter client.

Monitter
Monitter is a twitter monitor, it lets you "monitter" the twitter world for a set of 3 keywords and watch what people are saying.

Twilert
Twilert is a Twitter application that lets you receive regular email updates of tweets containing your brand, product, service, well any keyword you like really.

Twingly
Twingly.com is a micro-blog search engine featuring a spam-free, faceted, social search for the global blogosphere.

Twitter Grader
Measure the power and authority of your twitter profile.

TwitSay
Give your Twitter Account a Voice! Record up to 10 Seconds using your mobile phone.

Tweet2Tweet
Put two Twitter screen names into the boxes below to see their conversation via @ replies!

Twitterfone
Send message to Twitter using voice!

Twitter Ratio
Your Twitter Ratio is the ratio of your followers to friends (or people who you follow). It is measured with the TFF Ratio (Twitter Follower-Friend Ratio). The higher the ratio, the more Twitter heat you pack.

Happytweets
Happytweets is a measuring stick for how positive, or happy, a particular Tweep is. Enter the Twitter username for you or one of your buddies, click the "get happy" button, and you'll find out how happy your Tweets are.

StrawPoll
Create your tiny polls in 140 characters or less!

Qwitter
Qwitter e-mails you when someone stops following you on Twitter.

Tweetree
Tweetree puts your Twitter stream in a tree so you can see the posts people are replying to in context. It also pulls in lots of external content like twitpic photos, youtube videos and more, so that you can see them right in your stream without having to click through every link your friends post.

Twitthis
TwitThis is an easy way for people to send Twitter messages about your blog post or website. Read this post about how to add Twitthis on your Blogger Template.

Tweet This
TweetThis is a Wordpress plugin that adds a Twitter icon to every post and page, so your readers can share your blog entries on their Twitter accounts with ease.

Twitterfeed
Offers to tweet the last posts published in a blog via the RSS feed. twitterfeed can post directly to twitter, identi.ca, custom laconica installations, and via Ping.fm, simultaneously to the many services supported by Ping.fm.

TweetSnap
Personalised Twitter badges, images and banners for forums, MySpace and websites.

Twitxr
With Twitxr you can share pictures from your mobile phone, automatically publish them on social networks and photosharing sites, tell your friends where you are and what you are doing, automatically add your location to your pictures and status updates.

Twitpic
TwitPic lets you share photos on Twitter. You can post pictures to TwitPic from your phone, our API, or through the site itself.

BubbleTweet
With BubbleTweet you can add a pop-up video message to your twitter page in seconds.

TwitterFriends
TwitterFriends help you to see your relevant network and some stats about your tweeting behavior compared to other Twitter users.

Tweetr
Tweetr is a Twitter client for Mac and PC. Send files to your friends, but just dragging any file on to Tweetr. Tweetr will automatically upload your file and when it is done will provide a short url to send to your friends (please do not upload copyrighted material).

Twitterrific
Twitterrific is a fun application for MAC that lets you both read and publish posts or "tweets" to the Twitter community website. The application's user interface is clean, concise and designed to take up a minimum of real estate on your Mac's desktop.

Twhirl
Twhirl is a desktop client for social software such as Twitter, Friendfeed, identi.ca, or seesmic.

TwitterFox
TwitterFox is a Firefox extension that notifies you of your friends' tweets on Twitter.

Tweenky
Tweenky is a web-based micro-blogging ("tweet") client that currently supports Twitter and Identi.ca/Laconi.ca.

TweetCube
Share your files via Twitter with TweetCube.

Twingr
Twingr is nota a Twitter services, but you can create a microblogging community (twitter-like) and communicate with friends and other people that share your same interests.


Do you have any interesting links to suggest? Add a comment, thanks!

Sunday, January 11, 2009

Add TwitThis on your Blogger template and drive more traffic on your website

TwitThis is an easy way for people to send Twitter messages about your blog post or website. This tutorial illustrates a simple way to add a TwitThis link on each post of your Blogger template. I suggest you to try it because it's very useful and drive a lot of traffic on your website if you have a good Twitter network.

To add TwitThis on your Blogger template you can using the code you can find here. That code uses JavaScript. If you want use a simpler way to add it use this alternative.

HTML code
Sign-in in your Blogger dashboard and click on Layout Tab > Modify HTML. Select expand widgets option and copy the following code where you want in the posts section (for example below the post title).

<a expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&amp;title=" + data:post.title'>Twit This!</a>

Copy and paste the code exactly how it is in the box above! Don't remove spaces!

CSS code
If you like my TwitThis link (), add this class in your CSS file and use it in the previous link:

.share-twitthis{
background:url(http://tinyurl.com/ay2jsc) 10px top no-repeat;
padding-left:42px;
font-size:11px;
line-height:18px;
}

That's all!

Add a retweet counter on your website with ReTweet.comAdd a retweet counter on your posts with TweetmemeHow to install Disqus comments into BloggerImprove the default comment system with Google Friend ConnectAdd Digg vote button on Blogger Template (update)Add delicious button with counter in your blogger postsPlace Google AdSense below post's title on BloggerAdd StumbleUpon button in your Blogger postsAdd reddit button with counter in your Blogger template Add Technorati blog reaction on your Blogger templateAdd Mixx button on Blogger templateAdd DZone button on Blogger templateAdd Design Float button on Blogger templateSome Blogger Tips you probably don't knowAdd Yahoo! Buzz button on Blogger Template