« PREV: Walls360 Custom...
Startup Caffeine... :NEXT »

How to Create a Custom Facebook Share Button for your iFrame Tab

How to Create a Custom Facebook Share Button for your iFrame Tab

A common feature of Facebook is the use of being able to ‘Share’ objects whether these objects are videos or links. If you’re anything like us then you like to have full control over what and how you share it, this proved rather difficult until now. In this tutorial we are going to show you, in two easy steps, how to create a custom Facebook ‘Share’ button to use on your Facebook iFrame tab that will allow viewers to share and post your custom content to their Wall. The difference between this ‘Share’ button and the standard ‘Share’ button is that every element (custom message, custom title and custom thumb image) within the share window is completely customizable, giving you total control over what you want to share.

The Code

Step 1: PHP

<?php
$title=urlencode('Title of Your iFrame Tab');
$url=urlencode('http://www.facebook.com/wordpressdesign');
$summary=urlencode('Custom message that summarizes what your tab is about, or just a simple message to tell people to check out your tab.');
$image=urlencode('http://www.yourdomain.com/images/share-thumbnail.jpg');
?>

Each line within the PHP allows you customize every element within the share window. Every bit of coding within the “(‘…‘)” that you see effects those elements. To understand which PHP element affects what, take a look at the screenshot below:
fb share gragh
Keep note that the $url section must contain a URL. This directs people to your tab once the share has been published on the poster’s wall. Also, the $image must contain a full URL. If your link to the image is “images/share-thumbnail.jpg”, it will not be read correctly because the share window is coming from Facebook’s server, not yours. As for the size of your thumbnail image ($image), it will automatically be proportionately resized to fit either 100px wide or 100px tall (depending which measurement is larger of the original image). So ideally, you should make your thumbnail 100px X 100px to prevent unwanted resizing.

Step 2: XHTML

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">Insert text or an image here.</a>

As you can see, the onClick=”window.open(‘…’);” will create a popup window that contains the ‘Share’ information (see picture above). Do not change this information. The only bits of coding you need to change are the width and the height of the code (if you are not satisfied with the measurements). These measurements define the width and height of the popup window containing the “Share” information.

The other bit of coding you can change is where it says; “Insert text or an image here”. This is where you can insert whatever element you choose to become the link. This can simply be text or a fancy button that you created yourself. The choice is up to you!

Completed Code

<?php
$title=urlencode('Title of Your iFrame Tab');
$url=urlencode('http://www.facebook.com/wordpressdesign');
$summary=urlencode('Custom message that summarizes what your tab is about, or just a simple message to tell people to check out your tab.');
$image=urlencode('http://www.yourdomain.com/images/share-thumbnail.jpg');
?>

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=548,height=325');" href="javascript: void(0)">Insert text or an image here.</a>

Demo

You can view the live demo here.
Download the code here.

Please Note

Your iFrame tab must be a PHP file in order for this to work.

Troubleshooting

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still cannot get it to work please leave us a comment below and we will respond as soon as possible.

Posted In

Tutorials

129 Comments

  1. Casper July 15, 2011

    is it possible to redirect to a new page after sharing/posting on wall??

    Reply
  2. Casper July 17, 2011

    yup. after you’ve hit the button “share link” at the pop-up dialog box, you return to the same facebook page as the one before on your demo page.. what if I for instance would like to land on a new facebook page, saying “thank you for sharing”, afther clicking “share link”… would that be possible

    Reply
    • daddydesign July 21, 2011

      Only solution we figured out is this

      <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title;?>&p[summary]=<?php echo $summary;?>&p[url]=<?php echo $url; ?>&&p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=548,height=325'); window.location.href='http://domain.com/thankyou.php';" target="_parent" href="javascript: void(0)"> Share our Facebook page!</a>

      This will redirect the page after they click your share button. But…. we just made the link automatically redirect to the thank you page after clicking the “SHARE OUR FACEBOOK PAGE” button, it doesn’t mean whether or not the person has actually shared the link or not after they click the submit button, they still need to click the submit to the pop up window.

      Also, if you want the thank you page to open in new window, just change the _parent to _blank

      Reply
      • Georg January 3, 2012

        Thanks for sharing this guys. I can’t get the redirection to work (error and page does not display at all). Is the above code working for anyone?

        Reply
        • Ann May 2, 2012

          I can not get this to work for me either . the dialog box comes up but all the fields have a php echo blanks.

  3. Garry July 21, 2011

    I am also interested in what Casper is asking but instead after they share this post i want to redirect them to a download link. But a page/another tab would also be useful. Thanks.

    Reply
  4. Ben July 26, 2011

    Is it possible to have multiple thumbnails when the share box pops up? there is an option to scroll through multiple thumbnails. thanks

    Reply
    • daddydesign July 26, 2011

      We will look into this.

      Reply
      • Ben July 28, 2011

        you guys having any luck with this yet? i still haven’t figured it out yet…..

        Reply
  5. Tim July 30, 2011

    I have the php file – but not sure what code to put into my iframe tab on FB to call up that php file.

    Reply
    • daddydesign July 30, 2011

      are you sure your using all of the code in the tutorial?

      Reply
    • daddydesign July 30, 2011

      you need to 1st create an iframe app, this tutorial is just for the button to work within it

      Reply
      • gnp November 22, 2012

        Can we use this code in .php page? instead of not in “iframe-tab”?

        Reply
        • daddydesign November 24, 2012

          yes you can use this anywhere..

  6. yasmine August 4, 2011

    Would it be possible to share a source file of this ? i’m having a hard time….

    TThanks ;*)

    Reply
    • daddydesign August 16, 2011

      we will be uploading a downloadable zip file with the full code this week!

      Reply
  7. Gabriel August 5, 2011

    just not sure how exactly I am supppose to insert an image.
    right now it doesn’t seem to load.

    i wrote:
    instead of Insert [...]

    here is the result: http://www.facebook.com/pages/Hallé-Couture-Assurances/193128524070038?sk=app_163924977007211

    Reply
    • daddydesign August 5, 2011

      not sure why you cant get an image inserted, its just inserting a regular image code. Everything else seems correct.

      Reply
  8. Robert K August 13, 2011

    This is great information very easy to understand and use. Would also like to know if it is possible to have multiple thumbnails. As far as I can tell the Custom message $summary=urlencode has a character count of 300 character’s.

    Reply
    • daddydesign August 16, 2011

      I don’t think that’s possible but I will research.

      Reply
  9. Name* August 23, 2011

    title url and description is shown but image does not shown

    Reply
  10. Analisa August 24, 2011

    Thank you for this info, I have been trying to find a way to duplicate this old Share button functionality for a while now. The only difference is that this appears in a new window rather than in a Facebook pop-up dialog in the same browser window. Have you tried to replicate that pop-up dialog aspect? Thanks!

    Reply
  11. Adam August 30, 2011

    Sorry to sound stupid… but where does the php code sit? I looked at the source code in your example but can’t see it anywhere!

    The popup works on mine but all the information is blank as it can’t read the php for some reason.

    Thankyou

    Reply
  12. Adam August 30, 2011

    Please disregard my last comment, I managed to get it working only I don’t think it’s how it’s supposed to work lol. The only thing I’ve noticed is that when the popup appears, users are able to select the title and description and edit them before submitting, is this something I’ve done when changing the code or is it supposed to work like that? Please see link below for example.

    http://www.facebook.com/messymediauk?sk=app_208195102528120

    Reply
  13. Voss August 30, 2011

    Is it possible to do something like this outside of Facebook? I want to be able to have as share button in a email that shares a Facebook page with custom content.

    So basically what you are doing, but from within a email or another site.

    thanks.

    Reply
    • daddydesign August 30, 2011

      it should work most places, but not to sure about email though. Have you tried it?

      Reply
  14. Pp September 21, 2011

    Hi

    I have a problem with your code. I get the following runtime-error:

    URLExceptionInvalid scheme for url (javascript: void(0))

    Can you tell me why? :-)

    Reply
  15. Nick October 3, 2011

    Hi,

    Thanks for your code, it works well !

    How about share count?

    Reply
  16. Nick October 3, 2011

    Hi DaddyDesign,

    1) We found this facebok api http://api.facebook.com/restserver.php?method=links.getStats&urls=xxx, but with our popup share method, this api just couldn’t get our share count. If not we can simply get the count from this api.

    2) Do you have any idea that using Like button with custom URL, TITLE, IMAGE and DESC? Because facebook is no longet support this share function.

    Reply
  17. joseph October 5, 2011

    Thanks for another great tutorial. Works Great!

    Question tho, how can i customize the caption under the title. Currently it has a url to http://www.facebook.com. This url displays on your wall after it is sharred. Thanks!

    Reply
    • joseph October 5, 2011

      the Canonical URL actually.

      Reply
  18. Acapulco October 13, 2011

    I have a little facebook button problem and I think you are the right person to ask.

    I have the Like, Send and Facebook Comment apps on my site and only send gives an option of which image to choose. Normally the others end up sending a printer gif image. When people comment on an article or like an article I would like the correct image to be sent from the article and not from the print -edit – buttons at the top of the article.

    How can I correct this behavior?

    Reply
  19. Jordan November 1, 2011

    This is probably a silly question, but should it be possible to input this code into a pre-established Iframe (i.e. Hyperart or Static HTMl) and have it work?

    Reply
    • daddydesign November 1, 2011

      I would assume it would be ok there as well. Did you try it?

      Reply
  20. Jordan November 2, 2011

    Thank you for getting back to me. Yes, the button comes up but when you go to share it, it seems it can’t read the PHP. I’m not sure if it’s something I am doing wrong. Would be interested to know if anyone else has been able to do it? And if so, how!?

    Reply
  21. Daniel November 8, 2011

    Wow! this script is amazing!! i hope to use it soon!!

    Reply
  22. steffi November 18, 2011

    Is there a way in you can avoid the pop up for fb share button. I want it to go directly to the facebook page with out the users knowlege

    Reply
  23. Emma November 30, 2011

    Hi there-
    I’m really excited to use this feature, but I’m trying to incorporate it to a list item. I’m not sure if that’s what’s affecting the coding, but currently the php values are not populating, and I’m just getting “” etc., respective to what should be populating. Am I overlooking something?

    Many thanks :)

    Reply
  24. Nitin December 3, 2011

    This is awesome. I was looking for this only. Thanks a ton buddy :)

    Reply
  25. Rob December 9, 2011

    Thanks!

    Reply
  26. Jay December 13, 2011

    Is there any way to make the share console pop up in the middle of the screen?

    Reply
  27. John December 22, 2011

    Thanks for posting this. I was beating my head against the wall trying to figure out how to get the share button to show what I wanted.

    Instead of pointing the share URL to my FB tab URL, I pointed it to a page on the main site that redirects to that FB tab URL. This was to get rid of the http://www.facebook.com domain that shows up under the main link. Next step is to call the FB share PHP URL using something like FancyBox or a modal style window vs. the popup.

    Just wanted to say thanks again for sharing this online. Helped me out in my pinch. :)

    Reply
  28. Abirami December 23, 2011

    Hi,

    I am using asp.net to develop Iframe tab application..

    Could you please provide the sample code for share, that i can use for my iframe app?

    Thanks

    Reply
  29. David December 30, 2011

    Hey Guys,

    Thanks for the tips! This is maybe a silly question, I’m using the link escaped and formatted as you described, but I’m getting a “Could not post to Wall” error from Facebook after logging in / seeing the correct preview. Did you guys encounter this? Do I need to embed an API key or something somewhere? Did you guys find a site with the proper documentation for this params? (I can’t seem to find a version of the documentation for “sharer.php” that includes the params you mentioned)

    Thanks!
    David

    Reply
  30. manish January 5, 2012

    Thanks a million. I was going mad to get FB read the right image. And also was having problem with Title. Your code worked like a breeze.

    Reply
« Previous Comments   /   More Comments »

Leave a Reply

Your email is never published nor shared.
Required fields are marked *

You may use these HTML tags and attributes:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. Or subscribe without commenting.