In a previous post, we showed you the CSS necessary to make custom Share link in an FBML app or application tab. Since FBML is being deprecated, this obviously won’t work anymore.

You can, of course, use the standard Facebook Share widget, but that leaves you with few options with respect to the look and feel of the share link. Fortunately, you can get the Facebook modal-style popup window with your own custom Share link image or text using a little bit of JQuery and the Facebook Javascript SDK.

Include the Javascript SDK

If you’re already using the Javascript SDK in your application, you don’t need to (and in fact should not) include it again. But if you’re not using the Javascript SDK, just stick this bit of code down before the closing tag on your HTML page:

<div id="fb-root"></div>


FB.init({
appId : 'YOUR APP ID',
});

Obviously, the YOUR APP ID text should be replaced with your actual application ID.

Add jQuery

Once again, if you’re already using jQuery in your app, you should not include it again – but if you’re not, place this line of code in between the tags of your HTML page:

Add the Javascript SDK Share functionality

This goes in the head of your HTML page, and simply sets the parameters that you’re going to be passing to your custom Share link, and associates it with a CSS id (in this example, fbsharebutton) so that jQuery can use it.

$(document).ready(function(){
$('#fbsharebutton').click(function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'FBMHell',
link: 'http://fbmhell.com',
source: 'https://www.youtube.com/v/rp4UwPZfRis',
picture: 'http://fbmhell.com/files/2010/07/Photo-on-2010-06-03-at-22.00-4-crop1-150x150.jpg',
caption: 'Taking the Hell out of Facebook Development',
description: 'There is some really helpful stuff here!',
message: ''
});
});
});

The message parameter has been (or is being) deprecated by Facebook, so it’s not wise to rely on it here. Replace the sample FBMHell text with text that makes sense for your site or application. The picture parameter is the url to the 100×100 image that will be included with the shared post in the newsfeed.

Note that the source parameter (which is optional) will allow you to embed video content from a whitelisted source, like YouTube, directly into the newsfeed on the share.

Now all that’s left is to create the link. You can use text or an image, it doesn’t matter, as long as you include the CSS ID of fbsharebutton, since that’s the CSS id we used in the jQuery code above.

<img src="/images/share_me.png" id="fbsharebutton"/>

or to use text as a link:

<span id="fbsharebutton">Click me to share</span>

This will result in the familiar Facebook-styled modal popup window when the image or link is clicked.

Advertisement

Themeforest
ssd-virtual-servers-banner-468x60
Previous post

Getting Like, Share and Comment Count on External Pages in Facebook

Screen Shot 2011-09-21 at 6.38.20 AM
Next post

Bypassing Default Share Format in Facebook Fan Page Tabs

snipe

snipe

I’m a tech geek/dev/infosec-nerd/scuba diver/blacksmith/sword-fighter/crime fighter/ENTP/warcrafter/activist. I'm the CTO at Mass Mosaic and the CEO of Grokability, Inc. in San Diego, CA. Tweet at me @snipeyhead or read more...

  • Pingback: Tutorial: How to Add a Facebook Share Button to your Own Website Pages | HyperArts()

  • Nozreh

    Is there any way of passing a customize message in the facebook share popup?

    • Can you clarify what you mean by a customize message? The caption and description are both customizable.

  • JeremyC

    Been sifting through the ashes of all of the previous “Share” functionality which has been pointing me to new Like/Send buttons.  I’m sorry, but “SEND” =/= “SHARE” facebook….

    Thank you so much for this well-written, informative post!

  • Maria Pompodaki

    Hi is there a way for the popup to autoload on page load?

    • Anonymous

      Yes I need that too. is there a way?

  • Vaibhav Parmar

    how many no of characters we pass in description field i can pass only 100 characters long with line break not supported but support bold tag.Don’t know exactly length in Fb Forum it says it support 63206 characters.but can’t use in my case to much whats the problem behind that.

    The code is as follows:

    var link = “@Url.Encode(Context.Request.Url.ToString())”;
    var picture = “/content/images/s4/HeaderBG-Email.png”;
    // var linktoshare = “https://www.facebook.com/sharer.php?u=” + link;
    var msg = ‘I wants to share my KlabLab leaderboard status with you!’; msg = msg +
    msg = msg +
    Rank :’ + myRank + ‘ Level :’ + myXpLevel; alert(msg.length);
    alert(msg.length);
    FB.ui( { method: ‘feed’name:
    {
    method: ‘feed’name:
    ‘My Position on Klablab Leaderboard’, link: link,             
    link: link,             
    //picture: picture,
    caption:
    ‘Klablab Leaderboard Position’, description: msg              });
    description: msg
                 
    });

  • Ann Kwilinski

    Hello I was experimenting with this and I find that is does pot to the timeline but it doesn’t not show up int he feed.  Has anyone tested this out recently? Is there a way to make it post in the feed as well?

  • Thanks

  • faz

    how to share link on any facebook fan page. If i m the owner of that page.

  • geoff

    how do you show the number of shares beside your custom button? Can you do that?