How to Add reddit Buttons to WordPress

reddit, like Digg offers web site integration buttons for webmasters. The implementation of the reddit buttons is very similar to my previous post on how to add Digg buttons to WordPress. In my next post, I will show you how to display Digg and reddit voting buttons to your WordPress posts at the same time.

For now, let’s take a look at what reddit has to offer…

reddit has a larger list of buttons than Digg. For this post, I shall use the button that looks most like the default buttons you see on reddit.com. Again, I selected this button for usability reasons because I want people who are familiar with reddit to feel comforable with the reddit buttons on my web site.

Here’s How the reddit Button Will Look on Your Web Site…

How to Add reddit Buttons to WordPress

If your blog post has been submitted to reddit, you should see a reddit number and a “reddit” text in your reddit button.

How to Add reddit Buttons to WordPress

If you or someone else has not submitted your blog post to reddit, you won’t see any redditnumber but you will see the option to submit your blog post to reddit.

reddit’s Integration Code

1
2
3
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>

WordPress Default Theme’s index.php Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

What We Need to Do

We need to replace reddit integration code’s [URL] and [TITLE] with WordPress’ <?php the_permalink() ?> and <?php the_title(); ?> respectively somewhere within the WordPress Loop.

Basic Example of reddit Integration with WordPress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

This alone wouldn’t look good on your web site. We need some CSS style to spice things up!

reddit Integration with WordPress with HTML and CSS

1
2
3
4
5
<div class="social_news">
<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
<script type='text/javascript'>reddit_url='[URL]'</script>
<script type='text/javascript'>reddit_title='[TITLE]'</script>
</div>
1
2
3
4
5
6
.social_news
{
	margin: 0px 0px 0px 10px;
	padding: 0px;
	float: right;
}
1
2
3
4
5
6
.social_news
{
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
}

Wrap the reddit code with a DIV class. You may choose to align the DIV class left or right but I think it looks better on the right.

Here’s the full source code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php while (have_posts()) : the_post(); ?>
 
	<div class="post" id="post-<?php the_ID(); ?>">
		<div class="social_news">
		<script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>
		<script type='text/javascript'>reddit_url='<?php the_permalink() ?>'</script>
		<script type='text/javascript'>reddit_title='<?php the_title(); ?>'</script>
		</div>
 
		<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
 
<?php endwhile; ?>

You may apply this modification to your WordPress theme’s single.php and page.php or any other template that has the WordPress Loop.

A WordPress Plugin Alternative: Digg & Reddit Me Plugin

If you don’t want to edit your WordPress theme files, try using the Digg & Reddit Me plugin. I personally think it would be too much of a hassle to manually insert the code into each post if I were to use this plugin but it really depends on your preferences and needs for your WordPress blog.

About the Author

Similar Posts

Facebook Comments

-->

4 Comments On “How to Add reddit Buttons to WordPress”

On 3rd November 2008 6:29 AM, Ashish said:

Nice Post! your style is really simple. If I may ask, Which widget are you using for putting the code here?

Thanks

On 3rd November 2008 9:37 AM, Vincent said:

I use the WP-Syntax plugin to display the source code. Best one I have tested so far because it includes line numbers and you only need to use a PRE tag to call it.

On 3rd November 2008 10:04 AM, Ashish said:

Thanks! I have used the same plugin, nut more interested in getting the scrollable windows that you have got. This formatting keeps the layout intact. AS of now I am using images for code and would like to use the window format like yours.

On 3rd November 2008 12:45 PM, Vincent said:

Check out my WP-Syntax CSS file here:

http://www.maverickwebcreations.com/wp-content/plugins/wp-syntax/wp-syntax.css

In the “.wp_syntax” code, I have:

height: auto;
max-height: 250px;
overflow: scroll;

That was how I did it.

1 Trackback On “How to Add reddit Buttons to WordPress”

Post a Comment


(Required)


(Required)