Implementing Facebook Share in 2 different ways

Well, how often do we see in every website the commonly used "Share" button?

Don't you know how to integrate it into your website? Don't worry, I suggest you 2 ways, you can choose the one that suits you most!

Facebook Share button - No1

You can render the Facebook Share button in an anchor (a) tag that takes the following 3 attributes:

1. name: You must specify fb_share for this attribute.
2. type: The type of Share button or link to render, with or without a count included
3. share_url: The URL for the page you want to share

You can do this by firstly including following lines in the head section of your code:

and then by using the anchor tag with the appropriate attributes, exactly where you want it to appear on your page.



From the above attributes, only first one- name - is mandatory, the other ones are optional.

The "type" attribute can have one of the following values:

• box_count
• button_count
• button
• icon_link or
• icon

If none of them is specified, then the button defaults to the "button count" type. Experiment with them, and see which you like most!

Finally, regarding the anchor tag, if you don't specify a share_url, then this attribute defaults to the current page.



Facebook Share button - No2

Are you working with graphic designers, that want every button in your page to be customized according to the general design of your website?

Well in this situation, you can include your own button this way:

Let me explain a little bit. As you can see, you have an anchor tag, which, on click, calls a javascript function "fbs_click". Inside img tag, you locate your own image!

In your head section or just above the anchor tag, you define "fbs_click" function the way I did. The function, takes the url of your current page.

The url that is passed to the Facebook servers looks up certain HTML tags within it. If you don't tag your page, Facebook Share will grab the title of your page as specified in the title tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.

In order to control the exact title, description, and thumbnail that Facebook Share uses, add the following meta tags to the head element in your page:




Conclusion
If you want to do this the simple way, use the first solution! If you want to put your own button, just use the second way!

There is also a third way to include a share button in your website. You have to include the Facebook JS SDK and invoke stream.publish or stream.share from the FB.ui() method. But I will explain it in more detail, in another post!


***You can read more about "Share button" at the official Facebook site.