Building a Tweetblast

The amount of users on Twitter has increased dramatically recently! It is now a great way to get your product noticed, talked about (and if your very popular) trending. People like MacHeist often do a Tweetblast to spread the word about something new and by participating you get something in return. In the tutorial you will see how to build an AJAX-ed twitter tweetblast that will search twitter for a hash tag, and if it has been found it will then show a thanks slide. There are many things you can adapt this script to do, such as putting the users username in the database to make sure a user can only Tweet once, finding that users pictures and show all the users that have tweeted so far or just sending an email to say thanks.
For this we just need an index page, some nice CSS, JavaScript for the AJAX, and PHP to search through Twitter using Twitters’ search API.

Live Demo
Download

Index page

The index page will have 3 slides, they will be

Entering the data/errors slide
Searching slide
Thanks slide

and we will animate them in and out depending on the information that we get from out PHP script. Here is the layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Tweet Blast!</title>

		<!-- Start of CSS -->
 	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/main.css" />
		<!-- Start of JS -->
 	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
</head>

<div id="wrap">
	<div id="header">
		<p>You should follow:
			<a class="brenelz" href="http://twitter.com/brenelz">@brenelz</a> and
			<a class="alex" href="http://twitter.com/alexanderbor">@AlexanderBor</a>
		</p>
	</div>

		<div id="blaster">
			<div id="slide1" class="slide">

										<!-- What we want the user to tweet
											We are going to search for the #tag but
											# needs to be %23 when we direct them to Twitter with
											this status

										 -->
				<a class="tweetText" href="http://twitter.com/?status=Testing the Tweetblast %23findthis" target="_blank">
					Testing the Tweetblast #findthis!
				</a>
				<div class="form">
					<!-- The username of our twitter-er -->
					<label for="username" class="label">Username: @</label>
					<input type="text" size="20" class="input" id="username" name="username" /><br />

					<!-- A span this is defult to be hidden but will be show if this field has an error -->

					<p class="errorU error">Please enter a username</p><br />

					<label for="email" class="label">Email Address:</label>
					<input type="text" size="20" class="input" id="email" name="email" /><br /><p class="errorE error">Please enter a valid email</p>
					<button type="submit" class="next" name="next" value="Next"></button>

				<!--
					Twitter will not add people who's profiles are
					private so if everything is OK and we didn't find
					the tweet that is probebly why.
				-->
					<p class="errorP error">Your account must not be private, if its not try again.</p>
				</div>
			</div>

			<!-- Our processing side -->
			<div id="slide2" class="slide">
				<p class="tweetText searching">
					Searching Twitter for your Tweet!
				</p>
				<img src="images/loading.gif" class="loading" alt="Loading..." width="32px" height="32px" />
			</div>

			<!-- Our thanks for Tweeting side -->
			<div id="slide3" class="slide">
				<p class="tweetText done">
					We found your tweet! Thanks for tweeting!
				</p>
			</div>

		</div>
</div>
</body>
</html

Anything that is special has been commented in the code.

CSS

In the CSS we want to make sure that the slides our horizontal, and that they will be hidden if they are not meant to be shown.

@charset "UTF-8";
/* CSS Document */
/* UTULITIES */
.clear{clear: both;}
.push{height: 30px;}
/* END */
/* ORDER PAGE CORRECTLY */
*{margin: 0; padding: 0;}
html{overflow-y: scroll;position: relative;}
body{font-family: Helvetica, Verdana, Arial, sans-serif; width: 100%; height: 100%; background: #3EA9DF;}
/* END */

#wrap{width: 720px; margin: 0 auto;} /*  Center everything  */
#header{background: url(../images/blast.jpg) left top no-repeat; height: 131px;position: relative;}
#header p{position: absolute; bottom: 0px; padding-left: 190px;color: #3D3D3D;}
#header p a{color: #626262;padding: 5px;text-decoration: none;}
#header p a:hover{color: #7B7D7D;text-decoration: none;}

#blaster{
	overflow: hidden; /*  So we can hide the slide we don't want  */
	width: 720px; /*  Need to set a width of what area can be shown  */

	padding-bottom: 30px;
	padding-top: 35px;
	position: relative;
	height: 220px;
	background: white;

	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px; /*  When a browser FINALY support it  */
}

.slide{width: 715px;
	overflow: hidden;
	display: inline-block; /*  We can set a width and they will be inline  */
	position: absolute;
	}/*  The size of each of our sides  */

.tweetText{
	background:none repeat scroll 0 0 #B9CBD5;
	display:block;
	font-family:helvetica;
	font-size:22px;
	margin:0 auto;
	padding:30px 0;
	text-align:center;
	text-decoration:none;
	width:680px;
	color: #626262;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}
.tweetText:hover{
	background: #BCD5E4;
	color: #727374;
}
.form{
	margin-left:30px;
	margin-top:30px;
	font-size: 17px;
	color: #595D5F;
}

.label{display: inline-block; width: 130px;}
.input{color: #8D9499;border: none; background: none; border-bottom: 1px solid #BDD0DA;font-size: 17px;}
.input:hover, .input:focus{border-bottom: 1px solid #6D7980;color: #676C6F;}

.error{
	color:red;
	font-size:15px;
	padding-top:10px;
	display: none;/*  Make sure we have no errors showing  */
}
.errorP{text-align: center;padding-right: 30px;}

.next{
	background:url("../images/next.jpg") no-repeat scroll left top transparent;
	border:medium none;
	cursor:pointer;
	height:37px;
	margin-top:-60px;
	position:absolute;
	right:30px;
	width:121px;
}
.next:hover, .next:focus{background:url("../images/next_over.jpg") no-repeat scroll left top transparent;}

/*  SLIDE 2  */
.loading{padding-left:339px;
padding-top:50px;}
#slide2{left: 715px;}

/*  SLIDE 3  */

#slide3{left: 715px;}
.done{margin-top: 50px;}

JavaScript

With the JavaScript lib jQuery we will post the values and move the first slide left while moving the next slides in. We want to check if there are any errors as if there are we want to move the first slide back in else, we move in the thanks slide.

$(function() {
	$(".next").click(function(){ /*  When next is clicked  */
		$("#slide1").animate({"left": "-715px"}, 500); /*  Slide away the first slide  */
		$("#slide2").animate({"left": "0"}, 500, function(){ /*  And slide in the new once, once that if finished run this function  */

		$.ajax({
			type: 'post',
			dataType: 'json',
			url: 'grab.php',
			data: 'username=' + $('#username').val() + '&email=' + $('#email').val(),
			success: function(e){ /*  On success  */
				if(e.error == 1){ // if there as an error
					$('.error').css({"display": "none"});// remove all error messages as we want to display messages for this current go

					if(e.username == 1){
						$('.errorU').css({"display": "block"});
					}

					if(e.email == 1){
						$('.errorE').css({"display": "block"});
					}
					if(e.private == 1){
						$('.errorP').css({"display": "block"});
					}

					/*

						We now slide back in the first slide with the error "p" elements
						Now visible.

					*/

					$("#slide2").animate({"left": "710px"}, 500);
					$("#slide1").animate({"left": "0px"}, 500);
				}else{
					/*

						There was no error so we remove slide 2
						and bring in the thanks!

					*/
	 				$("#slide2").animate({"left": "-710px"}, 500);
					$("#slide3").animate({"left": "0px"}, 500);
				}
			}
		});

		});
	});

});

Searching Twitter

Twitter’s search API is basically open to use with no limits. They do say not to use it excessively so if your going to use this on a HUGE scale you may want to contact them to ask of their permission. Because of this we can use CURL without authentication.

<?php

	$twitterUsername = $_POST['username'];
	$emailAdd = $_POST['email'];
	$tag = "findthis"; // The #tag that the use will find for

	function reply($type, $username, $email, $private){ // function to reply to the javascript
			/*

				This function shows if there was an error in
				1. overall
				2. username
				3. email
				4. didn't find it

			*/
			$replying = array("error"=>"{$type}", "username"=>"$username", "email"=>"$email", "private"=>"$private");
			echo(json_encode($replying)); // json encode the responce
	}

	// Defult everything to OK
	$error = false;
	$username = 0;
	$email = 0;
	$private = 0;

	if( strlen($twitterUsername) < 1 ){
		$username = 1;
		$error = true;
	}

	if( !preg_match('/^[a-z0-9]+([_\.-][a-z0-9]+)*@([a-z0-9]+([.-][a-z0-9]+)*)+\.[a-z]{2,}$/i', $emailAdd) ){
		$email = 1;
		$error = true;
	}

	if( $error == true ){
		reply(1, $username, $email, $private);
		die(); // stop running the script
	}

	/*

		If a user has JUST tweeted then it takes a few seconds for it to appear in
		Twitter's search. Because of this I have made it sleep for a few seconds to
		allow time for that to happen.
		It will also help a bit with mass attacks of people clicking over and over again.

	*/
	sleep(4);

	// search for the tweet				JSON format    The tag	   Who its from
	$search = "http://search.twitter.com/search.json?q=&tag={$tag}&from={$twitterUsername}";
	$curlhandle = curl_init();
	curl_setopt($curlhandle, CURLOPT_URL, $search);
    curl_setopt($curlhandle, CURLOPT_RETURNTRANSFER, 1);

	// execute the search
    $response = curl_exec($curlhandle);
    curl_close($curlhandle);

	// decode the responce
    $json = json_decode($response);
	// cound the amount of "results" that have been found
    $numb = count($json->results);

    if($numb != 0){ // if a result has been found reply with no error
    	reply(0, 0, 0, 0);

    	/*

    		If you are going to use this scrip put all your code
    		to happen when a user has successfully tweeted here

    	*/

    	die();

    }else{
    	reply(1, 0, 0, 1); // no result was found so the user is mostlikey private
    	die();
    }

That is all the code that is needed to build a basic tweetblast. It can be easily customised to accomplish what you would want it to do for your site.

Share and Enjoy:

Written by Alex

My name is Alex Bor and I am currently a full time student. I have been building websites for about 3 years and love to build sites that will take advantage of new techniques (such as AJAX and CSS3) to make them both look nicer and be more user friendly. You can view my website or follow me on Twitter.