How To Add Facebook Like, Share, Send and Follow Button to WordPress

Vintaytime Staff
3 years ago / Updated - April 30, 2016
How To Add Facebook Like, Share, Send and Follow Button to WordPress

Want to add Facebook buttons to your WordPress blog? It’s very easy and I have multiple ways to add like, share, send or follow button on your blog. Buttons are the fastest way to share web pages with your friends. These buttons work on any browser, but your browser must support JavaScript to work dynamically. In mobile platform browser like: opera mini not support JavaScript and in this browser your like button not work dynamically.

You can also use the Facebook social plugin for WordPress, Simply install add like, share, follow, recommendations box or bar, open graph meta tag without editing your source codes. With plugins you can also make use of shortcodes to add button anywhere in the post or page. Get Social Sharing Plugins.

Understand Open graph meta tags

Before manually implementing any plugin of Facebook in your blog, first thing you have to do is add open graph meta tags on the head. These tags tell Facebook about your page contents Ex. Title, Description, Image, App is, Page Admins and more. If you’re using WordPress SEO plugins so those plugins have already added open graph tags in head for SEO purpose. You can check Tags by opening any post of your blog in your computer browser and press (CTRL+U).

Basic Meta Tags For WordPress

Title - <meta property="og:title" content="<?php the_title(); ?>" />
Description - <meta property="og:description" content="<?php the_excerpt(); ?>" />
Image - <?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?>
<?php if ($fb_image) : ?>
    <meta property="og:image" content="<?php echo $fb_image[0]; ?>" />
<?php endif; ?>

og-tags-fb-vt

- Above snapshot contains 3 important tags Title, Description & Image which mostly used by every WordPress site.

If you want to add more open graph meta tags you should see the complete list here or here.


Like Button to WordPress

Facebook gives multiple method of adding like button to a web page Ex. HTML, IFRAME, URL & XFBML, so at this condition you have to use code which is short and that is IFRAME.

Open your WordPress dashboard > Appearance > Editor > Choose a type of page where you want to put button >Paste the below code.

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo
urlencode(get_permalink($post->id)); ?>&layout=standard&
amp;show_faces=false&width=350&action=like&colorscheme=light"
scrolling="no" frameborder="0" allowTransparency="true" ></iframe>

Page like button

<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fvintaytime&width&layout=standard&action=like&show_faces=false&share=false&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>

From the above code remove vintaytime and enter your Facebook page username.

Customize faces > show_face=true to show_face=false

fb-button-faces

Customize actions > action=like to action=recommend

action-fb-vt

Customize layout > layout=standard to layout=box_count to layout=button_count

button-layout


Share button for WordPress

share-button-fb-vt

When a user click on share button they will see a popup box of sharing contains sharing dialog and the box ask you to add some text about this link > After from select where you want to share this link Ex. Timeline, Group, Friends timeline, Page or private message.

Add a Javascript for popup window

<script language="javascript">
var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>

Code of Direct Share button

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" onclick="centeredPopup(this.href,'myWindow','800','500','yes');return false">Share</a>

Direct share is a very light and optimize way to add share button on your page. Customize “Share” text with CSS or replace whole text with an image or whatever you want to add instead of text. When a user click on share button a window pop-up on screen within the size you add in popup window JavaScript code.


Send button for WordPress

send-button-fb-vt

With send button let users privately send content to friends, group or email address. You can also add multiple recipients to send content to multiple peoples, group or email addresses, also add a message with the content you’re going to send.

First add Facebook Javascript in the header or footer

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Avoiding above code, your send button will not work. First add this code in a page or header or footer or if you want to add send button in a post so add this code only in file: single.php.

Go to Dashboard > Appearance > Editor > Choose Header or Footer > Paste below code.

<div class="fb-send" data-href="<?php the_permalink(); ?>" data-colorscheme="light"></div>

This code is of Send button, add this code where you want to display send button.


Follow button to WordPress

Follow button help users to follow your Facebook profile or page and get updates on our news feed. This button is mostly used for following Facebook profile of a person, but you may also use follow for Facebook page also. Many peoples add privacy to friend request and only allow follow button to our profile, because currently Facebook has limit of friends in a account ans if your account is full then you may not use follow feature.

<iframe src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fzuck&width&height=80&colorscheme=light&layout=standard&show_faces=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>

Remove Zuck from the above code and add your profile or page username.

Customize follow button code

Show or hide faces > show faces=false or show_faces=true

follow-fb-faces-vt

Layout style > layout=standard or layout=box_count or layout=button_count or layout=button

fb-follow-buttons

Theme > colorscheme=dark or colorscheme=light

Dark theme changes your button background “Black” and light is white.


WordPress plugins for Facebook buttons

1) Facebook Like Button

2) FB Like Button

3) WP Facebook Like Button