Dec
16
2014

How to Add facebook share button for web application

Hi in this post post of  Miscellaneous tutorial i will tell about how to share status from web application to facebook. Many times it is need to share some web page over face or share some text from a form as your facebook status .To share a webpage over facebook you need to have facebook appId.

To create App click here .  If you want to add sharing button over your site then you need simple javascript from facebook developer section .But if you want to add facebook sharing button and want to send message or description on clicking of button then you need different approach. I will discuss both approach here .

Share Web page over facebook


This approach is mainly used to add facebook share button over your blog .Adding facebook share button there are social plugin available .

Click here  get the javascript code and copy in head section of index page .Here is javascript code .

Get code according to your need .I.e weather you need simple button or button with count etc.

Then copy html code of you button and paste it where you want the button to appear over your site.

Click Here to get Code for button

Make sure you run these javascript on you server i.e localhost or remote server. If you will try to open file containing above javascript in bwoser it will give in console of browser.

 Failed to load resource: net::ERR_FILE_NOT_FOUND 

In this case no protocol is specified i.e http or https .  E.g file:///C:/Users/devender/Desktop/helloworld.html 

 When we run on server then protocol is specified i.e http://localhost:8080/FBShare/.

Please Note that you need to replace your_app_id with the actual appId of your facebook app.

Here is complete code in jsp file that i run for this demo.

Run above program you will see facebook share button like below .

share text on facebook

On clicking this button a  dialog box will open up like this .

facebook share dialog box

Customization in facebook share

Here are some twick that you can perform while sharing text on facebook.

  1. data-title =”title of your post”
  2. data-href=”link of your post”
  3. data-desc=”description of your post”
  4. data-image=”image url or parth that you want to dispaly in your post”
  5. data-layout=”Can be one of “box_count”, “button_count”, “button”, “link”, “icon_link”, or “icon”

For more customization use feed dialog

Share text with facebook feed dialog


In this type of facebook sharing if you want some from your site go along with title of your post . With message parameter we can pass message with the staus.

share content over facebbok

 

Here is javascript code for above.FB.login function will be called when button will be clicked .

Here is complete example code for facebook text share.

When we will run above program on localhost and click on button then dialog box will open up for facebook login like this

facebbok text feed

Please note that redirect_uri need to set in your application Site URL .In case if you are using it on localhost then gove localhost with port number as i have given.

Also check that your facebook application has to set up for login otherwise you will end up with error.facebook login error

Check your App settings. For more detail read this developer tutorial   

If you don’t see thumbnail image then Your links need to be flushed before they start working properly. Go tohttps://developers.facebook.com/tools/debug, paste your link there, press debug, and then try again sharing it on Facebook. It should work.

This is all in this tutorial .I will show up very soon with next tutorial .

References

facebook developer website

facebook developer website

facebook developer website

 

 

About the Author: devender kumar

java/j2EE developer

Comments are closed.