Tuesday, May 26, 2015

Facebook Like, Send, Share & Follow Button Shortcode for Blogger!
Facebook Buttons Shortcode For Blogger
Nowadays, Facebook buttons are popular in the blogosphere. Every blogger place, at least, one Facebook button in his blog. The place can be below posts, in a floating social box or anywhere on the blog. Facebook buttons are popular so that, Facebook has created many social buttons that do different works. Like, like button is used to get likes on a particular page, send button is used to send a blog’s data to friends privately, the share button is used to share any blog post in Facebook timelines and follow button that is used to get followers for a particular Facebook profile.
Did you remember? Yesterday, we had posted a shortcode that was URL shortcode which was created with the help of shortcode plugin that changed the way of showing URLs in blogger blog’s posts, comments or sidebar. Today, we are here with an another shortcode that would help bloggers to place thefacebook like, share, send and follow button anywhere anytime on a blogger blog with just one line text. You can also configure and customize the buttons in different ways as you can change the URL of the like button as you wish; you can change button type by just putting two words, and also more customization ways are waiting for you. Let’s see how to add this shortcode on blogger!

How to add this shortcode on blogger?

Now let’s continue to the tutorial on how to add this shortcode in blogger without wasting your valuable time.
Steps are following:
  • Go to Blogger Dashboard > Layout > Add a Gadget > HTML JavaScript
  • Now, leave the title field empty and navigate to Content field.
  • In the content field, paste the following chunk of scripts:
<script src="https://googledrive.com/host/0B8acxOz46qBZbWo3UkZCXzdvTjA"></script>
<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.3&appId=1738888786347521";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  • Now, click on Save button.
[info headline=INFORMATION] If you visited this site earlier and added Google+ Badge & URL shortcode script, you can remove both shortcode’s Google Drive scripts because we have added both shortcode scripts in this shortcode script file.[/info]

How to use this shortcode on blogger?

First add and now show. Now, we’ll tell you how to use this shortcode on a blogger blog. So firstly, let’s start with facebook’s most popular like button.

How to use like button shortcode on blogger?

Now, you can easily put a like button anywhere. Between words of your posts, in the end, on the sidebar, on footer and on comments too! So let’s start learning Like Button shortcode.
  • If you want to add a like button for Blogger Guiders’s Fan Page without counter, with share button and faces, then use below like code:-
[fblike url='http://facebook.com/bloggerguiders' type='standard' faces'true' share='true'/]
Output:
Like Button
Suitable Attributes for Facebook Like Button Shortcode:

Here is a list of appropriate attributes for facebook like button shortcode:

AttributeDefinition
urlPoints to the URL of the page for which, you are creating the like button.
typeSets the type of button you want. Type ‘button’ for the normal button. Type ‘button_count’ for a button with a counter. Type ‘standard’ for all function button. Type ‘box_count’ for a counter in a box in the top of the button.
facesSets to show faces with like button or not. Use ‘false’ or ‘true’ only.
shareSet to display the share button with like button or not. Use ‘false’ or ‘true’ only.

How to use share button shortcode on blogger?

As we all know, facebook’s share button is used to allow visitors to share blog posts on their friend’s timeline or on their timeline. Let’s know how to add it using shortcode:
  • Whenever you wish to add a simple share button without counter, use below like code:
[fbshare url='http://www.facebook.com/bloggerguiders' type='button'/]
Output:
Facebook Share
Suitable Attributes for Facebook Share Button Shortcode:

There are only two appropriate attributes for share button. Means- Easy to remember!

AttributeDefinition
urlPoints to the URL of the page for which, you are creating the share button.
typeSets the type of button you want. Type ‘button’ for a regular button. Type ‘button_count’ for a button with a counter. Type ‘box_count’ for a counter in button. Type 'icon_link' for share link with an icon. Type 'icon' for only icon hyperlinked with sharing link. Type 'link' for simple text hyperlinked with sharing link.

How to use follow button shortcode on blogger?

Now, the turn is over the follow button. As we all know, follow button is used to allow your blog’s visitors to follow you with only one click. So now let’s learn how to add it in seconds in your blog posts.
  • Whenever you wish to a follow button on your blog between posts or in comments, just use below like code after doing some customizations according to your needs:
[fbshare url='http://www.facebook.com/shivansh.verma.skv' width='auto' height='auto' theme='light' faces='true' type='standard'/]
Output:
Facebook Follow Output
Suitable attributes for Facebook follow button shortcode:

Now here’s six relevant attributes for the following button. Let’s know:

AttributeDefinition
urlPoints to the URL of the profile you are going to add. Only for profiles not for pages. You can add profile’s username or ID.
widthSets the width of the follow button. The default is ‘auto’.
themeSets the theme of the follow button. The default is ‘light’. Use only ‘dark’ or ‘light’.
typeSets the type of button you want. Type ‘button’ for normal button. Type ‘button_count’ for button with counter. Type ‘standard’ for all function button. Type ‘box_count’ for counter in button.
heightCapable to set the height of the following button. The default is ‘auto’.
facesCapable to set you to want faces with follow button or not. Use only ‘true’ or ‘false’. The default is false.

How to use Facebook ‘send’ button shortcode on blogger?

The last one is facebook’s ‘send’ button which allows your blog’s visitors to send your blog’s material (post) privately to anyone. It can be his friend. And he can select multiple friends at one time. So let’s learn how to add this button anywhere, anytime and in seconds!
  • Whenever you wish to add a send button in your blogger post, comment, sidebar; just use the below piece of code after customizing it according to your needs:
[fbsend url='http://bloggerguiders.blogspot.com'/]
Output:
Send Shortcode Output
And the good news is- there is only one attribute suitable with this send button shortcode. So it's easy to learn it!

Final Words from Author

This is the first and only post available for adding all Facebook buttons through shortcodes in minutes. I hope you liked these buttons and the way of adding it. If you got any bug in any of the above shortcodes, then please leave it on comments. We’ll give our best to solve it. Thanks!