Recent Work: Hugh Buchanan
I’ve been doing more and more freelance Web Design recently, and here is my latest creation.
It’s the site for a Watercolourist Hugh Buchanan. Have a look, and let me know what you think.
If you are interested in hiring me, please do get in touch at f@finlaycraig.com
F
Dynamic CSS without using JavaScript
Let’s say you want some dynamic graphics on your website, but you don’t want to, or don’t know how to use JavaScript.
Well PHP might be the answer. The first thing I thought was, ‘How do a I get PHP into my CSS File?’. Well you don’t!
Inline CSS - most people hate it, but in this case, it can be useful.
<style>
#testdiv {
height: 50px;
background-color: red;
<?php
echo “width: ” . 250 . “px;”
}
</style>
Stick that in your <head></head> tags, and PHP will write the width command for you! Now this is a very, very simple example, but use your imagination, and you’d be surprised what you can do!
Rankiac Review | Keyword Tracking, Link Statuses, & Backlink Monitoring
If you wanted to find your website in Google, what would you search for? Possibly your sites name? Well that is one way of people finding you, but they are only going to find you that way, if they are actually looking for you. But if you want people to find you because of what you do, then you need to start thinking about your keywords.
Your keywords, or keyword phrases, are the words and phrases that you would like to appear in Google for. For example, if you search ‘Embed Tumblr Into Your Website’ this blog will come up in the top few results. That’s because it is optimised for those keywords. So how do you track where you rank for those keywords?
Well Rankiac is the answer to your prayers!
Rankiac is a tool which you can use to track all the keywords you could possibly need for your site, or even your competition. By using their comprehensive tools, you can receive daily updates on your sites performance, so you can optimise your site, in real time, for the phrases that you are interested in.
Rankiac gives you the piece of mind that your site is in the place that you want it to be in Google, without you having to do the hardwork every single day.
The system also provides the functionality to monitor links pointing at your site. These are called backlinks.
Backlinks are one of the major factors in Googles rankings, and is used to determine how popular your website is around the internet. Rankiac allows you to monitor these links, so you can ensure that your site is still relevant, and ranking well.
I’ve found Rankiac to be an invaluable tool in keeping on top of my rankings. Rankiac gives me more time to work on creating great content on my site, without having to keep going back to check my results.
I strongly recommend that you go and try it out, even if keywords are not something you think about much at the moment. Head over to http://rankiac.com/ to start your free trial now!
Embed Your Flickr Photos On Your Site
Here is any easy way to embed your photos from your flickr on your website in form which you can style. I’ll even show you how to intergrate this into the famous Lightbox plugin.
We are going to use a little bit of PHP here, so you’ll need end your files with .PHP instead of .HTML, .HTM, or .XHTML. Alternatively you can go behind the scenes a bit more at this post.
1. Embed Latest Photo On Your Website
Things you’ll need to do -
- Get an API Key (Quick, easy & free!)
- Get your Flickr ID (Not your username)
Here is the code that you will need to return your latest from your Flickr.
<?php
$flickr_id = ’ ‘;
$api_key = ’ ‘;
$size = ‘s’; //this can be ‘s’ for small, ‘t’ for thumbnail,’m’ for medium, ‘b’ for big, ‘o’ for original, or empty for 500px wide.
// EDIT NOTHING UNDER HERE.
$xml = simplexml_load_file(‘http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=’.$api_key.’&extras=tags&user_id=’.$flickr_id.’&page=1&per_page=1’);
$photo = $xml->photos->photo;
$farm = $photo->attributes()->farm;
$server = $photo->attributes()->server;
$photoID = $photo->attributes()->id;
$secretCode = $photo->attributes()->secret;
$tags = $photo->attributes()->tags;
$tags_array = explode(” “, $tags);
$title = $photo->attributes()->title;
echo <img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/>;
?>
So you need to fill in the gaps! First your Flickr ID, then your API Key, then the size that you would like your picture to be displayed at. That’s it!
2. Embed All Your Photos On Your Website
So we are taking what we learnt above, and adding a for loop, and a foreach loop. The for loop cycles through every page of photos you have uploaded. The foreach loop then goes through each page and returns each photo on that page. Simple!
<?php
$flickr_id = ’ ‘;
$api_key = ’ ‘;
$size = ‘s’; //this can be ‘s’ for small, ‘t’ for thumbnail,’m’ for medium, ‘b’ for big, ‘o’ for original, or empty for 500px wide.
// EDIT NOTHING UNDER HERE.
$xml = simplexml_load_file(‘http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=’.$api_key.’&extras=tags&user_id=’.$flickr_id);
$pages = $xml->photos->attributes()->pages;
for($page=1; $page <=$pages; $page++) {
$xml = simplexml_load_file(‘http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=’.$api_key.’&extras=tags&user_id=’.$flickr_id.’&page=’.$page);
foreach($xml->photos->photo as $photo) {
$farm = $photo->attributes()->farm;
$server = $photo->attributes()->server;
$photoID = $photo->attributes()->id;
$secretCode = $photo->attributes()->secret;
$tags = $photo->attributes()->tags;
$tags_array = explode(” “, $tags);
$title = $photo->attributes()->title;
echo ‘<img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/>’;
}
}
?>
3. Adding a LightBox Effect
So you’ve got all your photos onto your website, but now you want to display them in an attractive LightBox. Well first of all head over to Lightbox and download the Scripts and CSS which you need to embed on your page. (Their instructions are great, so i’m not going to take you through that bit!)
For LightBox to reconise pictures you need to add an attribute to a <a href> tag. So we are going to have to generate another URL. You need to add ‘rel=”lightbox”’ into your link.
Here is the code you need to swap -
Swap this
echo ‘<img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/>’;
For
echo ‘<a href=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’.jpg” rel=”lightbox” title=”’.$title.’”><img src=”http://farm’.$farm.’.static.flickr.com/’.$server.’/’.$photoID.’_’.$secretCode.’_’.$size.’.jpg”/></a>’;
Hey presto! You have embedded Flickr on your website! Now I don’t want to give too much away, but you this should be a pretty good place to start!
Enjoy, Finlay.
Downloading takes Forever!
Today has been a great day. Managed to get dug into some PHP in WordPress. What has been really interesting though is that I’m developing a WordPress site, but also using WordPress as my change log.
So for it’s worked really well as a change log. I can title posts, tag them, categorise them, embed code snippets and more. But what I an really looking forward to is being able to share everything I’ve learnt you you, the Internets! If it’s already on WordPress (in a private capacity) it shouldn’t be that difficult to bring it across to a live blog with more generic examples, right?!
Writing about what I’ve already learnt this year (I’ve only been coding HTML, CSS and PHP since January 2010) has already proven very useful. I can remind myself of how I did certain things, and share that with people with a simple link. Awesome!
Anywho, back to the PHP!
Embed Tumblr Into Your Website
In my exploration to learn on how to Embed Tumblr into my website, I came across the Tumblr API (Application Programming Interface). As I am no expert in coding, and having very little experience with PHP, XML etc, I wanted to find out how I could Embed Tumblr with the Tumblr API on a basic, and easy to use level.
If you’ve read my previous post on how to Embed your latest Tweet into your website, then you may have heard me ranting and raving about SimpleXML. Essentially (from what i’ve learnt so far…), lets you extract specific ‘bits’ of information from XML files, and do ‘stuff’ with those ‘bits’. Very handy if you want to Embed Tumblr on your website!
If you don’t know what an XML File is then that’s ok. An XML file is just a really organised way of structuring data. For the likes of the Tumblr API, XML files are used to store all the information in your latest blog posts, so that you can go in and take out only the essential information and do ‘stuff’ with that.
So let’s begin!
1. Retrieving your latest post from Tumblr
To tell Tumblr you want to return your latest post you have to give Tumblr a few pieces of information.
- That the post is on your blog
- That you want the latest post
- The type of post (text, photo, quote…)
Lets get our Tumblr XML Feed up then. We do that like this:
http://finlay.tumblr.com/api/read
If you stick that address into your browsers navigation bar, that will take you to the XML file where all my Tumblr posts are. Because we have not defined any parameters for what we would like Tumblr to return, it will just go ahead and send back everything I’ve ever written. So we’ve got to do something about that!
To tell Tumblr what we want back, we had information onto the end of the URL above, and it will send back that information. We start this by adding a ‘?’ to the end of the URL, and then list of the parameters one by one, separated by a ‘&’.
To tell Tumblr you want to bring back the latest post you have to tell it which post you would like to start at, and and how many posts to return. So as with all things computing, we start at 0, and tell Tumblr to return 1 entry. This is done like this:
http://finlay.tumblr.com/api/read?start=0&num=1
So we’ve told Tumblr that we want to read from my blog (through the API), from the first post (denoted by ‘start=0’) and that we want to return 1 post (denoted by ‘num=1’). Easy! We’re one step closer to Embedding Tumblr on your site!
Now we tell Tumblr what kind of post we would like to return. For the purpose of this demonstration we will return a text post. This is done like so:
http://finlay.tumblr.com/api/read?start=0&num=1&type=text
So stick that into your browser and that will return my latest text post.
2. Finding what we want to Embed and Spitting it Out!
Now that we’ve got the right information back, we now need to know how to get into that, and bring back only the bits we want. To do so, you need to be able to read the XML file in it’s pretty, organised way. Now if you go to that URL we made earlier for returning my latest text post, it won’t look that neat. But if you right-click on that page and select ‘View Source’, your browser will show you the raw XML File. We can then look through this and take out what we want!
So let’s assume we want to first return the Title of the Post (but this will work for anything in the XML File). So after a quick inspection we can see that the Title of my latest post is stored in the tag:
<regular-title></regular-title>
So, using SimpleXML in PHP, we can tell our PHP look through for that tag, and then return it’s entire contents. (Because that partiucular tag has a hyphen in it, we have to put {’ on either side of the tag so that SimpleXML can read it) We do that like so:
$title = $xml->posts->post->{‘regular-title’};
In this example i’ve created a variable called ‘title’ to give me somewhere to store the title.
We then use the echo command to print that out on my webpage. On my site I wanted to have the title of my latest blog post be a ‘<h1>’ so I concatenated (stuck together) my ‘<h1>’ tags with the title of the blog post in my echo of the title. Like this:
echo ‘<h1>’.$title.’</h1>’;
So now you can do that with the title, just do the same thing with the ‘<regular-body>’ tag to bring back the body of your post. That is, almost, all you need to Embed Tumblr on your website.
But what if you want to only bring back a taster of your latest blog post?
Good question! If you want to Embed Tumblr into your site, it may be useful to give the user a snippet of the blog instead of the whole thing. Well what we can do is take the contents of the ‘<regular-body>’, and tell our PHP that we only want to use X number of characters from that in our webpage. Do that like this:
$post = $xml->posts->post->{‘regular-body’};$small_post = substr($post,0,320);echo $small_post;
So what we’ve done there is we’ve taken the contents of the tag ‘<regular-body>’, and we’ve then used the substr() function in PHP to take only the first 320 characters from the post. Then we saved that into a variable called ‘small_post’ and then we printed that. Easy!
SO HERE IS ALL THE CODE YOU’RE GONNA NEED TO EMBED TUMBLR WITH THE BLOG TITLE, REDUCED BLOG BODY, AND THE LINK TO THE ORIGINAL POST!
<?php
$request_url = “http://finlay.tumblr.com/api/read?type=post&start=0&num=1”;
$xml = simplexml_load_file($request_url);
$title = $xml->posts->post->{‘regular-title’};
$post = $xml->posts->post->{‘regular-body’};
$link = $xml->posts->post[‘url’];
$small_post = substr($post,0,320);
echo ‘<h1>’.$title.’</h1>’;
echo ‘<p>’.$small_post.’</p>’;
echo “…”;
echo “</br><a target=frame2 href=’”.$link.”’>Read More</a>”;
?>
So there you have it! Everything that you could need to get started if you want to Embed Tumblr into your website.
If you have any questions please leave a comment below or email me directly - hello@finlaycraig.com
Happy Blogging!
ps… Have you used this to Embed Tumblr into your website? If so, let me know in the comments below!
