Adding a Digg button using JavaScript code

Our Digg link works fine for submitting the content, but isn’t very prett y, and does not show
the number of Diggs we received. That is why we need to use a standard Digg butt on.

This is accomplished by using a simple piece of JavaScript code provided by Digg, and passing
it the necessary information.

Time for Action – Implement a Digg button

Let us implement a Digg butt on, using information from the Digg API. We will use the newly
created butt on on single posts, and keep the simple Digg link for all the other pages.

1. Create a new function for displaying a nice Digg butt on using JavaScript code.

	/* Return a Digg button */
	function WPDiggThis_Button()
	{
		global $post;
		// get the URL to the post
		$link=js_escape(get_permalink($post->ID));
		// get the post title
		$title=js_escape($post->post_title);
		// get the content
		$text=js_escape(substr(strip_tags($post->post_content),
								0, 350));
		// 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"
		return ($button);
	}

2. Modify our filter function to include the Digg button for single posts and pages, and
   a Digg link for all the other pages:

	/* Add Digg This to the post */
	function WPDiggThis_ContentFilter($content)
	{
		// if on single post or page display the button
		if (is_single() || is_page())
			return WPDiggThis_Button().$content;
		else
			return $content.WPDiggThis_Link();
	}

3. Digg butt on now shows at the beginning of the single post page.

What just happened?

WordPress will parse our content filter function according to the conditional statement we
have added:

	function WPDiggThis_ContentFilter($content)
	{
		// if on single post or page display the button
		if (is_single() || is_page())
			return WPDiggThis_Button().$content;

This means that if the current viewed page is a single post or page, we will append our Digg
butt on at the beginning of that post.

If we are viewing all the other pages on the blog (like for example the home page or archives)
we will show the Digg This link instead.

	if (is_single() || is_page())
		return WPDiggThis_Button().$content;
	else
		return $content.WPDiggThis_Link();
	}

The reason for doing so is that we do not want to clutt er the home page of the blog with a
lot of big yellow Digg butt ons. So we just place a subtle link below the post instead. On single
pages, we show the normal butt on using our new WPDiggThis_Button() function.

The first part is similar to our previous WPDiggThis_Link() function, and it acquires the
necessary post information.

	/* Return a Digg button */
	function WPDiggThis_Button()
	{
		global $post;
		// get the URL to the post
		$link=js_escape(get_permalink($post->ID));
		// get the post title
		$title=js_escape($post->post_title);
		// get the content
		$text=js_escape(substr(strip_tags($post->post_content), 0, 350));

However in this case, we are treating all the information through the js_escape()
WordPress function, which handles formatting of content for usage in JavaScript code. This
includes handling of quotes, double quotes and line endings, and is necessary to make sure
that our JavaScript code will work properly.

We then create a code using Digg API documentation for a JavaScript butt on:

	// 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>";

Conditional Tags

We have used two functions in our example, is_single() and is_page(). These are
WordPress conditional tags and are useful for determining the currently viewed page on the
blog. We used them to determine if we want to display a butt on or just a link.

WordPress provides a number of conditional tags that can be used to control execution of
your code depending on what the user is currently viewing.

Here is the reference table for some of the most popular conditional tags.

Conditional tags are used in a variety of ways. For example, is_single(’15’) checks
whether the current page is a single post with ID 15. You can also check by title.
is_page(‘About’) checks if we are on the page with the title ‘About’.

	Quick reference
	is_single(), is_page(): These are conditional tags to determine the
	nature of the currently viewed content
	js_escape(): A WordPress function to properly escape the strings to be used
	in JavaScript code
	WordPress Conditional Tags: http://codex.wordpress.org/
	Conditional_Tags

Styling the output

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

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 diff erent 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 butt on to the right of the post.

1. We will accomplish this by first encapsulating the butt on in a <div> element. Then
   we will add a CSS style to this element stating that the butt on 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 Butt on now shows to the
   right of the post.

What just happened?

We used CSS to move the butt on 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 butt on 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 butt on until we find the most
satisfying solution.

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

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

Have a go Hero

Now that our butt on is finished, there are a lot of possible customizations you can make to
the look or position of your butt on, 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 butt on (refer to http://digg.com/
  tools/integrate)
• Use CSS to play with the layout of the butt on
• Create similar plugins that will allow the user to submit content to sites such as
  Stumble Upon or Reddit

Summary

In this chapter, we created a working, useful, and att ractive WordPress plugin from scratch.
Our plugin now displays a fully functional Digg butt on.

We learned how to extract information using WordPress API and how to use CSS to improve
the appearance of our plugin. We also investigated some more advanced WordPress
functionalities such as hooks.

Specifically, we covered:

• Creating a plugin: How to fill in the information header and create a simple
  plugin template
• Checking WordPress version: How to check that our plugin is compatible with the
  user’s version of WordPress
• Modifying theme files: How to safely add functions to the theme files when we
  need to
• Accessing post information: Diff erent ways of obtaining data from the post such as
  title, permalink and content
• Using WordPress hooks: How to use actions and filters to get things done from
  within our plugin (and not modifying the theme for instance)

Now that we’ve learned about WordPress hooks, we are ready to expand our knowledge and
learn about Widgets. In the next chapter we will create a cool Wall widget for users to write
comments directly on our blog sidebar.