If you are having problems embedding youtube videos on your facebook wall or page (sometimes they don’t show the description and thumbnail and show a captcha or human verification graphic instead simply put a semi colon after the link. This may be due to a copyright issue or bug. This doesn’t always work but is worth a try…
So use:
http://www.youtube.com/watch?v=ym_-k3cf0VM;
instead of…
You may wish to create a different look for an individual post or page. This could be as simple as using a different background image called with a CSS class (use the post/page name or ID number as the class definition.
You may want to do something slightly more drastic that involves an entirely new stylesheet. This is very simple to achieve by placing an addition to the metadata in your post in the custom field area of your editing page.
In the key field use a name for your action (in my case ‘custom_style’)
In the value field place the url of your new stylesheet ie http://yourdomain/stylesheets/custom.css
Don’t forget to place your images folder next to your new stylesheet.
Then place the following code in header.php below your existing stylesheet call.
<?php $customcss = get_post_meta($post->ID, 'custom_style', true); ?>
<?php if ($customcss != "") { ?>
<link href="<?php echo $customcss ?>" rel="stylesheet" type="text/css" />
<?php } ?>
Sorted. I’ve done exactly this for this post. In this case all I’ve done is change the background image and colours but you can do anything you like…
As Facebook gradually battles Google for interwebular supremacy you’ll probably want to integrate a ‘like’ button directly into your posts or pages - just like the one after this post…
Simply place the following code into your single.php or page.php after the loop and suddenly you will be smothered with facebooky likedness all over your readers walls…
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink();?>&layout=standard&show-faces=false&width=249&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:25px"></iframe>
If you’re not using Wordpress replace the following code with the url of the page you are linking to…
<?php the_permalink();?>
Feel free to like this post. Spread the like…
If you require a page (home or otherwise) that contains editable content plus a dynamic list of excerpts of new posts then read on (wordpress).
Copy and paste page.php into a text editor and place the following code into the top. This will ensure that ‘yourpagename’ will appear in the list of templates in your page creation/editing form for you to choose. Then save as that name and place back in the theme directory that you are using…
<?php /* Template Name: yourpagename */ ?> ~
Then place the following code wherever you want the list of excerpts to appear - normally below the loop that is already there. This will create another loop that will show 5 posts in the category ‘news’ with a title ‘my latest news’. Please edit any of these to suit your needs.
If you want all types of posts to show leave out category_name=news&
<h3>My latest posts</h3>
<?php $temp_query = $wp_query; ?>
<?php query_posts('category_name=news&showposts=5'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
You can add as much or as little to the loop as you like in the way of text or php calls. It can be wrapped in a styling class and have a border, background or different fonts etc But that’s a whole other story called CSS and quite frankly my day just isn’t long enough to get into that right now…
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…
If you have previously used calendars for wordpress then you may be interested in a few more background styles for your blog post dates. Feel free to drag or copy these to your desktop then upload them to your theme design.
(You may need to adjust margins for the text depending on your font size/style and line heights)
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.