Seems like new “personal homepage” sites like About.me and Flavors.me are popping up daily. These sites are fun and interactive but lack a lot of customization. The benefits of these sites are obvious though:
- Consolidation of content and links to social networks
- Another site/page to rank well for your terms or name
- A great solution for a personal website
- Fast and easy to set up
Being a designer and developer it was hard for me to work with these sites and not have the freedom to do whatever I wanted to do. So instead of griping about it (like I usually do) I did something about it. I created my own personal homepage / social media landing page.
This was a very simple project that I finished in a relatively short timeframe. As always everything I do is built on WordPress and the same goes for this site. Once I finished the design and front end development it was a breeze turning this into a custom WordPress theme.
There are a few elements that required some custom programming but in the end were really simple to accomplish. When you arrive at the site you see a simple statement that is random and generated upon site load. As you scroll down you’ll see some bio information on me, links and social media profile widgets.
You’ll also notice a map that pulls my location from my most recent Foursquare checkin. This is actually extremely easy to do once, you know what you’re doing.
Steps for Creating Your Own Foursquare Map
- Login into Foursquare and go to https://foursquare.com/feeds/
- Grab the url for your .kml feed (this is an xml document perfectly formulated for Google Maps)
- Append the .kml url to a “Google Maps” map iframe embed
- At the end of the .kml url you can specific how many locations to pull by adding “?count=#” (I request 1 location, the most recent, because I just wanted it to show where I am currently)
- Google Maps allows for simple embedding of maps and adding of your own “pins”. To do this create a simple iframe
- Start here;
- Add your .kml file location =&q=http://feeds.foursquare.com/history/6150ab669aeaf16be.kml?count=1
- At the end of it all add &ie=UTF8&output=embed (the output=embed is vital to embedding the map on your site).
Example Code:
<iframe scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=http://feeds.foursquare.com/history/6150ab669aeaf16be.kml?count=1&ie=UTF8&output=embed”></iframe>
Once you’ve added the map you can use css to style it’s width, height and other properties. Please be aware that your Foursquare feeds are not meant to be public and by doing this you are making your locations public. Please do this at your own risk.
Adding the social media network profile boxes (facebook fan page and linkedin) can be easily done through those networks. Also Twitter just added the functionality to put a “follow” button right on your site with a simple script, where I had to actually create an application to do this.
This article is part 1 of a series, so look for part 2 where I discuss pulling in specific types of tweets and other rss feeds. You can see this being done at the bottom of my site with the Dribbble (http://dribbble.com ) feed and my tweets.
