Make A Userbar - The Code

Want your very own Userbar Creator? Here we will show you step-by-step how to create your very own for your website!

You will need access to the files on a server that is running PHP.

Step One : The Form

The first step to making a Userbar Creator is for you to create a page with a form for users to use. Call the page whatever you like and use the code below:

The Form

Example Form

Form Code <form action="make_it.php" method="post" enctype="multipart/form-data">
<table cellspacing="0" cellpadding="2" border="0">
<tr>
<th colspan="2" align="left">Userbar Generator</th>
</tr><tr>
<td>Image: </td><td><input name="image" value="XYZ.png" /></td>
</tr><tr>
<td>Color: </td><td> <input name="color" value="" /></td>
</tr><tr>
<td>Font Family: </td><td> <input name="font" value="" /></td>
</tr><tr>
<td>Font Size: </td><td> <input name="size" value="" /></td>
</tr><tr>
<td>Margin Distance: </td><td> <input name="margin" value="" /></td>
</tr><tr>
<td>Displayed Text: </td><td> <input name="text" value="" /></td>
</tr><tr>
<td colspan="2" align="center">
<input type="submit" value="Make Me One" /></td>
</tr>
</table>
</form>

When the form is submitted it will send the data to a page titled make_it.php. Let's look at each of the inputs I have placed in the form. You can add/delete these inputs as you desire.

<input name="image" value="XYZ.png" />

This is the image you are using as the background of the userbar. In this case, the default is an image named XYZ and it is in png format. This is important! The code requires a png be used!

<input name="color" value="" />

This is the color of the displayed text on the userbar. You can decide on using radio buttons, check boxes or plain text input. In this case we used a basic text input box.

<input name="font" value="" />

This is the font family of the displayed text on the userbar. We have a bunch of fonts uploaded onto our site where this script is running. This can be removed if you desire.

<input name="size" value="" />

This is the font size of the displayed text on the userbar. This helps when using different fonts.

<input name="margin" value="" />

This is the distance of the text from the left side of the image. This helps for aligning the text to the image.

<input name="text" value="" />

This is the text you want displayed

<input type="submit" value="Make Me One" />

Of course this is the button to submit the form with.

Step Two: The Code

The second step requires you to copy/paste the code below and name/save that page as make_it.php.

The Magic

The PHP Code <?php
/**************************/
/* Userbar Creator Script */
/* copyright 2010 by makeauserbar.com */
/* please do not remove copyright */
/* released under the GNU Affero General Public License */
/* More Info: http://www.fsf.org/licensing/licenses/agpl-3.0.html */
/**************************/

// Enter your site URL, such as http://www.makeauserbar.com
$home = "_____________";

// Each of the variables below come from the form the user submits
// Remove or comment out what is not used
$img_url = htmlspecialchars($_POST['image']);
$color = htmlspecialchars($_POST['color']);
$text = htmlspecialchars(stripslashes(trim($_POST['text'])));
$size = htmlspecialchars($_POST['size']);
$margin = htmlspecialchars($_POST['margin']);
$font = htmlspecialchars($_POST['font']);

// If there is a valid image URL address then let's go
if (isset($img_url)){
$im = @imagecreatefrompng('images/'.$img_url);
}else{
header('Location: $home');
exit;
}

// Font colors get selected here
if ($color == 'white'){
$color=imagecolorallocate($im, 255, 255, 255);
}elseif ($color == 'green'){
$color=imagecolorallocate($im, 0, 100, 0);
}elseif ($color == 'purple'){
$color=imagecolorallocate($im, 160, 32, 240);
}elseif ($color == 'blue'){
$color=imagecolorallocate($im, 0, 0, 255);
}elseif ($color == 'navy blue'){
$color=imagecolorallocate($im, 0, 0, 128);
}elseif ($color == 'red'){
$color=imagecolorallocate($im, 255, 0, 0);
}elseif ($color == 'fire brick'){
$color=imagecolorallocate($im, 178, 34, 34);
}elseif ($color == 'pink'){
$color=imagecolorallocate($im, 255, 192, 203);
}elseif ($color == 'orange'){
$color=imagecolorallocate($im, 255, 165, 0);
}elseif ($color == 'snow'){
$color=imagecolorallocate($im, 255, 250, 250);
}elseif ($color == 'brown'){
$color=imagecolorallocate($im, 165, 42, 42);
}elseif ($color == 'gold'){
$color=imagecolorallocate($im, 255, 215, 0);
}elseif ($color == 'turquoise'){
$color=imagecolorallocate($im, 64, 224, 208);
}elseif ($color == 'yellow'){
$color=imagecolorallocate($im, 255, 255, 0);
}elseif ($color == 'gray'){
$color=imagecolorallocate($im, 190, 190, 190);
}elseif ($color == 'black'){
$color=imagecolorallocate($im, 0, 0, 0);
}else{

// if nothing else, the default color is black
$color=imagecolorallocate($im, 0, 0, 0);
}

// This is the text, if they submitted something use that
if ((isset($text)) && (!empty($text))){
$text = $text;
}else{

// else use the IP address of the user
$text = "My IP: ". $_SERVER['REMOTE_ADDR'];
}

// This is the margin from the left, if they submitted something use that
if ((isset($margin)) && (!empty($margin))){
$margin = $margin;
}else{

// else use 20 from the left
$margin = '20';
}

// This is the font size, if they submitted something use that
if ((isset($size)) && (!empty($size))){
$size = $size;
}else{

// else font size is 11 pixels
$size = '11';
}

// fonts are stored in a folder named "fonts"
// This is the font family, if they submitted something use that
if ((isset($font)) && (!empty($font))){
$font = 'fonts/'.$font;
}else{

// else default font is visitor.ttf
$font ='fonts/visitor.ttf';
}

// this is the magic line, here we write text to the image using TrueType fonts
// line below explained: (image we are creating, font size, angle of font, x of text, y of text, color of text, font family of text, the text string we are using)
imagettftext($im, $size, 0, $margin, 12, $color, $font, $text);

// this tells the browser that we want the image to be downloaded instead of displayed
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$im");
header("Content-Type: image/png");
header("Content-Transfer-Encoding: binary");
header('Content-Encoding: binary');

// create the image
imagepng($im);

// frees any memory associated with image
imagedestroy($im);
?>

More Information

In step one you created a page (whatever you wanted to call it) and placed the form on it. That form sends data to the page make_it.php.

Step two, which is the page make_it.php, you created the userbar with the power of php and the GD library. Some important things to note here:

The code above is heavily commented, so it should be self explanatory. Remember to add your page URL address (http://......) at the beginning of the code. This is necessary so that if the form user doesn't supply an image to use, they will be redirected to that URL address. As well, if you don't use some of the inputs from the form, you need to either delete those variables or comment them out with double lines: example: //, from the make_it.php code.

Like stated, we have fonts saved in a font folder that users can choose from. If you don't have them available, remove/comment out the font sections of make_it.php.

The above code will look for the image desired to be located in a folder named images. This can be changed easily to wherever your images are stored. This is of course if you are going to have images for users to choose from.

If so, you can set up radio buttons that link to your images if you have a set of images they can choose from.

Overall, this is an easy to use script that took a while to get it to work properly. If you have any questions, don't hesitate in contacting us via our contact page. If you want to see the code in action, visit our homepage at http://www.makeauserbar.com.

Good luck and have fun!