If you’ve just read my last post this will all seem very familiar. Best to just ignore it and move on…
Placing an image in Facebook is, as is usual with Facebook, a somewhat convoluted process (again) - but if you follow the steps methodically it should go smoothly. Maybe…
First you need to add the application static FBML to your Facebook page. Go to their page and click ‘add to page’.
To use this app click ‘edit page’ (under main photo when signed in as admin) then ‘edit’ in the FBML application box. You can then create or edit your ‘boxes’.
The app will allow you to include html into Facebook ‘boxes’. These boxes will appear in a tab marked ‘boxes’ on your main page. This will enable you to bring images, links and text from your server and place them in that box - if you have CSS in your repertoire you can even style them from a CSS file hosted on your server. This is very useful if want to create a custom landing page for your fans.
You can then click on the mini pencil icon and then click ‘add to sidebar’ - this will place that box in your pages sidebar. Please note that an image with a width of 180px will fit best.
To add a basic graphic image to your facebook sidebar do as follows:
Create a box in FBML with the following html:
<img src="http://www.YOUR_DOMAIN.com/images/IMAGE_NAME" border="0" align="left">
where the URL is where you’ve hosted your image.
The result should look similar to the sidebar on the following page facebook.papersurfer.com.
If you like funky house music then please feel free to become a fan…
This is, as is usual with Facebook, a somewhat convaluted process - but if you follow the steps methodically it should go smoothly. Probably.
First you need to add the application static FBML to your Facebook page. Go to their page and click ‘add to page’.
To use this app click ‘edit page’ (under main photo when signed in as admin) then ‘edit’ in the FBML application box. You can then create or edit your ‘boxes’.
The app will allow you to include html into Facebook ‘boxes’. These boxes will appear in a tab marked ‘boxes’ on your main page. This will enable you to bring images, links and text from your server and place them in that box - if you have CSS in your repertoire you can even style them from a CSS file hosted on your server. This is very useful if want to create a custom landing page for your fans.
You can then click on the mini pencil icon and then click ‘add to sidebar’ - this will place that box in your pages sidebar. Please note that an image of 180px will fit best.
To create an Add Photo button do as follows:
Create a box in FBML with the following html:
<a href="http://www.facebook.com/photoselect.php?oid=YOUR_FACEBOOK_PAGE_ID"><img src="http://www.YOUR_DOMAIN.com/images/IMAGE_NAME" border="0" align="left"></a>
where YOUR_FACEBOOK_PAGE_ID is the long number at the end of your page’s URL and the image source is where you’ve hosted your button’s image.
The result should look similar to this:
which you can see on the following page facebook.papersurfer.com.
Please note that this button will only work if you are signed in as a fan NOT as the administrator.
Please feel free to use the image above (preferably hosted on your server).
If you like funky house music then please feel free to become a fan…
I’ve recently started to take a more organic approach to site design - I was getting hacked off with the ‘clean’ or ‘3D’ look that web2.0 seems to be wallowing in. Previously connection speeds have been an issue but with browser and IP technology improvements this isn’t so relevant.
I tend to do basic layouts in Illustrator then ship it into Photoshop for refinement - not strictly necessary but it works for me. Then I get stuck in with my tablet using various airbrushes and paint-style brushes making sure to keep every element in layers and groups so any of your many inevitable mistakes (if you work like me) can be erased easily.
I usually make a ’short page’ as below.
This contains all the artwork for the header, mid-page section and footer. This will then get ’sliced’ in photoshop into the 3 sections and placed into the page design (I usually use a 10 pixel slice for the middle repeated section - this seems to be a fair compromise between loading speed and rendering speed for individual computers).
If gradual gradients are avoided and a more ‘paint’ or ‘pencil’ feel is achieved then a higher level of compression can be used without much visual loss enabling file sizes to be kept down.
At some point you may decide to take the leap from a pre-packaged online blogging platform such as Blogger or Wordpress.com and set up your own Wordpress installation. It may seem like a crazy notion but if you choose the right host they will do most of the work for you. Also these days the very nice people at Wordpress have made the installation a fairly painless experience with excellent software and tutorials.
Then of course you need to install a new theme. There are thousands available - wordpress.org/extend is a good place to start. Then you will need to use an ftp client such as Filezilla (free, open-source and excellent) to upload your new theme (this will go into the following directory www.your_blog.com/wp-content/themes). Then activate from your Wordpress dashboard by going to dashboard>design>themes then click on the theme you’ve uploaded.
At some point you may wish to start to edit your theme - changing fonts, colour schemes or even graphics. This can be done straight from Wordpress by going to dashboard>design>theme editor and directly editing the stylesheet. This all works very well but the possibility of making a mistake is high and this will ‘go live’ as soon as you hit update.
The best way to deal with this is local editing on your computer. Open your themes files in your FTP client and drag the stylesheet and images folder into a new folder on your desktop. Then save a page from your blog as html only in the same folder - open that page in a text editor such as wordpad and change the address of the stylesheet from a URL (probably something like <link rel=”stylesheet” type=”text/css” href=”http://your_blog.co/wp-content/themes/your_theme/style.css” /> to a local address such as <link rel=”stylesheet” type=”text/css” href=”style.css” />.
This will then mean you can open your saved page in a browser and edit the style.css without touching your real website.
If you know nothing about CSS (cascading style sheets) then please ignore this article and go straight to the pub, drink several large fruity cocktails and talk rubbish to man named Nigel.
A recent problem found some interesting solutions - I wanted to show a feature on posts of a certain category only.
The feature was the excellent ratings widget from gdragon - the problem was that from their dashboard it was either all or nothing regarding which posts showed the widget.
So I included the following code in the loop (in my case on index.php and single.php) where I wanted the widget to appear
<?php if ( in_category('2') ) { include ('ratings_widget.php'); } ?>
…where ‘2′ is the category ID for which posts I want it to show in.
I then created a file called ‘ratings_widget.php’ which included only the placement code for the widget. I then uploaded it with the theme’s php files (next to style.css) via ftp.
The result being that the code was only included in the page when the category was the one I wanted. Easy. Ish.
A similar process can be used to style a particular category of post by using this…
<?php if ( in_category('2') ) { echo ('class="style_for _category2"'); } ?>
(obviously change ’style_for _category2′ to something better).
Or even include features on particular pages instead of categories with this…
<?php if ( is_home() ) { include ('feature.php'); } ?>
This will give huge flexibilty to layout and feature placement to your blog without having to place the code into every post or creating templates.
I was recently asked by JohnC from lifeonwards for some icon creation tips for Photoshop and links to tutorials about the same.
My first tip for icon creation is to steer away from Photoshop for this sort of image creation - all the tools are there if you need them but Adobe Illustrator is much better suited for creating small, clear graphics.
The clue being in the name - Photoshop is a bitmap editor working on individual pixels so is therefore perfect for manipulating photorealistic images. Illustrator is set up for creating clear, graphical type images and as it uses SVG (scaleable vector graphics) perfecting layout and general design is a lot easier.
The 2 programmes are very similar in use - the tool palette is similar and so is the layer/sub-layer system and can also be used together very easily. I quite often make up a basic layout with illustrator then drag it into Photoshop to tweak a few things with an airbrush or whatever…
As for tutorials - there are millions of sites out there and a good google around will certainly get some interesting results - I generally start at the Adobe design centre and if they don’t have what I’m looking for then head back out into google land…
For a loverly calendar style date for your posts please steal the following code…
First you need to place some code into your index.php file just after the start of the loop ie just after
<?php while ( have_posts() ) : the_post() ?>
as follows…
<div class="date_cal">
<div class="day"><?php the_time ('D'); ?></div>
<div class="date"><?php the_time ('j'); ?></div>
<div class="month"><?php the_time ('M'); ?></div>
<div class="year"><?php the_time ('Y'); ?></div>
</div>
Then add this to your stylesheet…
.date_cal {
float:right;
display:block;
width: 50px;
height: 80px;
margin: 0 10px 0 0;
background: url('images/datebutton.gif') no-repeat;
}
.date_cal .day {
color: #FFF;
font-size: 15px;
margin: 1px 0 0 6px;
}
.date_cal .date {
color: #333;
font-size: 16px;
margin: 1px 0 0 6px;
}
.date_cal .month {
color: #333;
font-size: 13px;
margin: 0 0 0 6px;
text-transform: uppercase;
}
.date_cal .year {
color: #333;
font-size: 9px;
margin: 0 0 0 6px;
}
Then add a calendar image called datebutton.gif 50px wide and 80px high to a directory named ‘images’ in the top level of your current themes directory (ie yourdomain.com/wp-content/themes/currenttheme/images).
You can steal one of these if you like (just drag them onto your desktop and rename)
(only good for light backgrounds)
PS you may have to tweak margin sizes depending on default lineheights etc.
- my first full theme for Wordpress. You can download it here. Please get back to me if you find any glitches, bugs or hooning errors. Or actually - just keep them to yourself and let me live in blissful ignorance…
