Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Facebook share button: how to implement

I'm trying to figure out how to implement the Share button exactly as how it is implemented here. I want the ability to let users post a given link to their news feed without requiring any kind of app permissions with some optional text that they can add to it. How did BuzzFeed do it? The Facebook documentation is very confusing to me which is why I'm having a hard time implementing it myself. It'd be great if somebody could just layout the steps needed to take. What exactly do I need to put in my HTML page? Do I need to create a Facebook app?

like image 300
paul smith Avatar asked Nov 04 '12 23:11

paul smith


People also ask

How do I create a Share button on Facebook?

To generate a Facebook Share Button, visit https://developers.facebook.com/docs/plugins/share-button and specify the URL you want people to share as well as the width. Then generate the code, and paste it into your site where you want the button to appear.

How does Facebook share button work?

When someone hits the Facebook Share button, they can publish a post that they're interested in on their own wall, without having to copy and paste a link onto their Facebook profile. The Share button is one of the three engagement options that Facebook gives users to allow them to connect with people online.


2 Answers

To share your web-page, you don't need to create a facebook application.

You can just put that Facebook-share image there, with an href = "http://www.facebook.com/sharer.php?u=<your url>"

Facebook's like button allows sharing as well. The code to generate that for your website is in the official documentation.

like image 60
Anirudh Ramanathan Avatar answered Sep 30 '22 16:09

Anirudh Ramanathan


Edit the page you want to be shared, add these to the meta tags in the head.

<meta property="og:image" content="http://www. XXXX url of a jpg image you want to be displayed  on shared content has to be 200x200 pixels (make it in photoshop ect.) XXXX"/>
<meta property="og:title" content="xxxx A title you want to be dispayed in shared content xxxx"/>
<meta property="og:url" content="http://www. url of the page you want shared including the slash after .com xxx .com/"/>
<meta property="og:description" content="xxxx discription of the shared content xxx "/>

There is a list of the og properties other than these here- http://ogp.me/

Next insert this where you want the share button on your page,

<a title="xxx Share mypage.com xxx" href="http://www.facebook.com/sharer.php? u=http://www. xxx url of page you edited above xxx .com &t=xxx a title you want to use xxx" target="_blank"><img  src="http://www. xxx an image for the share button (make it in photoshop ect.)xxx" width="xx" height="xx" alt="Share"/></a>

Obviously take out the xxx's and leave the " " , if you change any of the above while testing you may have to go to facebook debugger and debug it as it sometimes hold on to the original content.

hope this helps

like image 28
BNO Avatar answered Sep 30 '22 18:09

BNO