How to Create your own BlogCatalog Widget via their API

Published August 21, 2008 • 0 Comments • 1 Delicious Bookmarks

When releasing the first version of my WP-SocialCount WordPress plugin a while back, an interested visitor asked if I would be so kind as to include a way to reshape the BlogCatalog widget with the next release of the plugin. I had every intention of doing that until I saw just how much would have to be changed in my plugin to accommodate this – so I decided to write this instead.

Current BlogCatalog Widgets

Currently, the list of widgets that BlogCatalog provides it’s users is pretty meager. Hopefully this tutorial will allow it’s members to promote themselves a little easier (and in better style!) than before.

Step 1: Get your API Key

To get your API key, all you need to do is sign in, and go to it’s developers page. A couple sections down, you will see something like the image below. Write down your key and save it for later.

Step 2: Construct the API Calls

In order to make the API call, we need to know the structure that BlogCatalog requires the calls to be in. Looking at their developers page, we see that they only have two types of calls. One is for gathering User data and the other is for getting Blog data.

We are going to start off using the User data api call because this should give us quite a bit of the information we need right off the bat.

The structure as outlined by their documentation is: http://api.blogcatalog.com/getinfo?bcwsid=[apikey]&username=[username]

Looking over this call I see that the only thing we don’t currently have is the [username]. Remember, we got the [apikey] back in Step 1.

Step 3: Set Initial Variables

To make our coding as easy as possible, lets set some variables right off the bat so that we can reference them anytime we need their data later on.

FYI: I will be adding each new step on top of each previous step so that you can see how we build the application…

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

FYI: I X’d out my api key, but you can easily insert your own key in here…

Step 4: Use PHP to Capture Your Data

Since BlogCatalog returns all their data in the form of XML (their documentation didn’t state this, but it’s the format their examples are in, so let’s run with that) we will use the simplexml_load_file php function to load the file into the variable $userfeeddata.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

Step 5: Pull That Data Into Variables

After loading that file of data into our $userfeeddata variable, we can start pulling the information we need out. You can see below that I am pulling the avatar and url from this data. How I realize the hierarchy of the data is done by doing a print_r command on the $userfeeddata variable.

print_r ($userfeeddata);

I usually add this line of code in right after we load the data, and then comment it out once I have everything that I need. After analyzing the print_r output, this is what I came up with:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");
//print_r ($userfeeddata);

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

Step 6: Use this Data for the Second of our API Calls

back in Step 2 we found that BC gives us two types of API calls. We already used the User data feed, but now we will make use of the Blog data feed: http://api.blogcatalog.com/bloginfo?bcwsid=[apikey]&url=[blog url]

Just as before, we already have the [apikey] value, but we don’t yet have the [blog url]. Actually we do, and it is in the form of $url, which we got in Step 5. So, lets make another call to the API, only this time using the one to get Blog information:

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

Using the print_r command again, I find a some more data that I want to pull out to include in our new widget.

//Setting variables
$api = "xxxxxxxxxx";		//Your API key
$username = "ccagle8"; 	//Your username

//Pulling API user feed data
$userfeeddata = simplexml_load_file ("http://api.blogcatalog.com/getinfo?bcwsid=$api&username=$username");

//Loading that data into variables for later
$avatar = $userfeeddata->result->avatar;
$url = $userfeeddata->result->weblogs->weblog->url;

//Pulling API blog feed data
$blogfeeddata = simplexml_load_file ("http://api.blogcatalog.com/bloginfo?bcwsid=$api&url=$url");

//Loading that data into variables for later
$tags = $blogfeeddata->result->weblog->tags->tag;
$categories = $blogfeeddata->result->weblog->categories->category;
$bcurl = $blogfeeddata->result->weblog->bcurl;
$views = $blogfeeddata->result->weblog->views;
$rank = $blogfeeddata->result->weblog->rank;
$friends = $blogfeeddata->result->weblog->neighborhood->user;
$viewers = $blogfeeddata->result->weblog->recent_viewers->user;

Step 7. Echoing the Data back to the Page

We have all our data mining complete, so now we can focus on sending this it out to our web page.

Here we are echoing out some of the user information that we received during the two API calls we did. You can see that we are showing your Avatar, which is linked to your BlogCatalog page, and your site’s number of views and rank.

//Echos out User Information
echo "<a href=\"". $bcurl ."\"><img src=\"". $avatar ."\" alt=\"View ". $username ."'s BlogCatalog Profile\" /></a><br />";
echo "Views: ". $views ."<br />";
echo "Rank: ". $rank ."<br />";

The next data we want to show are the tags and categories of the blog in question. To do this, we can use a foreach loop that will cycle through each tag and category and create a link back to the BlogCatalog page for each one.

Hint: You can see that I had to sanitize the variables by converting all letters to lowercase and replace spaces with underscores in order for them to work correctly in the URL.

//Cycle through and display tags
	echo "Tags:";
	$set = 0;
	foreach ($tags as $i => $tag) {
		if($set < $limit){
			echo "<a href=\"http://www.blogcatalog.com/tag/". strtolower($tag) . "\">". $tag ."</a> ";
		}
		$set  ;
	}

	echo "<br />";

	//Cycle through and display categories
	echo "Categories: ";
	$set = 0;
	foreach ($categories as $i => $cat) {
		if($set < $limit){
			echo "<a href=\"http://www.blogcatalog.com/directory/". urlencode(strtolower(str_replace(" ", "_", "$cat"))) . "\">". $cat ."</a> ";
		}
		$set  ;
	}

DEMO: View the final outcome of this tutorial (with a little bit of CSS and HTML markup added, which you can see in the header section of the page when you do a “view source”).

SOURCE CODE: Download the full PHP source code.