How to add Share Like Recommend Buttons in Blogs or Website
Social networking has became important these days and if you are a blogger, website developer then it becomes penultimate to give your blog/website a social plugin touch to enhance page and hit counts.Adding this facebook share button will show a neat count of how many times your post has been shared and will also allow your readers to share it.
I went through plenty of blogs/tutorials to add buttons of facebook but at last found that they are all old and problematic, the best method is to use
iframe tag of html.
First, what's an iframe tag ?
An iframe is used to display a web page within a web page. For ex. the following html code will render the below shown frame
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.usefultechtalk.blogspot.in" width="600" height="400">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Please note the widht and height
Here is small and crisp tutorial for how to add Like/Share/Recommend buttons in different forms
Log in to Blogger, go to Design / Layout > Edit HTML or if you are planning to implement in our website then open the .html page in any editor
Now you have options to add different social plugin tools as follows:
Like Button:
Step 1: Go to Facebook's
Like Button plugin page:
Step 2: Post the complete URL of page in which you want to add Like button in "URL to Like" textbox. for ex. if I paste the link of this blog there.
http://usefultechtalk.blogspot.in/2012/08/how-to-add-sharelike-or-recommend.html and Press "Get Code".
Step 3: Please note that the first part of Javascript SDK "Plugin Code" (as show in below pic) will remain same for all plugins (Like, Share, Recommend, Comments etc). So, you just need to add it at the starting of your html page or blog open in HTML editing format.
Step 4: Add the second part of "Plugin Code" where ever you like to see the Like button. For ex. I added first part of "Plugin Code" at starting of these page and second part of "Plugin Code" here. Try to Click on Like Button.
Send Button: (Very Similar to Like Button implementation)
Step 1: Go to Facebook's
Send Button plugin page:
Step 2: Post the complete URL of page in which you want to add Like button in "URL to Send" textbox. for ex. if I paste the link of this blog there.
http://usefultechtalk.blogspot.in/2012/08/how-to-add-sharelike-or-recommend.html and Press "Get Code".
Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)
Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence. Try it !
Subscribe Button: (Very Similar to Like Button implementation)
Step 1: Go to Facebook's
Subscribe Button plugin page:
Step 2: The
Subscribe button lets a user subscribe to your public updates on Facebook.There are two Subscribe button implementations: XFBML and Iframe. In the "
Profile URL" textbox enter the Facebook profile link of yours or person who you want to subscribe (for example facebook profile URL for Mark Zuckerberg is
http://www.facebook.com/zuck) and Press "Get Code".
Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)
Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence. Try it !
Comments Button: (Very Similar to Like Button implementation)
Step 1: Go to Facebook's
Comments Button plugin page:
Step 2: Post the complete URL of page in which you want to add
Comments button in "
URL to Comment on" textbox. for ex. if I paste the link of this blog there.
http://usefultechtalk.blogspot.in/2012/08/how-to-add-sharelike-or-recommend.html, Increase the "Number of Posts Visible" and Width as per your requirements and Press "Get Code".
Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)
Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence. Try Comment Hi/Hello !
Activity Feeds: (Very Similar to Like Button implementation)
Step 1: Go to Facebook's
Activity Feeds plugin page:
Step 2: The Activity Feed plugin displays the most interesting recent activity taking place on your site. Since the content is hosted by Facebook, the plugin can display personalized content whether or not the user has logged into your site. The activity feed displays stories when users interact with content on your site, such as
like,
watch,
read,
play or any
custom action. Activity is also displayed when users share content from your site in Facebook or if they comment on a page on your site in the
Comments box. The JavaScript SDK requires that you
register your website with Facebook to get an App ID (or appId). The appId is a unique identifier for your site that ensures that we have the right level of security in place between the user and your website. In order to use the authentication methods, your app must be configured with an App Domain.
Step 3: Activity Plugin is only for the websites which are registered to/authorised by facebook. You need to send request for your website to facebook. Once you have App-Id you can use it in the Get Code box of the
Activity Feeds plugin and "Get Code"
Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc). You can get appId for popular websites like yahoo articles, stackoverflow etc. Here in the example you can see, I used Domain = "
www.facebook.com" and AppID as
113869198637480 and "Get Code"
Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Send Button.
For ex. I added the second part just after this sentence and this is what you see based on your login(I see the same activity as shown in pic above :) ).
Recommend Button: (Very Similar to Like Button implementation)
Step 1: Go to Facebook's Recommend
Button plugin page:
Step 2: It is again same as
Activity Feeds where you will be needing AppID for the website/blog which you want visitors to recommend to others. For AppID you need to request to facebook as explained abvoe.
Like Box: (Very Attractive and Similar to Like Button implementation)
The Like Box is a social plugin that enables
Facebook Page owners to attract and gain Likes from their own website. The Like Box enables users to:
- See how many users already like this Page, and which of their friends like it too
- Read recent posts from the Page
- Like the Page with one click, without needing to visit the Page
So, first you need to make a page in facebook(like fans page, followers etc) corresponding to your website/blogs
Step 1: Go to Facebook's
Like-Box plugin page:
Step 2: Post the complete URL of page in which you want to add Like-Box button in "URL to Send" textbox. for ex. if I paste the link
http://www.facebook.com/imdb and Press "Get Code".
Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)
Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Like-Box for the page.
For ex. I added the second part of "Plugin Code" corresponding to the imdb facebook page just after this sentence. It will show you how many of your friends have liked that page(you need to be logged in in fb in current browser)
Login button: (Very Similar to Like Button implementation)
Step 1: Go to Facebook's
Login Button plugin page:
Step 2: Select options "Show Faces", Rows and Width. Get Code
Step 3: If you have not already added the Javascript SDK part of "Plugin Code " in the beginning of page in HTML form then add it. (Only once we need to add and we can then add any FB plugins like/share/recommend/comment/register etc)
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=123050457758183";
and update the
bold part, it's the appId of the facebook page.
Step 4: Add Second part of the "Plugin Code" to your html format where you want to see Log-in Button.
For ex. I added the second part just after this sentence.
Registration button:
The Registration plugin allows users to easily sign up for your website with their Facebook account. The plugin is a simple iframe that you can drop into your page. When logged into Facebook, users see a form that is pre-filled with their Facebook information where appropriate.
The registration plugin gives you the flexibility to ask for additional information which is not available through the Facebook API (e.g. favorite movie).
This eliminates the need to provide two separate login experiences.
Step 1: The Registration button can be implemented best using
iframe tag
Step 2: Copy the code below to your blog/webpage in html format to see register button.
--------------------------------------------------------------------------------------------------------
<iframe src="https://www.facebook.com/plugins/registration?
client_id=113869198637480&
redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fecho%2F&
fields=name,birthday,gender,location,email"
scrolling="auto"
frameborder="no"
style="border:none"
allowTransparency="true"
width="100%"
height="330">
</iframe>
--------------------------------------------------------------------------------------------------------
Step 3: Please not various attributes like width, heigth, stle, fraemborder and userinfo fields. You can change it. (For more details See
Documentation Page )
For ex. I added the second part just after this sentence.
Facepile Button: (Very useful and attractive for websites involving login options for user)
The Facepile plugin displays the Facebook profile pictures of users who have connected with your page via a global or custom action, or can also be configured to display users that have signed up for your site. The Facepile plugin displays the Facebook profile pictures of users who have liked your page or have signed up for your site. For this you need AppId of your page/website generated by Facebook.
