Contact Us
  • Tutorial: Facebook Share Button on iFrame Tab

    NOTE (04.11.11): This approach may no longer work in iFrame tabs. We’re seeing this error when using a URL for the Page the Share Button lives on:

    Share Button Error

    Original Post…
    Facebook is moving away from using the Share Button, and encouraging everyone to use the Like Button instead.

    Facebook recently updated the Like Button so that it behaves more like a Share Button, so that what is posted to your profile Wall is a full story with a headline, a blurb and thumbnail. You also have the option to comment on the story link. The old Like Button only posted a link to the story in your recent activity.

    The lack of any Facebook documentation for the fb:share-button FBML, missing for many months now, is a strong indicator that the Share button’s days are numbered. (If you search for Share documentation on the Facebook Developers Blog, the “typeahead” autofill “Facebook Share” result redirects to the Like Button documentation.)

    And Facebook spokeswoman Malorie Lucich told Mashable that while the company will continue to support the Share button, Like is the “recommended solution moving forward.”

    The Share Button — fb:share-button — Works with iFrame Tabs

    However, the fb:share-button FBML tag actually works in iFramed pages on tabs. All it takes is some CSS to style the button to look like the familiar Share button:

    Facebook Share Button

    Recreate the Facebook Share Button with CSS, HTML and FBML

    First, you need this bit of CSS:


    <style type="text/css">
    div#sharebtn {
    font-family:arial,helvetica,sans-serif; font-size:12px;
    border:1px solid #999;
    padding:4px 4px 2px 2px;
    width:52px; height:16px;
    text-align:center;
    background-image:url(https://app.tabpress.com/xfbml-tags/_img/sharebtn_bg2.gif);
    }
    div#sharebtn a {
    color:#111;
    text-decoration:none;
    background-image:none;
    background-color:transparent;
    }
    </style>

    And here is the HTML and FBML:


    <div id="sharebtn">
    <fb:share-button href="FULL-URL-OF-SHARED-PAGE"></fb:share-button>
    </div>

    So that’s how we did it on our XFBML Tags tab on the HyperArts Fan Page, where we have all the XFBML tags that work demo’d.

    References

    Comments

    1. JeremyB says:

      Does it show the count of how many get shared?

      Also, I’m looking for a way to add a like button to a tab (FBML or iFrame) that Likes and links to the tab itself. So far all Like buttons in FBML will like the page itself, but not a tab. This would be a great way to let people spread the word about signups and contest forms in FBML/Iframe tabs.

      • The Share button won’t show the count. You may want to use the Like Button as it’s more full featured and is the one Facebook wants you to use.

        You can specify the URL you want your Like Button to like:

        <script src=”https://connect.facebook.net/en_US/all.js#xfbml=1″></script>
        <fb:like href=”http://URL-THAT-IS-LIKED” show_faces=”true” width=”450″></fb:like>

    2. Gunnlaugur says:

      Thanks for this HyperArts, your tutorials are always great and very understanding.

      Jeremy was talking about the Like button that redirects to the application tab, that is exactly what I need, its a great feature when you have a contest or other on your facebook tab.

      Also I spent a few hours last night trying to implement a open graph like button to my iframe page, but when I put in the link, facebook.com/mysite/appid the like button appeared just like any other like button missing the title, description, thumb image and more.

      But then I tried the exact same code using my website url and it worked perfectly!

      Do you know any solutions around this problem?

      Your input on this would be very appreciated.

      Thanks for all your support!!!

      • I did some testing and was able to add an app page (http://apps.facebook.com/namecheap/) to the “href” value in the fb:like code, and it worked fine. But it DOESN’T work when adding the URL for a specific tab on a fan page, at least I couldn’t make it work using both the URL itself and a bit.ly version of it.

        I can’t provide any more insight into this, unfortunately. But if someone else wants to chime in….

        • Gunnlaugur says:

          Okay, can you please provide me with a little more info of how you made this work, I have this application: http://apps.facebook.com/hberg-umokkur/ but I cant make this work.

          If you can make a small more detailed tutorial it would be greatly appreciated.

          Thanks 🙂

          • Just use the code in comment #2, but with that URL:

            <script src=”https://connect.facebook.net/en_US/all.js#xfbml=1″></script>
            <fb:like href=”http://apps.facebook.com/hberg-umokkur/ ” show_faces=”true” width=”450″></fb:like>

    3. cherry roselle says:

      Hello,

      I have a little problem of this tutorial, css wrok fine but I can’t see share link on my page, is there any thing else that I need to add?

      here is my test page:
      http://www.facebook.com/pages/Yundi-FB-Staging/186825538013620?sk=app_111683595580947

      thanks

      cherry

    4. So I went to your facebook page: http://www.facebook.com/HYPERARTS?sk=app_127182060688835 and I get a URL error when I try to hit the share button (“The Next URL is not owned by the application”). Have you gotten the share button to work correctly elsewhere?

      Thanks for the helpful tutorials!

      • Well, Facebook may have changed something in their API to disable this on iFrame tabs. I see the same error and the URL it shares is the URL for the Page it’s on, so….

        We’ll have to wait and see if it’s a glitch or permanent.

        Thanks for the heads up. I added a notice both on this blog and on the XFBML Tags tab on the HyperArts Fan Page.

        • Thanks for the reply! I certainly hope it’s a glitch because I’m building a tab now that would really benefit from a share button.

    5. On a tab, if open graph meta data is embedded in the head of the page the tab is pointing to it will not be picked up by a like within the tab correct? If the tab’s like/share is pointing to the url of the tab?

      Thanks!

    6. Ok replying to my last post – interesting point. If you leave the href attribute of your share OR like button blank within an application (tab) it will use the internal meta data of the application as it’s content!!

    7. The major problem with what I said above is the grey URL posted in a like or share is pointing directly at the url of the page hosting the tab…

      • Yes, if you leave out the “href” parameter, then it works but the link it posts to your profile goes directly to the app page which isn’t ideal. Thanks for the info, Jared!

        • timware :
          Yes, if you leave out the “href” parameter, then it works but the link it posts to your profile goes directly to the app page which isn’t ideal. Thanks for the info, Jared!

          It does indeed, but that’s the desired functionality in my case. I just wish I knew why the subtext under the title in the “post to profile” dialog was the hosted tab url and not a meta tag property…

    8. Gunnlaugur says:

      I don’t understand, how do i take out the href parameter?


      <script src="https://connect.facebook.net/en_US/all.js#xfbml=1"></script>
      <fb:like ="http://apps.facebook.com/hberg-umokkur/ " show_faces="true" width="450"></fb:like>

      Works like this?

      • You take out the href parameter and its value, so your tag looks like this:

        <fb:like show_faces=”true” width=”450″></fb:like>

        But keep the <script> tag.

    9. So let me get this straight, if I want to “share” something with someone, I have to hit like? But if I just “like” it how do I send it on to, say, my wife?

    10. dashuipif says:

      but meta doen’t work ! title,content and url can’t display in the dialog.why?

    11. dashuipif says:


      <fb:share-button href="http://www.baidu.com" class="meta">
      <meta name="title" content="HyperArts"/>
      <meta name="description" content="Read the Static FBML Bible and Rejoice!"/>
      <link rel="image_src" href="http://www.hyperarts.com/facebook/static-fbml-bible/_img/share-popup_80x80.gif"/>
      <link rel="target_url" href="http://www.gohour.com/job-details.php?PageType=1&JobID=NTA5OQ=="/>
      </fb:share-button>

      • I tried to use this same code, and it’s just blank…
        I would like to have a share button like the one in the link below. I’m running an app with iframes, one code that works is the following

        The problem is that I want to decide picture and text and this one just pulls random content.
        Can anyone help me to get this to work correctly?

    12. Gunnlaugur says:

      I found a IFrame app with share button that works perfectly, does anybody know how they make it work?

      http://www.facebook.com/MarylandVW?sk=app_126733870728149

      • That tab isn’t really an iframe. And that Share button is using the deprecated FBML code. It may work for the moment, but if it’s your tab you should keep an eye on it.

        Why do I say that “Welcome” tab isn’t an iframe? If you right-click it, you see there’s no options about viewing “this frame” … dead giveaway.