How To Add Facebook Like, Twitter Tweet, Google Plus One and Pinterest Pin IT Button in your Index File (Multiple Blog Posts) in WordPress

It’s very easy and fast how to add the prominent Social Networking Buttons such as Facebook Like Button, Twitter ‘Tweet’ Button, Google ‘Plus One’ and the new addition to the social networking community, the Pinterest ‘Pin it’ button inside every blog post in your WordPress blog. Simple implementation guides on how to add the buttons are scattered across the world wide web. You just need to copy few codes, tweak some of it and paste it directly wherever you want to display it inside your single.php file.

Unfortunately, this method is not appropriate in your Index.php file or in a page with multiple post. If you do this method, you’re button will just return the active url in your web browser. The supposedly task to share the right blog post or url will not be met.

With few experimentations, I got to unravel how those buttons work. It’s very simple actually. The WordPress tag <?php the_title(); ?>, <?php the_permalink(); ?> and the other common php codes in WordPress will do the task for you.

To start this tutorial, let’s get first the button codes of Facebook Like, Twitter Tweet, Google +1 and Pinterest Pin it:

For this tutorial, I will pick out the Vertical Count buttons shown at the image below. You may choose whatever design you want. It’s still the same method.

HOW TO ADD FACEBOOK LIKE BUTTON IN YOUR INDEX.PHP FILE OR IN A PAGE WITH MULTIPLE BLOG POST.

Fill up the Step 1 – Get Like Button Code, in URL to Like field type in your website url (Example: http://bendaggers.com).

I chose not to activate the Send button, that’s why you see it unchecked.

Choose whatever layout, size, faces activated and others you want to display in your button. It really doesn’t matter. If your done with the configuration, just hit the Get Code button and select IFRAME:

Your generated code is something like this:

/**Facebook Like Button Code**/

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.bendaggers.com&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90&amp;appId=176463485768664" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:550px; height:90px;" allowTransparency="true"></iframe>

/**Facebook Like Button Code**/

Replace the http%3A%2F%2Fwww.bendaggers.com with <?php the_permalink(); ?>. Copy paste the tweaked Facebook Like Button Code in your Index.php where multiple blog posts can be found. Test it if it’s properly working and you’re done!

HOW TO ADD TWITTER TWEET BUTTON IN YOUR INDEX.PHP FILE OR IN A PAGE WITH MULTIPLE BLOG POST.

Go to the Twitter Button’s Resources page and scroll down until you reach the “Configuring using data attributes” (CTRL – F will help you to search and arrive in the right place). Copy the code displayed on that page.

/**Twitter Tweet Button Code**/

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

/**Twitter Tweet Button Code**/

Modify the code: From the 1st code add the codes below after “en”:

/**Twitter Tweet Button Code**/

data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical">

/**Twitter Tweet Button Code**/

Your final code for Twitter Tweet Button will be like this:

/**Twitter Tweet Button Code**/

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-count="vertical">Tweet</a>

/**Twitter Tweet Button Code**/

Place the above code in the appropriate position of your blog. Test the button if it’s working and you’re done!

Two out of Four and we’re done!

HOW TO ADD GOOGLE PLUS ONE BUTTON IN YOUR INDEX.PHP FILE OR IN A PAGE WITH MULTIPLE BLOG POST.

Visit the Official page Google Plus One Button. Customize the button that fits your preference.

From the generated code you just copied, modify the first code by adding the highlighted text below:

/**Google Plus One Button Code**/

<g:plusone annotation="inline" href=<?php the_permalink(); ?></g:plusone>

/**Google Plus One Button Code**/

Paste the above code in the appropriate place you prefer.

Place second code which is a javascript inside the <head> tag of your index.php file

/**Google Plus One Button Code**/

<!-- Place this render call where appropriate --><script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>

/**Google Plus One Button Code**/

HOW TO ADD PINTEREST PIN IT BUTTON IN YOUR INDEX.PHP FILE OR IN A PAGE WITH MULTIPLE BLOG POST.

We’ve now arrived at the last button we’re implementing. Pin It button is very much different from the first three buttons we’ve just implemented. Adding the Pinterest Pin It Button in your Index file or in a page with multiple blog post requires the user to touch or add new function in the functions.php file.




To start this tutorial, we should get the Pinterest Pin It Button Code in their Official Pinterest Button page. Fill up the fields just like what the image shows below.






If you follow what’s in the image above, vour Pinterest Pin It code will be like this:
/**Pinterest Pin It Button Code**/

<a href="http://pinterest.com/pin/create/button/?url=***your%20website%20url%20here***&media=***your%20website%20image%20url%20here***&description=***your%20website%20blog%20post%20title%20here***" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

/**Pinterest Pin It Button Code**/

Modify the code by replacing the following:




Change “***your website url here***” with <?php the_permalink() ?>

Change “***your website image url here***” with <?php echo grab_that_image() ?>

And finally, change “***your website blog post title here***”with <?php the_title(); ?> (you can also replace <?php the_title(); ?> to <?php the_excerpt(); ?> if you want to display the except of the blog post instead of the title).




After modifying the code, paste the entire code in the place where you want it to be displayed.




In my case, I placed the <script> code together with the first code or the <a> code.




The last thing to do is to add grab_that_image function in your functions.php file: Just copy and paste, no need for any modification.
function grab_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

Once you’re done, you can now test the Pinterest Pin It Button If its properly working.




Hope you learned how to implement the four social networking buttons (Facebook ‘Like’ Button, Twitter ‘Tweet’ Button, Google ‘Plus One’ and Pinterest ‘Pin It’) and successfully implemented it in your WordPress website.




If you find any trouble, just hit me in the comments section. Thank you and have a good day!