0

I want to put a button on my website that will open a popup for the user to share the url on its profile.

I followed the steps shown here, after click on 'get code':

1. Include the Javascript SDK on your page once, ideally right after the opening <body> tag.

2. Place the code for your plugin wherever you want the plugin to appear on your page.

but I get a blank div without the button. What's missing? Do I need to register on facebook developers? Do I need to include some javascript src in the <head>?

On twitter is very simple, you just need to get the code from here

Edit: I want something like youtube facebook share.

Tharif
  • 13,794
  • 9
  • 55
  • 77
pedrorijo91
  • 7,635
  • 9
  • 44
  • 82
  • 1
    Did you fully include the SDK code in your website? If you did make sure you have scripts running, and also Adblock is off (adblock might disable share buttons), post some code of what you have. – matrixanomaly May 21 '15 at 21:37
  • @matrixanomalyare you refering to this? https://developers.facebook.com/docs/javascript/quickstart/v2.3 So I need an App ID? – pedrorijo91 May 21 '15 at 21:47
  • 1
    At first I thought you didn't need to, that as long as you copied the code in that first block when presented you should be fine. Here's a fiddle but it does not work: http://jsfiddle.net/uvu33wx8/ But it turns out that it's not displaying, you would need an app ID, refer to this answer: http://stackoverflow.com/a/23822510/4512948 If that works I'll post an answer. – matrixanomaly May 22 '15 at 05:10
  • it helped @matrixanomaly ! :) thanks. btw, I was testing locally, and the fb sdk does not loads locally, only when deployed – pedrorijo91 May 22 '15 at 13:50
  • Hmm, I think it should work as long as you have an internet connection? You might need a local host running to serve you all your files of your website, as opposed to just double clicking and opening the file. – matrixanomaly May 22 '15 at 14:04
  • I've based myself in this answer http://stackoverflow.com/questions/24668860/google-analytics-file-not-found – pedrorijo91 May 22 '15 at 14:34

1 Answers1

2

As noted in the comments, somehow the default method as suggested by Facebook is not working, or rather the way the share button documentation suggests is not clear enough. This answer as suggested appears to work. Note that you will need a Facebook App ID.

Alternatively, this answer allows for a simple link, which you then have to style yourself with CSS, this alternative has the benefit of making share buttons that are consistent in design with your website, if you just want the vanilla blue Facebook button then continue with this answer.

Squarespace also details the default way of adding a facebook like button, my attempts to get it to work in a jsFiddle were not successful.

  1. Get an AppID and embed the Facebook script in your website.

    • This step is explained in detail in the official documentation, where you just generate your own AppID then copy paste the script code (usually after the <body> tag.

  2. Add a jQuery library for the next bit of code as explained in this answer.

  3. The share dialog box script:

-

<script type="text/javascript">
$(document).ready(function(){
$('#share_button').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'This is the content of the "name" field.',
link: 'Your-blog-link',
picture: ‘http://yourpicture-here’,
caption: 'yourCaption',
description: short-description-here
message: ''
});
});
});
</script>

More parameters can also be added to customize the button.

Lastly, add the image/element you want to be the share-button:

Something like: <img src = "share_button.png" id = "share_button">

Community
  • 1
  • 1
matrixanomaly
  • 6,627
  • 2
  • 35
  • 58