Facebook share button: how to implement

Question

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?

Answer 1

This is what works.

in HTML:

<a href="http://www.facebook.com/sharer.php?u=<http://google.com">Facebook Link</a>

Where you replace http://google.com with your URL.

in PHP, if you want it to pull the url you are on:

<a href="http://www.facebook.com/sharer.php?u=<<?php echo "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; ?>">Facebook</a>

Answer 2

If you want to customize that share page, try this:

Javascript Popup Example:

var title = 'My Title';
var summary = 'This is my summary';
var url = 'http://www.mydomain.com/path/to/page';
var image = 'http://www.mydomain.com/images/myimage.png';

var fb = window.open('http://www.facebook.com/sharer.php?s=100&p[title]='+encodeURIComponent(title)+'&p[url]='+encodeURIComponent(url)+'&p[summary]='+encodeURIComponent(summary)+'&p[images][0]='+encodeURIComponent(image));
fb.focus();

Answer 3

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

Answer 4

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.