Styling the output

Our Digg button looks like it could use a better positioning, as the default one spoils the look of the theme. So, we will use CSS to reposition the button.

Cascading Style Sheets or CSS for short (http://www.w3.org/Style/CSS/) are a simple but powerful tool that allows web developers to add different styles to web presentations. They allow full control over the layout, size and colour of elements on a given page.

Time for Action – Use CSS to position the button

Using CSS styles, we will move the button to the right of the post.

  1. We will accomplish this by first encapsulating the button in a <div> element. Then we will add a CSS style to this element stating that the button should appear on the right, with a left margin towards the text of 10 pixels. 
        // create a Digg button and return it    
    $button="
    <script type='text/javascript'>
    digg_url = '$link';
    digg_title = '$title';
    digg_bodytext = '$text';
    </script>
    <script src='http://digg.com/tools/diggthis.js' type='text/javascript'></script>";

 // encapsulate the button in a div
 $button='
 <div style="float: right; margin-left: 10px; margin-bottom: 4px;"> 
 '.$button.'
 </div>';
        
    return $button;
  2. The result of applying this simple CSS code is that Digg Button now shows to the right of the post.
    Time for Action – Use CSS to position the button

What just happened?

We used CSS to move the button to a desired position. CSS is extremely useful for these kinds of tasks and is commonly used in WordPress development to enhance the user experience.

// encapsulate the button in a div
$button='
    <div style="float: right; margin-left: 10px; margin-bottom: 4px;">    
'.$button.'
</div>';

We have basically encapsulated our button in a <div> element and forced it to the right edge by using float: right CSS command inside a style tag.

We could further experiment with the placement of the button until we find the most satisfying solution.

For example, if we hook to the_title filter instead of the_content, and moved the button to the left, we would get the following result:

What just happened?

Certainly, having good CSS skills is a very valuable asset in WordPress plugin development.

Have a go Hero

Now that our button is finished, there are a lot of possible customizations you can make to the look or position of your button, using both built-in Digg options and CSS.

  • You can use the digg_bgcolor, digg_skin, digg_window parameters of Digg JavaScript to control the appearance of the button (refer to http://digg.com/tools/integrate)
  • Use CSS to play with the layout of the button
  • Create similar plugins that will allow the user to submit content to sites such as Stumble Upon or Reddit
上一章目录下一章