How to Update Twitter using PHP and Twitter API

Posted in 1098 days ago • Written by 39 Comments

How to Update Twitter using PHP and Twitter APIIn the world of socializing on internet, Twitter is a big name and for developers its Twitter’s API. Its just Twitter’s unmatchable API that is failing all other micro-blogging services (like Tumblr) out there as it allows you to do almost everything. Once you become familiar with the Twitter API you can do innumerable number of things with it like updating your Twitter statuses remotely (Hint: We’ll be making this today!), searching the latest tweets for a keyword, and grab someone’s or your latest Tweets.

Today, we’ll be making a PHP Application that helps you update your Twitter status. So let’s get started without wasting anymore time!

How to Update Twitter using PHP and Twitter API

The PHP script we’ll be making will consist of four files:

Files Usage
Index.html Includes the form which asks for your username, password & new status.
Post-to-Twitter.php Posts the information entered on the form in Index.html to Twitter.
Style.css For Index.html
Style-php.css For Post-To-Twitter.php

MAKING THE FORM & STYLING IT WITH CSS

First, lets make a form in HTML with three input boxes for username, password & the new status message respectively and one command button which would submit the values to the PHP file “Post-to-Twitter.php”.

<html>
<head>
<title>Updating Twitter status using PHP</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1><span id="header">Updating Twitter Using PHP</span></h1></p>
<div id="quote1"><!--Start Quote1-->
<center><p> Learn to send updates to Twitter using its API + PHP! </p></center>
</div><!--End Quote1-->

<div id="form" align="center"><!--Start Form-->
<form name="form1" method="post" action="post-to-twitter.php">
<p><br />
<label>
Twitter Username:
<input name="t_user" type="text" id="t_user">
</label>
</p>

<p><br />
<label>Twitter Password:
<input name="t_pass" type="password" id="t_pass">
</label>
</p>
<p><br />
<label>Your status:</label>
</p>
<br />
<p>
<textarea name="t_update" cols="50" rows="5" id="t_update" ></textarea>
</p>
<p><br />
<label>
<input type="submit" name="Submit" value="Post To Your Twitter Account!">
</label>
</p>
</form>
</div><!--End Form-->
<div id="quote2"><!--Start Quote2-->
<center><p>NOTE: We aren't storing your passwords in any way. If you want to try this then go ahead without hesitation!</p></center>
</div><!--End Quote2-->
</body>
</html>

You might have noticed that I have already attached the form action attribute to the post-to-twitter.php file. The CSS styling for this form goes below:


body {
background-color:#fff;
font-size:0.825em;
font-family:Arial, Helvetica, sans-serif;

}

#quote1 {
margin-left:300px;
margin-right:300px;
border-style:solid;
border-width:2px;
border-color:#74DF00;
background-color:#EFEFD7;
line-height: 10px;
}

#quote2 {
margin-left:300px;
margin-right:300px;
border-style:solid;
border-width:2px;
border-color:#74DF00;
background-color:#EFEFD7;
line-height: 10px;
}

h1{
 padding:30px 0;
 text-align:center;
 text-shadow:0 1px 1px white;
 margin-bottom:30px;
 background-color:#f8f8f8;
 font-size:35px;
}

label{
text-shadow:0 1px 1px white;
font-size:18px;
}

This is what we have made till now:

SPICING THE FORM USING JQUERY

In the screenshot above, you may have seen that textboxes have a different style (when they are inactive) and this style can be brought using JQuery. The textboxes will have a different style or will be highlighted when they are active or when someone clicks on them. Just punch in the code below into the index.html file’s head and you are good to go!


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('input[type="text"]').addClass("idleField");
 $('input[type="text"]').focus(function(){
 $(this).removeClass("idleField").addClass("focusField");
 if (this.value == this.defaultValue){
 this.value = '';
 }
 if(this.value != this.defaultValue){
 this.select();
 }
 });
 $('input[type="password"]').addClass("idleField");
 $('input[type="password"]').focus(function(){
 $(this).removeClass("idleField").addClass("focusField");
 if (this.value == this.defaultValue){
 this.value = '';
 }
 if(this.value != this.defaultValue){
 this.select();
 }
 });
 $('textarea').addClass("idleField");
 $('textarea').focus(function(){
 $(this).removeClass("idleField").addClass("focusField");
 if (this.value == this.defaultValue){
 this.value = '';
 }
 if(this.value != this.defaultValue){
 this.select();
 }
 });
 $('input[type="text"]').blur(function(){
 $(this).removeClass("focusField").addClass("idleField");
 if ($.trim(this.value == '')){
 this.value = (this.defaultValue ? this.defaultValue : '');
 }
 });
 $('input[type="password"]').blur(function(){
 $(this).removeClass("focusField").addClass("idleField");
 if ($.trim(this.value == '')){
 this.value = (this.defaultValue ? this.defaultValue : '');
 }
 });
 $('textarea').blur(function(){
 $(this).removeClass("focusField").addClass("idleField");
 if ($.trim(this.value == '')){
 this.value = (this.defaultValue ? this.defaultValue : '');
 }
 });
});

</script>

And add the following code to style.css:


.focusField {
 border:solid 2px #73A6FF;
 background:#EFF5FF;
 color:#000;
 }
.idleField {
 background:#EEE;
 color: #6F6F6F;
 border: solid 2px #DFDFDF;
 }

Now you’ll have styled text-boxes on the form. The .focusfield describes the style of an active text field & .idlefield describes the style of an inactive field.

ADDING THE CHARACTER COUNT & LIMIT

We all know that Twitter has a character limit of 140. Personally, I don’t like the limit but we have to accept the reality! So to make our PHP Application a little realistic we need to add the character count & then limit it to 140. This can easily be done using Javascript. To do so, add the following code snippet to the head of your Index (Index.html) file:


<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#t_update").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 140);
var count= 140 - box.length;

if(box.length <= 140)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert('Character Limit Exceeded!');

;
}
return false;
});

});
</script>

You might have noticed in the code above that whenever the character limit of 140 is exceeded, you’ll see a message box saying “Character Limit Exceeded!”:

<pre>{
alert('Character Limit Exceeded!');

;
}

Now add the code below right after “Your Status” and before the status text-box on the HTML form in the Index.html file:


<div align="left" id="character-count"><!--Start Character Count-->
 <div id="count">140</div>
 <div id="barbox"><div id="bar"></div></div>
 </div><!--End Character Count-->

To avoid any confusions on the placement of the above code-snippet in the body of the index.html page, I have pasted the whole code inside the body tag below:


<body>
 <h1><span id="header">Updating Twitter Using PHP</span></h1>

<div id="quote1"><!--Start Quote1-->
<center><p> Learn to send updates to Twitter using its API + PHP! </p></center>
</div><!--End Quote1-->

<div id="form" align="center"><!--Start Form-->
<form name="form1" method="post" action="post-to-twitter.php">
 <p><br />
 <label>
 Twitter Username:
 <input name="t_user" type="text" id="t_user">
 </label>
 </p>

 <p><br />
 <label>Twitter Password:
 <input name="t_pass" type="password" id="t_pass">
 </label>
 </p>

 <p><br />
 <label>Your status:</label>
 </p>
 <p>
 <div align="left" id="character-count">
 <div id="count">140</div>
 <div id="barbox"><div id="bar"></div></div>
 </div>
 </p>
 <br />
 <p>
 <textarea name="t_update" cols="50" rows="5" id="t_update" ></textarea>

 </p>

 <p><br />
 <label>
 <input type="submit" name="Submit" value="Post To Your Twitter Account!">
 </label>
 </p>
</form>
</div><!--End Form-->

<div id="quote2"><!--Start Quote2-->
<center><p>NOTE: We aren't storing your passwords in any way. If you want to try this then go ahead without hesitation!</p></center>
</div><!--End Quote2-->

</body>

Now we’ll style the character-count so add the following code to the style.css file:


#bar
{
background-color:#5fbbde;
width:0px;
height:16px;
}
#barbox
{
float:right;
height:16px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#count
{
float:right;
margin-right:8px;
font-family:'Georgia', Times New Roman, Times, serif;
font-size:16px;
font-weight:bold;
color:#666666
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

#character-count {
margin-right:540px;
}

So now we have something like this:

BRINGING LIFE TO OUR APPLICATION WITH PHP

We have almost completed making the script now. All we have to do is to add some code to the post-to-twitter.php file and that’s it! Add the following code to the post-to-twitter.php file:


<?php
$username = ($_POST['t_user']);
$password = ($_POST['t_pass']);
$message = ($_POST['t_update']);

$url = 'http://twitter.com/statuses/update.xml';
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
if (empty($buffer)) {
 echo "<p align=\"center\" >".'Sorry, due to an error your Twitter status could not be updated! Please check your username/password!'."</p>";
} else {
 echo "<p align=\"center\">".'Your Twitter status has successfully been updated!'."</p>";
}
?>

You might have noticed the way we are passing the values entered in the text boxes to this PHP script. We had assigned id’s to the textboxes in our HTML script. We are now just importing the values entered in the text boxes with those id’s and assigning them a variable:


$username = ($_POST['t_user']);
 $password = ($_POST['t_pass']);
 $message = ($_POST['t_update']);

And then we just contact Twitter through the following code:


$url = 'http://twitter.com/statuses/update.xml';
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");

Now we firstly login the user with the username & password provided and then update the user’s status time-line with the status message entered in the Status box. Finally we display the confirmation message:

if (empty($buffer)) {
<pre> echo "<p align=\"center\" >".'Sorry, due to an error your Twitter status could not be updated! Please check your username/password!'."</p>";
} else {
 echo "<p align=\"center\">".'Your Twitter status has successfully been updated!'."</p>";
}

Now to style our output a little bit we just attach a stylesheet to the script and add a Back button to it. So here is our final code in the post-to-twitter.php file:


<html>
<head>
<title>Twitter-Post Confirmation</title>
<link href="css/style-php.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
$username = ($_POST['t_user']);
$password = ($_POST['t_pass']);
$message = ($_POST['t_update']);

$url = 'http://twitter.com/statuses/update.xml';
$curl_handle = curl_init();
curl_setopt($curl_handle, CURLOPT_URL, "$url");
curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl_handle, CURLOPT_POST, 1);
curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
$buffer = curl_exec($curl_handle);
curl_close($curl_handle);
if (empty($buffer)) {
 echo "<p align=\"center\" >".'Sorry, due to an error your Twitter status could not be updated! Please check your username/password!'."</p>";
} else {
 echo "<p align=\"center\">".'Your Twitter status has successfully been updated!'."</p>";
}
?>
<div id="history"><!--Start History-->
<a href="javascript:history.back()">Back to the previous page</a>
</div><!--End History-->
</body>
</html>

The stylesheet for this php file is named “style-php.css” and includes the following code:


@charset "utf-8";
/* CSS Document */

body {
 font-size:24px;
 vertical-align:middle;
 text-align:center;
 text-decoration:underline;
 margin-top: 150px;
 }

That’s it! We have successfully made our PHP script using which we can update our Twitter account’s remotely. There are numerous things you can do with the above application. You may use it onto your next project related to twitter or integrate this to your blog to directly post updates of new posts to Twitter without even using external services like Twitterfeed or FeedBurner or any other plugins!

If you have any questions, comments or concerns then feel free to leave a comment :)

<form
name=”form1″ method=”post” action=”post-to-twitter.php”>
<p><br />
<label>
Twitter Username:
<input name=”t_user” type=”text” id=”t_user”>
</label>
</p><p><br />
<label>Twitter Password:
<input name=”t_pass” type=”password” id=”t_pass”>
</label>
</p>

<p><br />
<label>Your status:</label>
</p>
<p>
<div align=”left” id=”character-count”>
<div id=”count”>140</div>
<div id=”barbox”><div id=”bar”></div></div>
</div>
</p>
<br />
<p>
<textarea name=”t_update” cols=”50″ rows=”5″ id=”t_update” ></textarea>

</p>

<p><br />
<label>
<input type=”submit” name=”Submit” value=”Post To Your Twitter Account!”>
</label>
</p>
</form>
</div><!–End Form–>

<div id=”quote2″><!–Start Quote2–>
<center><p>NOTE: We aren’t storing your passwords in any way. If you want to try this then go ahead without hesitation!</p></center>
</div><!–End Quote2–>

</body>
</html>

<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘input[type="text"]‘).addClass(“idleField”);
$(‘input[type="text"]‘).focus(function(){
$(this).removeClass(“idleField”).addClass(“focusField”);
if (this.value == this.defaultValue){
this.value = ”;
}
if(this.value != this.defaultValue){
this.select();
}
});
$(‘input[type="password"]‘).addClass(“idleField”);
$(‘input[type="password"]‘).focus(function(){
$(this).removeClass(“idleField”).addClass(“focusField”);
if (this.value == this.defaultValue){
this.value = ”;
}
if(this.value != this.defaultValue){
this.select();
}
});
$(‘textarea’).addClass(“idleField”);
$(‘textarea’).focus(function(){
$(this).removeClass(“idleField”).addClass(“focusField”);
if (this.value == this.defaultValue){
this.value = ”;
}
if(this.value != this.defaultValue){
this.select();
}
});
$(‘input[type="text"]‘).blur(function(){
$(this).removeClass(“focusField”).addClass(“idleField”);
if ($.trim(this.value == ”)){
this.value = (this.defaultValue ? this.defaultValue : ”);
}
});
$(‘input[type="password"]‘).blur(function(){
$(this).removeClass(“focusField”).addClass(“idleField”);
if ($.trim(this.value == ”)){
this.value = (this.defaultValue ? this.defaultValue : ”);
}
});
$(‘textarea’).blur(function(){
$(this).removeClass(“focusField”).addClass(“idleField”);
if ($.trim(this.value == ”)){
this.value = (this.defaultValue ? this.defaultValue : ”);
}
});
});</script>

Join over 55,891 Subscribers Today! FREE UPDATES!

Get The Only Freelancer crash course you will ever need to read!

4 Written ArticlesWebsiteGoogle+

Blog: TutorialsWalk Twitter: @abhishekwebin

39 Comments Best Comments First
  • @Xarem

    Thursday, May 20th, 2010 16:19

    1

    Hi

    Like Matt Rogowski said:
    On June 30, 2010 (5 weeks and 6 days from now), the @twitterapi team will be shutting off basic authentication on the Twitter API

    Take a look: http://countdowntooauth.com/

    So your script just run til 30 of june

    0
  • Ryan Fitton

    Sunday, May 30th, 2010 13:50

    13

    Any word on using oAuth with this tutorial?
    Great work though :) many thanks, Ryan.

    0
    • Abhishek

      Sunday, May 30th, 2010 19:33

      14

      Making one. Will be up on 1stwebdesigner soon! :)

      0
  • Ilham Maulana

    Monday, June 7th, 2010 19:05

    15

    Nice… But I’ve got a question… It’s a example, “3 minutes ago via API”… How I can change the API word with my website name or application?

    0
  • Aan

    Tuesday, June 22nd, 2010 03:31

    17

    it’s cool! thanks for share.. i don’t like waste the time to continued logins.

    0
    • saravanan

      Friday, June 25th, 2010 13:15

      18

      how to replay for the user twit in twitter?

      0
      • Abhishek

        Tuesday, June 29th, 2010 02:35

        19

        What? Can you please clarify your question?

        0
  • Al

    Saturday, May 29th, 2010 16:56

    11

    Nice tut!
    Would be great if you made a tutorial using OAuth too! :)

    0
    • Abhishek

      Sunday, May 30th, 2010 00:56

      12

      Making one now!

      0
  • Jordan Walker

    Monday, May 24th, 2010 15:15

    10

    That is a great utility to post to Twitter.

    0
  • nishant

    Wednesday, April 11th, 2012 05:50

    39

    code not update status dude.

    0
  • Tiz

    Friday, December 30th, 2011 20:16

    38

    The scritp works BUT it doesn’t post anything.
    It tells that i’ts posted. I check the timeline on Twitter and I don’t fidn what I post.
    When I enable the applciation to work on my acount, Twitter gives me back a PIN number that I have not clue where to put
    Could you halp me please?

    0
  • Carlos

    Thursday, November 17th, 2011 22:27

    37

    hi,
    Is it possible to add an auto DM, when someone is following us?

    0
  • Rupanjan

    Tuesday, June 21st, 2011 16:45

    36

    The above example is not working, anyone can help

    0
  • Manik Das

    Saturday, April 23rd, 2011 15:46

    35

    The example is not working , I don’t know why

    0
  • Stefano

    Friday, February 11th, 2011 11:13

    33

    Hi, can you help me??
    I don’t able to connect with twitter with this script in
    The example does not work too.

    thanks

    0
    • Ryan

      Sunday, March 6th, 2011 18:38

      34

      This type of authorization is no longer supported by Twitter. You need to look at OAuth.

      0

Comments are closed.

x

Do You Know How To Freelance And Get More Clients?

E-Book

If not, then it's time to learn how to:

  • Start as web design freelancer for dream lifestyle!
  • Design beautiful designs your clients will love!
  • Get your first clients and get more clients!

You can trust 1stWebDesigner to help you become a better web designer!

- Jacob Cass | Just Creative

Just enter your name and email below and click Get Updates!

unknown - US