Search code examples
facebookfacebook-javascript-sdkfacebook-social-pluginsfacebook-share

Inserting facebook share button on personal website

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.

Solution

  • 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">