So I was playing around with how to display archives of all the posts from the past 5 years or so here on Dabbled, and came up with this idea:  It’s a photo based archive that pulls a random selection of posts from a bunch of project related categories.  Just reload to see a different selection!   It was really fun to be reminded of old projects, interviews, and guest posts.

Go check it out: 48 Random Dabbled Posts from the Past

I have so much fun just reloading it and seeing what I get!

For how to make something like this for your own blog, read on..

How to create a random photo archive page (WordPress)

So, to build a page like this for your own site:

First, you’ll need to create a page template for it.  Easiest way to do that is to take your ‘page.php’ template, save it as photoarchive.php, then add to the very top:

<?php 
/* 
Template Name: photoarchive
*/ 
?>

Next your going to be replacing the content section of the page with a new query.  Go down to where you’re pulling the title of the page (look for <?php the_title(); ?>).  You’ll want to put your new query loop under that.  Get rid of the section that has the_content(); .

The query:

<?php global $wp_query;
 $args=array(
 'orderby' => 'rand',
 'cat' => '186,134,148,163,179,173,174,183,199,174,665,4',
 'posts_per_page' => 48 
 );

$new_query = null;
$new_query = new WP_Query($args);

while ($new_query->have_posts()) : $new_query->the_post(); ?>

[html to display the photos goes here]

<?php
endwhile;
wp_reset_postdata(); ?>

This is basically pulling 48 posts, chosen at random, from the categories listed (by category number).

Next you’ll need to add the html to display the thumbnail photos from each post, along with the title and a link back.

<!-- begin post -->
 <div class="relposts">
 <?php /* Image processing. checks if post thumbnail, then if Image attribute is set,
else it takes the first attached image*/ ?>

<?php $values = get_post_custom_values("Image"); ?> 

 <?php if(has_post_thumbnail()) { ?>
 <div>
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
 </div>

 <?php } elseif (isset($values[0])) { ?> 

 <a href="<?php the_permalink() ?>" rel="bookmark" title="Link to <?php the_title(); ?>"><div>
 <img src="<?php echo bloginfo('template_url'); ?>/scripts/timthumb.php?src=/ <?php $values = get_post_custom_values("Image"); echo $values[0]; ?> &w=150&h=150&zc=1&q=100" alt="<?php the_title(); ?>" class="center" width="150px" height="150px" /></a>
 </div>

 <?php } else { ?>
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
 <div><a href="<?php the_permalink(); ?>"><?php attachment_image ($post->ID, 'thumbnail', 'alt="' . $post->post_title . '"'); ?></a></div>
 <?php } ?>

 <?php /* End Image processing. */ ?>
 <div class="bottom reltext"><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a> </div>
 </div>
 <!-- end post -->

The whole thing is wrapped in a class called relposts (because i developed the style for related posts thumbnailing) .

Most of the above html (the teal stuff) handles getting the images (I really should pull that out into a function sometime).  Basically it says if the post has a ‘featured image’ then get it.  If it doesn’t, then look at see if the Image custom field is set, and grabs that url (because yes my blog has been around for a while and that was how timthumb handled thumbnailing- you can delete this!).  Then if not, then get the first attached image (which is calling a function called attachment_image to get that info).   Here is a function you can use to get the first attached image.

One note, every post should have a photo, so I didn’t add a default image option if no image was found, but I’d recommend adding that to your IF statement.

After we get the image, we’re just getting the post title/link (in it’s own div called reltext).

Then we use css to stack the text on top of the photo.  Here’s the relevant stuff:

.relposts {
float:left;
position:relative;
width: 160px;
margin-bottom: 2px;

}

.relposts .reltext {
position: absolute;
top: 0px;
left: 0px;
width: 150px;
background-color: rgba(255, 255, 255, 0.6);
padding: 4px;
}
.bottom {
top:auto!important;
bottom: 0px!important;

}

And that’s about it.  Create a new Page called Random Photo Archive, and set it to your new template!

I love go out to look and see what items on Dabbled people are pinning on Pinterest.  I had no idea some of my old posts had gotten rediscovered via Pinterest till I noticed some of them had a bunch of pins.  If you have a website, and you want to know what items on your site are getting pinned, you just need to go to http://pinterest.com/source/yourblogname.com/ (in my case http://pinterest.com/source/dabbled.org/) .

So I was thinking, wouldn’t it be cool to have a sidebar widget or something where I could highlight Dabbled posts that are popular right now on Pinterest?  Now, it’s pretty easy to add a widget to show your own posts (as we discussed, those have an RSS feed, and there are many plugins around to make that super simple).  But there is no feed (as far as I can tell) for the /source/ page.  So we have a two step process:  First, we need to build a feed, and second, we need to display in our sidebar. And, if you’ll look to your right, you’ll see it in the sidebar, under the “Past Projects” list.

Building an RSS Feed from your blog “source” page on Pinterest

I got a ton of help on this from two posts:  How to Add a Pinterest Pin Board to Your WordPress Blog by JesseLuna and How to Track Your Website’s Content on Pinterest at Mashable.   Neither was doing exactly what I wanted to do, but together, they helped a bunch. The JesseLuna post has a good step by step, so I’m not going to recreate the whole thing here.  Basically you go to Feed43 to create a custom feed. When you get to Step 2: Define extraction rules, you can leave Global blank, then enter the following code in the Item Search Pattern field:

<a href="http://pinterest.com/pin/{%}" class="PinImage ImgLink">{*}
<img src="{%}" alt="{%}"{*}
<p class="description">{%}</p>{*}
<a href="{%}" title="{%}" class="ImgLink">{*}

You’re basically just pulling out the information you’ll need with this. When you get to the RSS Item Properties section, do something like this: Item Title Template*: [?]

{%3} Pinned by {%6}

Item Link Template*: [?]

http://pinterest.com/pin/{%1}

Content:

<a href="http://pinterest.com/pin/{%1}"><img src="{%2}" alt="{%3}" /></a><br/>
Shared by <a href="{%5}">{%6}</a><br/>
[<a href="http://pinterest.com/source/dabbled.org/">All Dabbled.org Pins</a>]

Note that the last line of the content is just a hard coded link back to the /source page.  You can leave that out, or change it to your own source page.

If you’ve done everything right (and again, follow the directions on the other blog, just use my info above for pulling from the /source/ page), you’ll have a spiffy homemade feed, suitable for putting in your feedreader (if you’re obsessive about when people pin your posts) or, as we’re going to do, add to a sidebar widget.

Creating a sidebar widget for your new feed

Now, if you don’t care about photos, and just want a list of items, you can use the built in RSS widget in WordPress.  Easy Peasy.  In my case, I wanted to show the photos of the Pinned items, with a link back to the Pin itself, as pinned by the reader.

My solution was the Anyfeed Slideshow plugin for WordPress.  The Super-Simple Pinterest Widget might also work for your needs, the format just wasn’t what I was looking for.  But either will pull in images and titles from your newly created feed.  (Have you tried something else? Leave a comment!)

For AnyFeed Slideshow, I just installed it, and configured it on the Widgets page adding my own title and the feed URL I got from feed43.com.

You can play around with the display options, but the main setting I changed was checking off the following:

• Show Navigation?
• Show Titlebar?
• Permanent Titlebar?

I did notice that I could only have one feed widget on a page.  Trying to add a second one on the same page to show Foodwhirl.com Pins didn’t work.

So, wanna see it?

Well, it’s over on the sidebar now –>

In addition to the slideshow widget, I added a couple of Buttons (see below), and some explanatory text in a second text widget.  If you’ve pinned something on Dabbled recently, you’ll see yourself in the box!  It pulls the last 30 or so Pins, and I’m not sure how quickly it updates.

Summer Inspirations – Cool things to do this summer…

[prw username=”dorsner” boardname=”summer-inspirations” maxfeeds=”9″ divname=”myList” printtext=”0″ target=”newwindow” useenclosures=”yes” thumbwidth=”170″ thumbheight=”170″ showfollow=”medium”]

Direct Links: Citrus Vodka |   Personal sized baked oatmeal  | Little Monster Birthday Party – Watermelon Fruit Monster | Pop Rocks Rimmed Cocktails!  | Oreo Popsicle Recipe | Edible Cookie Dough Bracelet! | Beaded Crochet Bracelet Tutorial | Strawberry chocolate jello shots |  Guiness Ice Cream Car Bomb Sundae

How to add a Pinterest Pin Board to a Blog Post (WP)

This was not overly obvious, and required a bit of research, but basically there is an RSS feed for any of your pin boards on Pinterest.  Example: http://pinterest.com/dorsner/summer-inspirations/ board’s RSS feed is http://pinterest.com/dorsner/summer-inspirations/rss . Once you know that you have a feed, you’re halfway there, and there are probably multiple ways to handle it.

I took the quick way out and snagged the Pinterest RSS Widget plugin so I didn’t have to reinvent the wheel.   Conveniently enough, not only does the plugin allow you to add a widget to your sidebar with any Pinterest feed, they also include a shortcode that makes it super easy to embed the pin board directly into a post.

So for the board above I used the following shortcode – replace the curly brackets } with square brackets ], obviously.  The syntax is pretty self explanatory, but the explanation for each field is here.  The username is your Pinterest name, the boardname is the name of the board.  Max feeds is the number of posts you want to show.   The divname is for styling (I didn’t worry about that here).  Printtext determines if you want to include text- I didn’t.  I set the thumbwidth/height to 170 to make 3 across, nicely spaced.

{prw username="dorsner" boardname="summer-inspirations" maxfeeds="9"

divname="myList" printtext="0" target="newwindow" useenclosures="yes"

thumbwidth="170" thumbheight="170" showfollow="medium"}

And that’s really all there is to it.  It was easy to do, so I will probably do it again sometime, as a good way to collect links.  I know there are mixed feelings in the crafty blogging world about Pinterest, and I’ll admit I haven’t really done much with it yet, but I do think it does have some excellent potential.

The code

In part 1 we created a cool graphic to put on your 404 page.  (Part 1: Photoshop tutorial to make a “torn out” image)

Now, you need to integrate it into your 404 page, which is the page that comes up when a page is not found on the website. Again, I’ll be using the 404 page for Foodwhirl.com in this tutorial.

This tutorial will be written from a WordPress point of view, but I would assume if you have a bit of knowledge, you could use similar steps on any blogging platform.  Also, there are multiple ways to accomplish this, I just tried to come up with a way that is easy to explain and doesn’t require a ton of knowledge.  You should be able to do this without being an expert at getting into the code on WordPress, but be aware this does require some messing with code.

This is also a great tutorial if you’ve always wanted to know a little more about how to change your wordpress theme a bit.

If you’re going to be messing around with your CSS, a great tool to have is Firebug.   You install it on Firefox and then right click and choose Inspect Element.  That lets you view and change (temporarily) your css on the fly. 

I also recommend you install an FTP program, like Filezilla, or Fireftp, to make it easy to upload files.

Part 2:  Adding the graphic to your website 404 Page

Get set up

First off, take a look at your current 404 page.  If you want to know what it looks like, just type your web address, slash a page that doesn’t exist.  So for example:  http://Dabbled.org/sldalkgj will take you to Dabbled’s 404 page (which is what inspired this tutorial!) .

Note: If you don’t get a Page Not Found when you try this on your own site (like the homepage just reloads) then you’re missing your 404.php template in your WordPress theme.

So, we’ll need access to 2 files to fancy up our page:  style.css and 404.php.  You’ll find them in the wp-content/themes/yourthemename directory.   I recommend any time you’re going to mess around with your theme files, getting them via FTP and saving a local copy to work on, as well as a backup copy in case you screw up royally.

You’ll need a text editor.  I always use Notepad++, but regular Notepad or any plain text editor will work.  DO NOT use Word or anything like that.

So, we now both of our files open in our text editor.

Upload your image

You image must be on your server.  I would normally put it in wp-content/themes/yourthemename/images, and that’s what this tutorial assumes.  So upload 404image.png (or whatever yours is called) to this directory.

404.php

The 404.php page is what loads when you get a page not found error.  It will look different depending on your theme, but they will all pretty much have the same elements.

What we are basically going to do here is use the new graphic as a background on a div on the 404 page.  Don’t worry if that doesn’t make sense, I’ll walk you through.

Here is the code in my 404.php file for foodwhirl.com.  Yours probably looks similar.

<?php get_header(); ?>  

        <div id="container">    
            <div id="content">

            <div id="post-0" class="post error404 not-found">
                    <h1><?php _e( 'Not Found', 'your-theme' ); ?></h1>
                    <div>
                        <p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'your-theme' ); ?></p>
                    <?php get_search_form(); ?>
                    </div><!-- .entry-content -->
                </div><!-- #post-0 -->            

            </div><!-- #content -->        
        </div><!-- #container -->

<?php get_sidebar(); ?>    
<?php get_footer(); ?>

Look for the part of the page that has the 404 error text.  Something like “We’re sorry, but your page cannot be found”.  You can change this to something clever if you like by just modifying the text.  Note, to be safe, I’d stay away from special characters, apostrophes, and so forth in the error text.

Now, look for the div that surrounds your error text.  In the case of what I pasted above, div id=”content” is what we’re looking for (container would likely work too), and change it like so:

<div id="content">  becomes  <div id="content404">

(Techie note: there are more elegant ways to do this, but this is the easiest to explain in layman’s terms)

style.css

Next on to your style.css file.

You’re going to add this to the end of your css file.

 
#content404 {
    background: url(images/404image.png) no-repeat transparent;
    border: none;
    float: left;
    width: 653px;
    min-height: 600px;
}

The important parts of this are background (that sets the background to our new image), and min-height which i set to taller than my image.  The other items I got from the #content section of the css file.  Start with just adding the background, and if things look wonky go in and search for #content, and copy lines to your new #content404.

Now my 404 page looks like this:

The torn section looks fine, but the words are not in the right place, and it’s only showing up in that small section of the page.

So, improvements.

I decide I don’t want to show the sidebar, so I go to 404.php and remove the line:

<?php get_sidebar(); ?>

Then I centered the image, so my css now looks like this:

#content404 {

}

If you want your 404 image to overlay the header area (like it does on the Dabbled.org example) just move it up a little on the screen by adding something like:  margin-top: -50px;  to the #content404 section.

The Error Text

I also want to move the text so it displays on top of the image.

To do that I need to target the post text, which in my example would be this:

<div id="post-0" class="post error404 not-found">

You’ll notice there is already a class identified called error404.  If there isn’t one on yours, just add it in.

So in my css file I add:

.error404 {
background-color: rgba(256, 256, 256, .5);
font-size: 1.2em;
padding-left: 300px;
    padding-top: 50px;
    width: 200px;
}

• The background color setting adds a semi-transparent white box behind my text for better readability against the image.
• I increased the font-size to my liking, and used the padding settings to move the text to where I wanted it on the screen.
• I set the width of the text area as well.

Now this is what I have:

Obviously, your settings will be different on your text area to get it to the right spot.  This is where firebug comes in really handy, as you can Inspect Element and change width and padding to get it where you want it, then just copy those settings over to your style.css.

And here it is in action: http://foodwhirl.com/notarealurl

That’s it!

So several people have asked how to do something like this themselves. Obviously you’ll probably want to do something different than I have, using an image or a theme that fits with your site.

So, to show you a slightly different take with this tutorial, I’m going to walk you through doing a 404 page for Foodwhirl.com.  Since foodwhirl is a recipe site, I’ll use a photograph instead of the little robot drawing, and an image more appropriate to food.  A search through Creative Commons licensed (I adore CC licensing!)  images on flickr found me this ‘empty refrigerator‘ image, which I thought would be cute for a Page not Found on a food site.

Part 1 will address how to create the image for use on your webpage.  Part 2 will explain how to make it part of your 404 webpage, even if you’re pretty clueless around code.  It will be written with WordPress websites in mind, but you should be able to take those principles and apply to any website.

Part 1:  Create the Image.

For this step I’m using Photoshop.  You could probably do this with other image software as well*

Get an image to use behind your torn background.

This could be a photograph or a drawing, preferably something funny that relates to your site.  If you have a crochet site, for example, a kitten tangled in yarn could be cute.  (oops, the kitten got into the yarn and now we can’t find your page!).  Maybe you want to have a picture of exposed gears like they are seeing the background machinery that makes your website work.  Use your imagination.

Get your site’s background.

Create a new image in Photoshop, at about 1000×1000 px, at 72 pix per inch, just to have plenty of room to work.

Make a new layer and make that the same color as the background of your site.

(If your site is a solid color, you’ll need that color.  If your site has a texture overlay as the background, get the texture.  Note, if you site is say white, with some blue designs on it, don’t worry about the designs, you’ll just need white.  You’re just looking for the primary color of the background of your site.  Foodwhirl is white, so that’s all I need for that.  For Dabbled I actually used the .jpg that creates the watercolor paper look on the site.  Taking a screenshot of the site background will also work   But minimally, you want to get as close to the site color as you can.)

The Torn Section: Sizing

Next you’re going to want to figure out how big to make your torn section. For Dabbled, my image is about 600×600 at it’s widest points.  You’ll want to take into account how much space you have on your screen, whether you want to overlap the header at all, and whether you want to leave your toolbars visible.  For Foodwhirl, I think I’ll keep the size about the same, or maybe a little smaller.

I’m going for about 600×500 here.

• Paste your image into a separate layer, shown above.
• Turn your background into a layer if it’s not one already (rightclick to do so) and set it’s opacity to 75%.
• Move it on top of the photo layer (shown below)
• Turn off “Snap to Guides” (View|Snap To) and draw an odd shaped space with your lasso tool.

• Once you have a shape you like (remember, you’ll need room to add text to this, so space accordingly), make sure you are on the solid background layer, and click ‘delete’.
• Set your layer back to 100%, so you can’t see through it anymore.

• Now Expand the selection by about 6 px. (on my old PS version that’s Select|Modify|Expand)
• If you like, you can nudge the select a pixel to the right using the arrow key (makes it a little less uniform).
• Now,  create a new layer, and fill the shape with any color you want.  Hide that layer (you’ll need it later).
• Go back to your background layer.

Your Torn Edges

The area you now have selected is the area that will simulate the thickness of the paper where the multiple layers show up when you tear it.

Color-wise, you’ll want to think about what color you would see if you tore paper that is the color of your background.  A red background, for example, would probably look dark pink inside.  A creamy background could get away with white.

For my pure white background, I’m going to set both my foreground and background to a very light offwhite/cream color, and use the Torn Edges filter, as well as the Add Noise filter.

You’ll want to play around with this to get a good effect.  Experiment with different colors and filters depending on your background.

This is really subtle (maybe too much so) but this is what mine looks like zoomed to 280%

Next we add some depth, the quick and dirty way.  Our good friend the dropshadow layer style.

Play around with the settings, but this is what I used for mine. (Click to view larger)

Now we have our photo, we have our background with torn edges, we just need to cut it out.

• First, merge your background color layer, with the image layer.
• Remember that layer I told you to create earlier, and just fill the shape with any color?
  Go unhide that layer, and click on the shape with the magic wand tool to select it.
  Now go back to your merged layer, Select Inverse, and delete.
• (OK, for this example you really don’t have to do it this way, as you could just select the white background, but this is a simple methods and works with all backgrounds, even textured and multicolored.)

All that will be left is your lovely torn out piece!

• Trim this (Image|Trim) and Save For Web as a PNG.

Look, we made a hole!

Note, I don’t think this is quite as effective as the one on Dabbled, as the watercolor paper leads to a better effect than just the plain white, but it’s still pretty cool.

So, next will be part two where I explain how to make it part of your webpage:  Torn Page Tutorial Part 2: Put a cool graphic on your 404 page (WordPress).
—–

*I’m a photoshop girl myself, but if you don’t have it… there’s a learning curve, but I recommend Gimp for those who like free and powerful image manipulation. 

I’ve seen several cute 404 pages recently, but mine was inspired by the one on Swiss Miss (great design site). Here’s her’s.

If anyone’s interested, I’ll write up a quick tutorial on how to make the graphic in photoshop, and also how to incorporate it into your 404 page.

PS: you can see another version of the same thing at my sometimes updated art site: http://nancydorsner.com/sdjflk

so stay tuned, this isn’t final… more to come!

Facebook pages are generally pretty boring, and I have a client who wanted a fancier facebook landing page.  So I decided to create one for Foodwhirl to see how difficult it was, before I costed it for her.  And, though a little complex (once I figured out that facebook was no longer supporting FBML and I needed to use iFrames, i found this great tutorial) , it wasn’t too hard for my mad web skillz.

If you haven’t “Liked” foodwhirl, just go here: http://www.facebook.com/Foodwhirl to see it!  And of course, Like foodwhirl while you’re there.

If you have friended Foodwhirl on Facebook, you can still see the page, just click ‘Welcome’ in the list in the left sidebar.

NOTE: if you’ve enabled secure browsing in facebook (https:), you’ll get an error message first.  Just click to go to http for that session, and you’ll be able to see it.

If your WordPress theme came out prior to 2.9 or 3.0, it won’t have support for the Featured Image functionality.

To enable the functionality, you need to add this line to your functions.php file.

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}

Once you do this, you’ll see “Use as Featured Image” next to the Insert Into Post button. (You’ll also see a Featured Image box under the Post Tags box on the right side of the Edit Post page)

If you’re just trying to fix the Facebook issues we talked about yesterday, and you’re using the plugin I suggested, this is really all you need to do to set a specific image to come up on Facebook.

However, this Featured Image won’t do anything else for you, unless you implement ‘featured image’ functionality elsewhere in your theme.

The following is for those who aren’t afraid of messing with their theme files:

So if you want to actually USE the featured image, as say a thumbnail for your for your posts on your archive pages, or something like that, you’ll have to make a few more changes to your theme.

If you want to add thumbnails to your posts.

Let’s say you aren’t using any sort of thumbnailing functionality right now.  On your category page, you just show an excerpt.  If you want to add your thumbnail sized image to display next to the excerpt, add this to your category.php file right above where you see <?php the_excerpt(); ?>:

<?php if(has_post_thumbnail()) { ?>
 <div class="thumb">
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
 </div>
<?php } else { ?>
<?php } ?>

This basically says “If the post has a Featured Image set, then show it in the thumbnail size (and have it link back to the full post)” .  If not, don’t do anything (I left the ‘else’ in there in case you wanted to do something different if it wasn’t set)

If the image display looks odd, you can fix it with css.  In your style.css file, you can set the styling for the thumbnail with something like this .

.thumb {

float: left;
padding-bottom: 5px;
padding-right: 10px;
padding-top: 0;

}

If you already  have some sort of thumbnailing functionality, and you want to use the featured image when it’s set:

Look for where you are displaying the image next to the post.  You’ll want to tell the file to look and see if a featured image is set, and if it is, display that.  Otherwise display the image using whatever method you were using prior (unless you want to go set the featured image on every past blog post, which wouldn’t want to do).

<?php if(has_post_thumbnail()) {      ?>
 <div>
 <a href="<?php the_permalink(); ?>">
   <?php the_post_thumbnail('thumbnail'); ?></a>
 </div>

 <?php } else { ?>

whatever you were doing before

<?php } ?>

Example:
 <div class="entry-summary">
 <?php if(has_post_thumbnail()) {      ?>
 <div class="thumb">
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
 </div>

 <?php } else { ?>
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <div class="thumb"><a href="<?php the_permalink(); ?>">
 <?php get_attachment_image($post->ID, 'thumbnail', 'alt="' .
    $post->post_title . '"'); ?></a></div>
 <?php } ?>
 <?php the_advanced_excerpt(); ?>
 </div><!-- .entry-summary -->

where green text = the new text that was added

There is tons more you can do with featured image functionality. You can set up custom sizes to use other than the standard thumbnail, medium, and large, for example. But this is a good start.

My dear twitter bud Carissa (@carissarogers) asks:

“hey, any idea why sometimes images DON’t show up correctly when ‘liking’ a post for FB direct from site?? Like the sidebar comes up etc..”

Why yes, yes I do!

Basically, when you “Like” (click a facebook icon) within a webpage, or when you link to a webpage from Facebook, Facebook reads the information on your webpage to figure out what to display.  But it is not necessarily smart enough to know which text or image is really the relevant one, which is why sometimes you see really silly things in the facebook link, like icons, instead of the photo related to the page or article.

So what Carissa really wants to know is, is this something that can be fixed.

Facebook reads what are called Open Graph tags to figure out what to display.  If the tags don’t exist on the webpage, it makes a guess as to what those tags should be, based on the page content.

If we look at Carissa’s main page in Facebook’s URL Linter, we see that Facebook is extracting the ‘title’ from the <title> in her blog source, and getting the image to display from some random thing on her page tagged <img>.

The same thing happens if you enter the URL for a specific post – the image is just picked from anywhere on the page.

If you want to see what Facebook will display on a post or a page, you can use the Linter to find out.  It’s more reliable than just typing the link into Facebook, because Facebook will cache images and may not display a change when you change the image.  Using Linter also refreshes the cache.

So if the extracted information is not what you want displayed on Facebook, you’ll need to provide Facebook more information so that they’ll know what to display.  You do this by setting Open Graph tags.

So how do I set the Open Graph tags?

I wrote up a longer (slightly more techie) , explanation at the Dabbled Studios blog: Why don’t my blog photos show up on Facebook when someone Likes a post?

…but here’s a quick answer that will work for many of you.

If you have a WordPress blog, like Carissa, the quickest simple fix you can do is to install a plugin which sets the og:image tag for each of your posts to either the attached image, or the ‘featured image’.  I’m sure there are several out there, but try this plugin:  FetenWeb image_src Metatag.
I’ve used this one on a few sites, and it will pull the featured image (if you’re using that functionality) or the image attached to the post for facebook links.  You can also set a default image, in case you don’t have any image on the post.  It’s simple, and seems to work quite well.  If you have multiple images on a post, and you want to ensure that just a particular one shows up, be sure to click ‘Set as featured image’ for the particular image, within your image upload in WordPress (assuming your theme has that functionality activated)

If that doesn’t work for you, because your site is more complex, or doesn’t use WordPress, read more about setting the Open Graph tags.

Update: How to add featured image support to your WP theme