How To Make A Basic PHP Widget

The following tutorial will show you how to make a basic widget that a blogger can put on their blog and also give them the ability to change the colors of the widget.

At the end of the tutorial you will have a widget that looks like this one and you will be provided the files to download to get started making your own widgets ;-)

This is very geeky stuff and some php knowledge will be necessary to follow along. But you may feel geeky one day so be sure to bookmark it ;-)

Overview

For every blog that adds our widget to their blog menu the blogger will be given a small piece of javascript to include in their template.

The javaascript calls a php file and sends a variable or two along with it.

Our php file grabs the variables, does something with them, then returns the output back as a widget to display on the blog.

What Do We Want Our Widget To Do?

Since we are only getting our feet wet we will keep the widget functionality very basic.

We want our widget to say our blogs name and give the ability for the blogger to customize the colors of the widget.

Calling the PHP File From Peoples Blogs

We will start with a php file called mywidget.php that we want each blog to call to get the widget.

We also want to send two variables along with the call which will be textcolor and background color.

Our simple request a blogger will use will look like this:

<script type="text/javascript" src = "website.com/mywidget.php?textcolor=ffffff&backgroundcolor=000000> </script>

In summary the javascript on the blog page calls mywidget.php and also tells it two variables which are the text color (textcolor=ffffff) and background color (backgroundcolor=000000)

Inside the PHP File

Now we want to dive into the PHP. Open up mywidgets.php which is blank at the moment and let's build our widget.

Step 1 - Grab The Variables

PHP needs to grab the variables (the two colors) from the url.

Not only does the following lines of code grab the variables, the code also strips any characters except numbers and letters (sidetracking those nasty hacker people):

$textcolor = preg_replace("/[^a-z0-9-_]/i","",$_REQUEST['textcolor']);

$backgroundcolor = preg_replace("/[^a-z0-9-_]/i","",$_REQUEST['backgroundcolor']);

Step 2 - Further Validate The Variables

Our colors can only be 6 characters long, or a traditional hex color. (for instance ffffff is white).

To validate the colors we will check the length of the received variable. If it doesn't equal 6 then we will set it to our default color, otherwise the color is ok and is already set to the color to that the blogger has requested, like this:

if (strlen($textcolor) != 6){$textcolor="ffffff";}

if (strlen($backgroundcolor) != 6){$backgroundcolor="000000";}

Step 3 - Package The Widget To Send Back to the Blog

Now that we got our colors and we know the blog is waiting on us to send something back, let's get the widget ready to send.

We will make a basic box with our blog name in it and make it the colors that the blogger requested.

$widget= "<div style="color:#" . $textcolor . ";background-color:#" . $backgroundcolor . ";text-align:center;font-size:15px;width:100px;height:20px;padding:10px;">";

That is our basic box with the colors set, let's write our blog name and close the box.

$widget.= "My Blog Name</div>";

Step 4 - Send Back The Final Widget To The Blogger

This is a little tricky but not really. Because we are in php we will need to echo the javascript command to write the widget.

echo "document.write('$widget')";

In the end the request for the PHP file returns a nicely formated box with your name in it and tells the blog to document.write or output the nice widget we put together ;-)

In Closing

Use this tutorial at your own risk. There are many considerations such as security and performance when building widgets that aren't addressed in this tutorial.

There are many ways to build widgets. This way is only one way. Hopefully you enjoyed this tutorial on how to build your own PHP widget.

Once again. You can try it out yourself at the following link. You can download the completed PHP code here.

If you like this post then please consider subscribing to my full RSS feed. You can also Subscribe to 45n5 by Email and have new posts sent directly to your inbox.