Loading...

Blog

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.

Leave a Comment

126 comments
Avatar
Avatar

Hello there, Nice tut indeed :) I'm having a problem and hope you can help me.. I'm running a game inside an iframe and when creating a facebook post with the scores, the post dialog goes out of the iframe, not allowing to select , for instance a specific friend because the ok button is out of the iframe. How can i fix this? Do you think you can help me? Thanks in advance

bwn
bwn

Your demo isn't working

Chris
Chris

I was using this example and it was working fine at least till Oct 2013. Trying now to use it again, is not working. Trying some changes I was finally able to post in my timeline but just the url. No title, no summary. Even the url shows the ?app_data as array: ?appdata={"postid":"2"}. By the way. Even your demo here is not working.

Wasif
Wasif

I am having a problem, the dialog box is showing all the data absolutely fine but when i share that link on the facebook in facebook wall it only appears the link. I dont know why its happening. Can anybody help me in this. Thanks in advance

Anuj maurya
Anuj maurya

please help me i have some problem in swf file game score sharing on fb wall..how to share score snapshot on fb wall..please help me

Jason
Jason

Hi! This worked great! :) One quick question, is there a way to tell that pop-up to autocenter on the screen? Thanks again!

Jo
Jo

Hey daddydesign, I just loved your fb share implementation. It worked just perfectly! Unfortunately it stopped working. The image doesn't show up anymore - can you tell me why? I tried your demo today and it didn't show me the image either. I would be really greatful for a fix there!!!

Ivan Aliku
Ivan Aliku

Wonderful work you've got here. Please, I need a solution to a problem I'm still trying to fix. On using the window.location.href="..." function, it redirects to the download page irrespective of the visitor sharing the the content. Is there any additional code that could be added to ensure a visitor shares the content before the download link is provided so they won't skip sharing my content? To simplify my question, I'm trying to use this iframe share button in place of opt-in forms. I just want a visitor to share the page before they get access to the download link. And I also want the friends of this visitor to access the freebie went they click on the link on the visitor's wall from Facebook, share and get their download also without direct access to the download link ;)

someone out there
someone out there

thank you in a million, with this i can accomplish my job without using meta open graph, and i can avoid one sh*t guy in my office... YEAH... Thank YOU....

Rajiv Ranjan
Rajiv Ranjan

There is bug in code. should come ------&p[images]-------- in stead of ------&&p[images]-------

Arjay
Arjay

This is great. Thanks for this it will help me a lot to combine the social icons on the reviews plugin in wordpress. Thanks ..

umer
umer

Great code! That's helped a lot. Any idea why image is not showing there? I have also tried your demo page. Image is not getting there also. Any help will be highly appreciated.

Jose Carlos
Jose Carlos

Uhhh!! Facebook no image load now, what is the problem? Thansk!!!

windhunter
windhunter

Hi, find out the image would not run, others are running perfectly but just the image will not pop out, any idea?

Md Zainul Abedin
Md Zainul Abedin

I have used the code. One problem is that it does not show the image. Can anyone give me a solution.

KK
KK

I was using the same code in my website. when i share the page, the thumbnail image is not showing. kindly give me advise if i missed out anything

michael
michael

this was incredibly helpful.. thanks so much. do you know if there is any switch-out of php that could make the link open in the fb app if viewed on iOS. i already can determine if_mobile(). thank you guys for your work.

Clark
Clark

For some reason the image im inputting will not display in the share window the url to the image in question is insp.com/wp-content/themes/insp_foundation/assets/images/logo/insp-logo.png any ideas?

Alex
Alex

Great code! i am searcing for a facebook share like yours! the one u use under the post title! where can i find it ??? thanks in advance! :)

Josh
Josh

This was exactly what I was looking for! Thanks for the great post and info.

gilang
gilang

its not function anymore..

William
William

Hi! How add two images in url? ex: &&p[images][0]=&&p[images][1]=', .... No way!

niraj dama
niraj dama

thnx daddydesign ! ! saved my lot of time...

hassan
hassan

thanks this is very help full for me ..............i use it its easyyyyyyyyyyyyyyy in use

gtershel
gtershel

This was a great help. Worked like a charm. The facebook developer page was no help in customizing a button and neither was about an hour of other sites. Finally I found yours and was up and running in about 20 mins.

sharko
sharko

it gives me this message when i click share button : "The message could not be posted to this Wall." .. can you help me please?

Said Tahsin Dane
Said Tahsin Dane

I guess we cannot alter "Write Something..." part, can we? We cannot people post what we told them to :))

ryan@allsitemedia.com
ryan@allsitemedia.com

I downloaded this code and tested in 2 different LAMP environments. Works great, except the image parameter. I hard coded an image url from the web, and nothing. The output looks identical to your functional demo, so I'm not sure what the issue is. Are others currently using the image parameter with success? Did FB deprecate this? Thanks for posting this method!

Dewang Jalgaonkar
Dewang Jalgaonkar

Thank You Very Very Much!!!!!!! I was searching for the share button for long time and i was getting only like button. You have explained very nice. Thanks Again!

NinjaRat
NinjaRat

Great tutorial! But I can't seem to set the "No thumbnail" checkbox to marked as default. Do you have any suggestions? Thnx :D

JB
JB

Thank you so much for this - was absolutely doing my head in! :) Hugely appreciated

jivchik
jivchik

Your demo not working in iphone and ipod (but working in iPad),after click share button opened new facebook window(without any info) and nothing more, i think problem in URL with array. Can you tell me how can i fix this? Thanks

priti
priti

how to make title and summary field non-editable? is it possible?

daddydesign
daddydesign

Hi Chris, Our demo is still working for us..

daddydesign
daddydesign

OMG, thank you.. We are fixing that now :)

daddydesign
daddydesign

We think FB fixed this issue, please let us know if the image still isn't showing up.

daddydesign
daddydesign

We think FB fixed this issue, please let us know if the image still isn’t showing up.

daddydesign
daddydesign

We think Facebook fixed this issue, please let us know if the image still isn’t showing up.

daddydesign
daddydesign

Issue is fixed now. Let us know if the image shows up..

daddydesign
daddydesign

Should be working now, please let us know if it doesn't show up.

gilang
gilang

wow..im sorry for miss issuing this.. the past i try but its not work but after i see your demo page its awesome.. can you post some details tutorial??? ill be helpfull for this,btw thanks a lot for sharing this next time ill be your loyal visitor.

daddydesign
daddydesign

HI, yes we are seeing same issue and are looking into a fix. If anyone has suggestions, please tell :)