How to Make a Floating Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It in your WordPress Theme!

Arms Dealer FTW
Arms Dealer FTW
on August 1, 2012
How to Make a Floating Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It in your WordPress Theme

Today we’re going to learn how to make a floating Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It and incorporate it in your WordPress theme. The steps are very easy and simple. It’s just like adding Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It in your index.php file but the only difference is there’s a container which have specific attributes. Our social networking buttons that we’re making has a container which have a fixed position and hides whenever the screen resolution is smaller.

To start off our tutorial in making a floating social networking buttons, open a blank document in notepad or Dreamweaver if you have. Copy and paste the containers of our floating Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It.

How to Make a Floating Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It in your WordPress Theme

Get your floating button codes @ Facebook, Twitter, Google & Pinterest

The next important steps are collecting all the four Social Networking button Codes. You can get the button codes below:

Points to remember when you collect all the social networking button codes:

  • For Facebook Like button: Disable send button, select Box Count as your layout style, set the width to 100 and disable the “show faces” option. Get the Facebook Like HTML5 Button codes.
  • For Twitter Tweet button: Get a clean twitter codes from the link above then modify it by adding data-url=”<?php the_permalink(); ?>” data-text=”<?php the_title(); ?> – <?php the_permalink(); ?>” data-size=”medium” data-count=”vertical” right after the  code“twitter-share-button”.
  • For Google Plus One button: Select Tall as the button size and Bubble as the button’s annotation.
  • For Pinterest Pin It button: Select Vertical as your Pinterest Button Layout. Type http://www.mywebsite.com, http://www.mywebsite.com/images and MyDescription respectively in the required text fields to generate the Pinterest Pin It Button. This will serve as your marker so you’ll not be having any trouble when you modify it.
  • Once the Pinterest button codes are available, modify it by changing the http://www.mywebsite.com to <?php the_permalink() ?>, http://www.mywebsite.com/images to <?php echo catch_that_image() ?> and MyDescription to <?php the_title(); ?>.
  • In order for the Pinterest Button to pin the correct images of the blog post, we need to add a specific function to do that task. The codes below will do that task for us, copy and paste this code to your function.php  file:

 

Too Lazy To Code, eh?

Too lazy to get the button codes manually? Here’s the all the code! I’ve already pasted each button codes  in their proper containers so you’ll not be having any problem. See Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It button codes below:

 

Copy and paste the code above in your footer.php file. You should place the codes right before wp-footer tag.

Style Your Button Container

The most important css attributes below is the Position: Fixed. This css style will make sure that our social networking buttons container will not move from our defined position of the screen. My css style is very simple where it only have a white background and a transparent border. You may modify it to blend with your WordPress theme.
 

Open your WordPress style.css file and copy paste the code above.

Hide in Smaller Browser Feature

Not all users have the same size of screen resolution. Whenever a user with a smaller browser visits your website, the floating social networking button’s position will be adjusted and it might be overlapping the body of your blog. So what we want to do is we want to hide our floating social networking buttons IF the user has a screen resolution lower than 1280. We can do this by adding the codes below in our function.php file.
 

Going back to the footer.php file, where we pasted our button codes, paste the following:
 

Save and view your work, check everything from it’s size, paddings and margins. Feel free to modify the appearance of the button container.
 
If you encounter any issues, let us know in the comments section! Thank you!

Arms Dealer FTW

Arms Dealer FTW

works in the financial sector specializing and gaining more knowledge in Investment Securities and Corporate Portfolio Accounting. He uses blogging to channel every stress he acquires from his daily corporate life. Every rant is worth blogging. Every sentence is a scar of his personality. Everything is relevant.

One Response to “How to Make a Floating Facebook Like, Twitter Tweet, Google Plus One & Pinterest Pin It in your WordPress Theme!”

  1. running ent says:

    Just what I need! Thanks for sharing! :)

Leave a Reply