How To Add Facebook Like, Twitter Tweet, Google Plus One and Pinterest Pin IT Button in your Index File 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.

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

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, Twitter Tweet, Google Plus One and Pinterest Pin It Buttons

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).

Add Facebook Like Button in your Index or in Multiple Blog Post

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:

Add Facebook Like Button in your Index or in Multiple Blog Post IFrame

Your generated code is something like this:

/**Facebook Like Button Code**/

 /**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**/

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

/**Twitter Tweet Button Code**/

data-url=" " data-text=" " data-count="vertical">

/**Twitter Tweet Button Code**/

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

/**Twitter Tweet Button Code**/



/**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.

Add Google Plus One Button in your Index or in Multiple Blog Post - Buttons

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

/**Google Plus One Button Code**/
 width="120">
/**Google Plus One Button Code**/

Paste the above code in the appropriate place you prefer.

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

/**Google Plus One Button Code**/

 /**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.

Add Pinterest Pin It Button in your Index or in Multiple Blog Post - Buttons

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

/**Pinterest Pin It Button Code**/

/**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.

You may want to check out the updated tutorial on How to add Pinterest button for WordPress Blogs.

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!

Filed Under

Ben Daggers

is the creator of BenDaggers.com. He graduated from Adamson University (Philippines) with a Degree in Bachelor of Science in Accountancy dating back 2009 and earning his MBA in Polytechnic University of the Philippines. He is currently employed as a General Accountant in a well known Global Business Process Outsourcing. He enjoys learning new things. He consumes his spare time in front of his Computer with Adobe Photoshop and Dreamweaver.

Leave a Reply

Your email address will not be published. Required fields are marked *

13 Responses to How To Add Facebook Like, Twitter Tweet, Google Plus One and Pinterest Pin IT Button in your Index File in WordPress

  1. First of all allow us to state that the demo account
    of GOptions is obtainable after your deposit not before.

  2. Joe Dube says:

    Have you figured out a way to make this work with the InShare button?

  3. Bigney says:

    I like this post and thank you

  4. Dan J says:

    thanks! brilliant article and just what i was looking for!!

  5. Geek in Heels says:

    Thank you so much for this! I have one question: is there a way to make it so that the user can choose the image to be pinned, and not just the first image in the post?

    • Ben Daggers says:

      Hi Jenny, it’s a different tutorial. Maybe on the my next post. I need to look study first the attributes of pin it button and facebook like to successfully implement that kind of button you want.
       
      Thanks for your comment fellow blogger!

  6. optimizare seo says:

    Hi! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!

  7. Lose Weight says:

    I am just getting started on the Internet. I am retired now. It seems like there are millions of blogs on the Internet today and the more I read the more I want to comment on them. Your blog is not like most of the blogs that I read on the Internet, and I like the style of what you are presenting here. I am the proud owner of my own website and blog and i get ideas from blogs such as yours. Thank-you. In the text boxes I have entered my email address and my website URL. I hope you approve that I did this. It seems to be customary so I went ahead with it. TheVeryBest2You 13 12

  8. Richard says:

    Thank you for this post! A very helpful one.

  9. Pinoyhub says:

    How did you came up with this post? Are you familiar with WordPress or programming. Thumbs up here

  10. Enea says:

    Nice tutorial! thanks for posting! :)