It was a no brainer for me to include share buttons on List Central, to make it easy for my users to spread the word about cool lists that they find. Fortunately, the developers at the big social networking sites have made it easy to add share buttons on your site. It took me less than a couple hours to set up share buttons for my 5 favourite social media site on List Central. The following is a breif summary of how to get going with share buttons for each of the sites I implemented:

Digg offers a page full of documentation to help you implement links to digg your stories on their Digg Integrate page. There are two facets to sharing stories on Digg: digging, and submitting a story that hasn’t previously been submitted. The good people at Digg have put together an easy to install script that figures out whether or not the story has been submitted previously, and takes the user who clicks on the icon to the appropriate place.

As the code above illustrates, Digg gives you the option to specify the url you want to be dugg, as well as the target of the link, and the digg skin for the share button. The skins available are ‘normal’, which looks like the Digg buttons on Digg itself that displays how many diggs the story has already, ‘compact’, which is a smaller version of the normal skin, and lastly, the one I like best, ‘icon’, which is displayed above.

Facebook offers brief, yet comprehensive documentation on how to create share buttons on the Facebook Share Partners page. The Facebook team has made the task of creating Facebook share buttons super easy with the script they provide, in that the developer only needs to add in the url of the page to be shared. Facebook also offers 4 options for how the share link can appear on your site, my favourite is the small icon shown above.

StumbleUpon has a neat page with many options to help you build your share buttons on the StumbleUpon Buttons & Tools page. Once you build one link through the StumbleUpon builder, it is easy to see how to edit the code in order to make other share buttons for different links automatically. All that is needed is the link’s url and title.

Delicious also makes creating share buttons super easy with the scripts they have posted on the Delicious Save Buttons page. The code they provide requires no edits, as it works perfectly as it is. I did edit the code they provide for aesthetic reasons. I wanted to use only the Delicious icon as my share button, rather than the text “Bookmark this on Delicious” that the code Delicious provides includes, a fairly trivial change really.

Twitter is the exception, in that they do not provide documentation on how to create share buttons on your site, but their simple design makes it reasonably easy to figure out how to do it.

If the user is already logged into Twitter, when they click on a link w they will be taken to their twitter home page, with the Tweet pre-populated with the text you give it after the ‘status=’ in the link. As a developer, you can choose to use anything as the link text or image. For List Central, I chose the Twitter ‘t’ icon, which the good folks at twitter use as their favicon.

You might also like...

• Centering an image in a div

One of these obsessions was to build a new WordPress plugin to hold the specific functionality I want in a image gallery. Yes, I built, yet another, WordPress Image Gallery Plugin. I know there are many others out there that do the job, but none that did it to my satisfaction, so I built my own. I still have a few more touch ups to do on Urpi Gallery, but once those are completed, I’ll be releasing the plugin to the WordPress community. I’ll likely make an announcement about it here as well as on Urpi’s Dream.

All of that chatter has little to do with the point of this post. The point of this post is to discuss how to dynamically center and image in a div! So let’s get to the meat of it!

A part of the Urpi Gallery, mentioned above, is a rotating image widget that can either be used on the sidebar, or in posts. Here’s an example of it, with some purdy pictures of flowers I found on Flickr under the Creative Commons license :

As you can see above, the dynamically chosen image is very nicely centered in that gray div. I thought that centering an image in a div, as above, would be a piece of cake, but it turned out not to be so clear cut.

Centering an image in a table cell, both horizontally and vertically is trivial:

&lt;style&gt; .centeredImageTD { width: 180px; height: 180px; vertical-align:middle; text-align:center } &lt;/style&gt; <td class=”centeredImageTD”> <img src=”Benny.jpg” width=”120″ alt=”Benny” /> </td>

Isn’t that easy? All done with some css on the table cell (td) that explicitly states: center the content of this table cell, both horizontally and vertically. The dimensions of the image don’t matter with this method of centering.

As the web has evolved, the appropriateness of tables in web design has decreased, and the task now is to put our designs together using divs. The use of divs improves many web design tasks, but it makes this one task, of centering images more difficult. While the tag can be used in a pinch to center an image horizontally, there is no equivalent tag or style rule to center an image vertically. The only option is to use the margins of the image, or the padding on the div. Both require that you know the width and height of the image, and div.

As I was determined to have my images centered in a div, I got down to writing  my  php functions to make it happen, every time. The function below requires that you pass the actual dimension of the image, which can be captured with tools like identify from ImageMagick, or with the built in php functions imagesx and imagesy. Also required by the function is the  desired width of the border given to the image ($border_width), and the width of the div you want to center your image in as $divsize.  This function assumes your div is square, but it is possible to adapt this function to accommodate rectangular divs.

/*
getCenteredMargins - determines the margins for an the image to be centered in a div

1. $imagefile – Path to the image
2. $divsize – The width and height of the square div containing the image in pixels
3. $border_width – The width of the desired boreder around the image in pixels
4. $max_size – The maximum width and height of the image as it is to appear on the page
*/
function getCenteredMargins($image_width, $image_height, $divsize, $border_width, $max_size){

    // Initializations
    $width = 0; $height = 0;
    $margin_top_bottom = “”; $margin_left_right = “”;

    if($image_width > $image_height){
        // Most likely a pic landscape orientation, width of         the image will
        // equal the max_size
        $width = $max_size;

        // Determine scaled down height of the image with the the ratio
        // of the original image
        $height = (int)($max_size * $image_height / $image_width);

        // right and left margins will be small, and equal to the
        // specified border width
        $margin_left_right = $border_width . “px”;

        // top and bottom margins will be larger
        $margin_top_bottom = (int)(($divsize – $height) / 2) . “px”;
    }else{
        // Most likely a pic portrait orientation, height of the image will
        // equal the max_size
        $height = $max_size;

        // Determine scaled down width of the image with the the ratio
        // of the original image
        $width = (int)($max_size * $image_width / $image_height);

        // top and bottom margins will be small, and equal to the
        // specified border width
        $margin_top_bottom = $border_width . “px”;

        // right and left margins will be larger
        $margin_left_right = (int)(($divsize – $width) / 2) . “px”;
    }
    return array($margin_top_bottom, $margin_left_right,$width, $height);
}
list($margin_top_bottom , $margin_left_right, $width, $height) = getCenteredMargins($image_width, $image_height, $divsize, $border_width, $max_size);
$image_style = “margin: $margin_top_bottom $margin_left_right;”;
$html = “<div><img  style=”$image_style” src=”$src” width=”$width” height=”$height” /></div>”;

You might also like...

• Share Buttons are SO Easy!!