This post was written 5 years ago and therefore may not be as accurate as more recent posts.

Since creating both the Facebook Like & Send Buttons and Google +1 button plugins I have been asked a lot about how I aligned them all in one line (like above). The answer is that it’s really easy!

Step 1: Install the plugins.

Install the following plugins:

Step 2: Insert the Buttons via Shortcode:

Note here that I have also included the tweet button. Here’s some sample code to show the buttons at the end of a single post.

function social() {
if(is_single()) { ?>
<div class="tweet">
<a rel="nofollow" href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal"  data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>" data-via="alexmoss" data-related="PleerSEO">Tweet</a>
</div>
<div class="like"><?php echo do_shortcode('[fblikesend layout="button_count" faces="no"]'); ?></div>
<div class="plusone"><?php echo do_shortcode('[google1 callback="googlebutton" size="medium"]'); ?></div>
<?php } }
add_filter ('the_content', 'social', 100);

The code above can be placed within the functions.php file or placed directly into the theme (the latter ignoring the first two and last two lines of code).

Step 3: Insert CSS

All I have to do now is insert the following CSS into my theme’s style.css (or other relevant CSS file) to set up the alignment:

.tweet {
margin-top:-13px;
}
.like {
float: left;
margin: -37px 0px 0px 105px;
}
.plusone {
float: left;
margin: -37px 0px 0px 250px;
}

Step 4: Voila!

That’s it! Simply update your file(s), flush any cache that you may be using, refresh and enjoy!

Comments

Comments are closed.