The Problem: If you are using the standard Twitter widget on your website (available here), you may want to use only one set of code because the styling is included inline. The issue here comes in when you need different widths or number of tweets, depending on the widget’s location (home page versus sidebar, for example).
The Tools:
- The Twitter widget for websites. In this tutorial, I will be directly referencing the profile widget.
- A text editor. I use Notepad ++, but you can use whatever you like.
- A localhost for testing
The Solution:
1. Initial formatting:Go to the Twitter site and style your widget as close to what you’d like to end up with. Copy and paste this code into your preferred text editor and save the file as twitter.php into your site/theme directory. If you are using a PHP-based Content Management Systems like WordPress, skip to step 2 now. Otherwise, locate the files where you would like to add your Twitter widget. Open them in your text editor and save them as .php files. Make sure you update any links to the page to the new extension.
What does this do? PHP is a server-side script and the basis for many CMS. We will be using it to incorporate the Twitter widget, as well as to apply conditional formatting.
2. Include your widget.Open your theme or file location in your text editor and navigate to where you’d like to include your widget. Insert the following line:<?php include 'twitter.php';?>
What does this do? Include is a PHP function that does literally what it says, includes the called file within the other, so they blend together seamlessly before heading to the user’s browser so they end up as one page. This is different than include_once –which, as it states, only calls the code once–or require –which stops the script if there is an error, as opposed to just displaying a warning.
3. Add the PHP script. This is where there’s some deviation, depending on what CMS you’re using or not. I will be addressing WordPress and static sites in this post. In both cases, we will be formatting the width and the number of Tweets to display depending on whether it’s on the homepage or not.
Open twitter.php in your text editor. Locate the lines defining rpp and width and modify them thus:
rpp: <?php echo $rpp; ?>
width: <?php echo $width; ?>
Echoing PHP prints it out as text browser. Because PHP runs server-side, these variables will be output as text before the javascript starts. If you try to test the page now, it will not work because the we have not set the variables yet. We will be setting it so the homepage displays 5 Tweets in a width of 313px and the other instances display 3 Tweets with a width of 330px.
WordPress: WordPress provides conditional formatting already, so we will be utilizing that. This is the code that works for WordPress. Place it at the top of your twitter.php file. (This has been tested in 3.3.1, but should be backward compatible for a ways as well.)
<?php
if (is_front_page()){ $width=”313″; $rpp=”5″; }
else{$width=”330″; $rpp=”3″;}
?>
Non-CMS based: Because we are outside a CMS, we will need to use a different method. What we will be doing here is seeing if the file name is index.php or not. (Obviously, if you have your home page set to another page, you will need to use that page instead.)
<?php
if (basename($_SERVER[‘REQUEST_URI’])==”index.php”){ $width=”313″; $rpp=”5″; }
else{$width=”330″; $rpp=”3″;}
?>
If you have any questions, please leave them in the comments. If you are interested in learning more, I am offering tutoring services especially in PHP and WordPress.
