This guide is designed to give you a thorough understanding of the MySpace API as well as demonstrate with step by step instructions on how to setup a MySpaceID powered site in a short amount of time. You can check out the demo and download the files needed in this tutorial.

Setup a developer account on MySpace

First you’ll need to head over to MySpace.com and signup for a standard user account here:

If you already have a MySpace account login at http://myspace.com. If you don’t have a developer account you’ll need to create one here:

Setup a new MySpaceID application

Once you have your developer account and have confirmed everything you can go ahead and click ‘Build’.

you’re now presented with two options. MySpace Apps or MySpaceID. We’re going to be creating an application that doesn’t sit on MySpace so you’ll need to select ‘Create MySpaceID App’

Once you have completed the first step and given your application a title, accepted the terms and conditions and filled In the CAPTCHA you can click ‘Next’

Step Two may seem a little daunting but don’t be worried there are just three things we need to do on this page. Firstly give you’re application a description (you can come back and edit this later along with the title) the next most important part to edit on this page is the ‘External Site Settings’

The external URL should look like this for the purposes of our demonstration:

http://yourdomain.com/myspaceapi/samples/myspaceid-oauth/

The External Callback Validation box should just contain your site’s domain for example like this:

http://yourdomain.com

We’re not using OpenID in this demonstration so just leave that un-ticked.

Click ‘Save’.

TIP: We’ll need the OAuth API Key and Secret so make a note of them. The location of where they can be found is a little further up the page under the header ‘OAuth Settings’.

TIP: If at any stage you need to get back to your OAuth Key and Secret just click ‘My Apps’ then ‘Edit App details’

Configuring the application

Lets just have a look at the file structure of our application so we can understand from the outset exactly where each component of the app is located and what to look out for when making any changes.

1. This is where your MySpace API Key and Secret need to go.
2. Myspaceid-oauth Folder. This contains all the frontend files for our application. The index.php file is the main application page that we visit initially. If the user isn’t logged in to the app then they are directed to login.php
3. Views folder. This is where all the HTML layout files are kept this of you familiar with the MVC or Model View Controller principal will understand this better as the structure is loosely based on this
4. Source Folder. This folder contains the MySpace API files in order to connect to MySpace and make requests for data. The myspace.php file is the file that contains the functions required to get the specific data requested.

There are two files you need to edit in order to get the application up and running.

The first file is config.MySpace.php which can be seen above in the config folder. You just need to add your API key and Secret as shown below:

You’ll then need to open up the functions.php file and edit the URL in the base_url() function. This is the main function which returns your main application URL its vital that this URL matches the URL that you entered into MySpace when you setup the application.

Run the application

If you have followed the tutorial correctly you should now see a login screen when you visit your application URL:

http://yourdomain.com/myspaceapi/samples/myspaceid-oauth/

Once you click Login with MySpaceID you are taken to the MySpace login page which once you connect will re-direct you back to the application.
After login you are re-directed back to index.php which now should be displaying a selection of your profile information as shown at the top of the page.

Looking at the application in a little more detail

To get a full understanding of what’s going on lets have a look at the index.php file which is located directly inside the myspaceid-oauth folder.
The first thing you should notice is there’s not a lot of code in this file compared to the sample OAuth code that comes with the default PHP SDK from MySpace.

Starting at the top. The three required files are used to setup the application. The first required file contains the API key and Secret, the second file is the main MySpace API file that is used to get data. And finally we load the functions.php file which contains a few functions that I’ve created in order to abstract code from this file to make it easier to understand and logical when it comes to making API requests.

From Lines 11-35 above we have the main block of code that is required to determine if a request has been made to the MySpace API. Within each if/else statement we’re calling the specified functions. For example. If a user initially visits index.php they wont be logged into the application. Because of this they will be re-directed to login.php which is the not logged in landing page. On login.php there is a link to login to MySpace. When the user clicks this they actually visit index.php?f=start. This sets off the authentication process re-directing the user to MySpace to login, once they login MySpace re-directs them back to index.php?f=callback where the myspace_callback function is called.

TIP: all the functions used in this demo can be found In the functions.php file.

At the bottom of the index.php file we have three included files.

• Header.php
• Index-content.php
• Footer.php

The header and footer files container default code that can be used throughout the app. So in the header.php file we have the document Head and opening Body tag along with an opening container div.

In the footer.php file there’s a footer div and the closing container div from the header.php file.

Each poll has its own page, for example here’s a poll i created: Visit Poll the bar graph is generated using basic CSS and PHP to determine the percentages for the number of votes. Here’s a tutorial I wrote a while back on how to implement a similar graph

The Design

Much like wedeliver I wanted to create an appealing interface that’s easy on the eye, simple to navigate as well as containing all the functionality needed.

Visit the site

You can visit the site here and create a poll yourself. As I said in my post about wedeliver as a designer and developer it’s really important to do personal projects as well as freelance work you learn so much more building small applications in your own time.

What’s in the bundle?

1. jQuery Drag & Drop

   Using jQuery PHP and MySQL a complete drag and drop script that updates the database. demo

2. jQuery Delete

   Delete items using PHP jQuery using an AJAX request demo

3. PHP jQuery and MySQL Autosuggest

   A powerful autosuggest script that searches a MySQL database to return you result demo

4. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

5. CSS3 Buttons

   Styling elegant buttons using CSS3 demo

6. Feedburner Stats

   Using PHP and CURL to get your feedburner subscriber count demo

7. jQuery & PHP username checker

   Checks the database to see if a chosen username exists in the database and returns true or false demo

8. jQuery image Zoom

   create a simple gallery with a hover image effect demo

9. jQuery PHP & MySQL inline editing

   Edit page content directly in the browser inline using jQuery AJAX requests demo

10. jQuery Gallery

    Animated jQuery gallery with title and description demo

11. Highlighting form inputs

    Highlight any input field using JavaScript demo

12. jQuery JSON & PHP

    Create a simple product gallery using JSONP PHP and MySQL demo

13. jQuery Tabs

    Simple tabs rendered using jQuery demo

14. jQuery XML

    build a product gallery parsing XML using jQuery demo

15. jTruncate

    Using the jTruncate plugin to truncate text with a ‘more’ link demo

16. PHP Page scrape

    Scrape page contents using PHP and CURL demo

17. AJAX Check

    Check to see if a normal GET or POST request was made or if an AJAX request was made demo

18. PHP Pagination

    A useful and raw PHP pagination script that could be adapted in to a class demo

19. jQuery Sliding Menu

    jQuery drop down slide in / out menu inspired by 9rules.com demo

20. jQuery Tooltips

    An experimentation into building jQuery tooltips with AJAX requests, images etc demo

Its got to the stage where I can no longer read Mashable or Techcrunch because of the saturation and influence that these so called ‘social media’ experts and journalists seem to be having on the industry. This so called next movement has unfortunately made everyone (even my Mum and Dad!) an expert in social media (whatever social media really is?) so it seems. I used to be an avid reader of Mashable and Techcrunch however i started to notice articles that were just plain crap observations, for example recently i found this post on Mashable, ‘The top ten Twitter trends this week.’ I mean WHAT THE HELL! This made it into an article! This is a classic example of so called social media biting itself in the ass. Im a savvy internet user if i want to know what’s trending on Twitter i’ll check the Twitter homepage. Social media really just stands for, ‘We’re going to make your browsing experience twice as complicated by bombarding you with pointless facts an figures and plain obvious tips on how to promote your business using Twitter, Facebook and social networking.’ I mean HELLO! bands and teenagers have been doing this stuff for years on MySpace, Hi5, and Bebo its nothing new.

It’s just plain marketing bullshit, and it just purports to makes anyone an expert if you have a Twitter or Facebook account, so in effect it just bastardises people who actually are knowledgeable in this area. I don’t class myself as an expert in anything. If your an expert you have nothing more to learn and we all have something to learn even more so on the internet.

Social Media = Way too much noise!

Who uses Memcache?

Memcache was developed by Danga Interactive to enhance the speed of LiveJournal.com, Memcache dropped the database load to almost nothing, yielding faster page load times for users, better resource utilization, and faster access to the databases on a Memcache miss. Currently FaceBook are the biggest users of Memcache. Infact FaceBook are using it so aggressively that they are chartering new territory, and helping to develop the open source project.

What’s Memcached?

So your reading this wondering what I’m talking about. Memcache is basically is a generalpurpose distributed memory caching system, put that in English, it allows you to store any form of data in a ‘temporary cache’ so wherever you go to do a database query, instead of just connecting to the database and getting the data we want we first check the memcache to see if our data is already stored. If the memcache returns nothing, then go to the database, get what you’re looking for, then store it in the memcache for later:

There are five main functions that we use with Memcache and they are as follows:

• get() – gets the value for a specified key
• set() – sets a given key with a given value
• add() – adds to the cache, only if it doesn’t already exist
• replace() – sets in the cache only if the key already exists
• flush() – removes all keys and cached data

The Code

So once you have Memcache installed on your server you can connect to it and start caching stuff. It’s worth pointing out that you shouldn’t go out and cache everything, it’s really only useful when you have large amounts of data that are going to be requested regularly.

1. So the first two lines setup the connection to Memcache.
2. The include is just my database connection script.
3. Next we set the key. When we store data using Memcache there are 3 parts to storing the data, those three parts are the key, the value, and the expiry time of the cached item. The key is used to reference the stored data. in this example you can see that the key is an MD5 hash of the database query.
4. we then check if the key exists in the cache. this will return true or false. if the data is found in the cache then we can access it.
5. If the data isn’t found in the cache we connect to the database to get it. we store the data in the cache by using the follow line: $memcache->set($key, $row, TRUE, 20); $row refers to the array that we get from the database, notice the 20 at the end. This refers to the how long this item will expire in the cache. It is measured in seconds.

$memcache = new Memcached();
$memcache>connect('127.0.0.1', 11211) or die ("Could not connect");

include('includes/connect.php');

//set the key then check the cache
$key = md5("SELECT * FROM memcached_test where name='ashley'");
$get_result = $memcache>get($key);
if ($get_result) {
echo $get_result['name'];
echo $get_result['username'];
echo "Data Pulled From Cache";
}
else {
 // Run the query and get the data from the database then cache it
 $query="SELECT * FROM memcached_test where name='ashley';";
 $result = mysql_query($query);
 $row = mysql_fetch_array($result);
 print_r($row);
 $memcache>set($key, $row, TRUE, 20); // Store the result of the query for 20 seconds
 echo "Data Pulled from the Database";
}

This is a very simple example of how to use memcache, but I hope it has been an insight into how caching works.

A key tool for any budding web developer is API knowledge. It’s good to familiarise yourself with a variety of application interfaces. I started out using the Twitter REST API with PHP and CURL when twitter first launched the API to basically get a users tweets, pretty simple now I look back, but at the time it was the first time i’d done such a thing. As the development of social media continues this will increasingly open up opportunities to develop more and more applications that interact with one another and and make our daily chores more eventful.

Frameworks

There’s generally a framework for just about every programming language out there. Whether you decide to learn the jQuery framework for JavaScript or Cake for PHP each one will help you succeed as a freelancer and further your career as a web developer. Frameworks in many respects take out the arduous repetitive tasks we face daily and give us more time to focus on developing cutting edge products or applications.

iPhone Applications

Companies are Increasingly seeing the massive potential that there is in the mobile platform. Applications that are approved and make it into the Apple app store have the opportunity to be downloaded thousands of times and can potentially make a lot of money. Having a specific skill to be able to develop for this market can be very lucrative, especially in the current economic climate when companies are turning to social media to plug holes where they’re not seeing return on investment from other advertising sectors.

CMS Customisation

A handy skill to have is a general knowledge of how to use content management systems. For example building themes and plugins for WordPress, or modules and components for Joomla and Mambo. As a developer its important to have an idea of the structure of a variety of CMS’s. If you have a wordpress blog/site, that’s an easy way to familiarise yourself with the platform. Remember it’s always easier to learn something by immersing yourself in the technology.

Online Payments

Businesses are always going to need payment solutions online. Having the skills to take a site and integrate paypal or google checkout will allow you to go far. We’re starting to see many 3rd party software companies setting up and selling software at more affordable prices, take Panic for example. They are a relatively small company that develop a selection of web development software for the mac. Many new startups are settling for a product based revenue stream rather than making money purely through ads, revenue share, or partnership deals. This opens up the demand for skilled developers to be able to build payment solutions.

Widgets fit perfectly into a world where information makes it’s self available where ever the end user wants it. Widgets offer the great ability to be placed where the community will use it the most thus maximising a marketers message within the product.

Tracking widgets is easy with tools such as clearsprings and Gigya. These services allow users to virally spread your message throughout the net easily integrating your product in social networks and blogs. A site that’s bringing widget making to the masses is Sproutbuilder.com. Just out of Beta Sprout gives you the ability to create rich media widgets like the one below. Sprout offers a really great user interface built completely in Flex it’s a great example of an online application. Allowing you to embed RSS feeds, Twitter feeds, Yahoo maps, Google Forms, and much more. Design and style are completely up to you which is great as most sites only offer drag and drop interfaces with pre-set placeholders for content. templates are available for the less adventurous. Check out the video below on how to create your sprout.

Making money from widgets

Widgets are a great environment for brand advertising as they offer a real media experience and in time brands can leverage that experience to find ways to engage users with their product. We are seeing more and more brands sponsoring already popular widgets to get their message across.

Sites like Amazon and Ebay offer users affiliate programs encouraging them distribute their widgets with products. This is a great marketing initiative by these companies to take their products off the site and onto the users sites and networks, and the incentive to embed the widget is cash to the site owner of a visitor buys a product. So everyone wins. This has been a brief look at widgets and how your business can use this emerging form of media to target your audience.

The web is evolving all the time and with this the risk of your data falling into the wrong hands and identity theft, is greatly increased. Also with so many sites asking us to sign-up and choose a username and password the amount of login details that users have to remember are growing, this prompted a group of influential people from various web organizations to start the OpenID foundation. Openid.net (2008) explains further the service on offer:

OpenID eliminates the need for multiple usernames and login details across different sites, simplifying the users online experience. You get to choose the OpenID Provider that best meets your needs and most importantly that you trust. At the same time, your OpenID can stay with you, no matter which Provider you move to. And best of all, the OpenID technology is not proprietary and is completely free. For businesses, this means a lower cost of password, while bringing new web traffic. OpenID lowers user frustration by letting users have control of their login. OpenID is still fairly new but is becoming more and more popular, as large organizations like AOL, Microsoft, Sun, Novell, etc. begin to accept and provide OpenIDs for users. It is believed that there are over 160-million OpenID enabled URLs with almost ten-thousand sites using OpenID logins. OpenID has arisen from the open source community to solve the problems that could not be easily solved by other existing technologies. OpenID is a lightweight method of pinpointing individuals that uses the same technology framework that is used to identify websites. Because of this, OpenID is not owned by anyone, nor should it be. Today, anyone can choose to be an OpenID user or an OpenID Provider for free without having to register or be approved by any business or organization.

Brad Fitzpatrick Openid.net (2008) said, “Nobody should own this. Nobody’s planning on making any money from this. The goal is to release every part of this under the most liberal licenses possible, so there’s no money or licensing or registering required to play. It benefits the community as a whole if something like this exists, and we’re all a part of the community.”

Search engines like Google and Yahoo have made it easier to find what you want but the internet is still an un ordered jumble of pages that makes finding anything useful a problem. Tagging content can help organize it into sections. Social Bookmarks use tagging as their primary way of organizing content, if every page or piece of content was tagged with words relevant to that information users would be able to find the information that they want quicker. Every piece of content can be tagged on the internet, Flickr make it easy to tag photos adding more information to photo and even tagging yourself or friends in an overlay that is only visible when you hover over the image. The value of tagging is only made apparent within a community of likeminded people who help to sort and clarify information. Information taken from Wikipedia (2008) states that many bookmarking services provide RSS web feeds for listings, and as these web services have matured and grown in popularity they have added more social features allowing users to rate and comment on bookmarks leading to users really deciding on what’s ‘hot’ and what’s not. This way of aggregating and organizing data isn’t new, the concept of sharing online bookmarks dates back to April 1996 in the middle of the ‘Dot Com Boom’ with the launch of ‘itlist’ within the following three years, bookmarking services became very competitive. StumbleUpon appeared on the market in about 2001 allowing users to discover, review and rate web pages. StumbleUpon is on the outset a web browser plug-in allowing you to rate pages as you browse the internet. Information taken from Wikipedia (2008) states that eBay purchased StumbleUpon, which at the time had an estimated 4 million members, in May 2007 for an estimated $75,000,000. Other social bookmarking sites include Digg, Slashdot, Reddit, Fark and del.icio.us.