Home > Adobe Flash, Adobe Flex, Xuland > Adding a Facebook “like” button to a Flash/Flex Application

Adding a Facebook “like” button to a Flash/Flex Application

Mission: Add a Facebook “like” button to my experimental Flex social networking site Xuland.

I initially thought, “Boy this must be a piece of cake. Surely thousands of other developers have already figured this out!”. Boy was I wrong.

The best example I could find on this specific topic was http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/. Spend a good half hour digesting the contents of that blog posting and you’ll be ready to scratch the idea altogether.

I wanted a simple implementation that I could knock out in less than an hour. I figured why not just use an iframe!

Here’s the steps:

First, go to http://developers.facebook.com/docs/reference/plugins/like

Fill out the form to get your special iframe code

Next, open up your Flex application’s HTML wrapper (e.g. index.template.html) in FlexBuilder

Copy and paste the iframe code (from above) into the HTML template. I put mine right under the <div id=”flashContent”> section.

1
2
3
4
5
6
7
8
9
<div id="flashContent" style="z-index:-1">
  ...
</div>
 
<iframe 
     src="<< insert your custom facebook like URL here >>" 
     scrolling="no" frameborder="0" 
     style="border:none; overflow:hidden; width:100px; height:21px; z-index:99; position: absolute; top: 0px; left: 100;" 
     allowTransparency="true"></iframe>

Notice the iframe style declaration. Make sure z-index=99, then you can use CSS to position your like button exactly where you want it.

Also notice the flashContent div style declaration. Set its z-index = -1.

In the SWFObject section, add a param for “wmode”. Set it to “transparent”.

1
2
3
4
5
6
7
var params = {};
params.wmode = "transparent";
swfobject.embedSWF(
  "${swf}.swf", "flashContent", 
  "${width}", "${height}", 
  swfVersionStr, xiSwfUrlStr, 
  flashvars, params, attributes);

In the body tag, set the z-index=0

1
<body style="position:relative;left:0px;top:0px;z-index:0;">

That’s it!

The result should look something like this:

Good luck with your implementation!

To read more about Xuland, visit my other blog post regarding this application.

Erich

Categories: Adobe Flash, Adobe Flex, Xuland Tags:
  1. June 14th, 2011 at 21:03 | #1

    although iframe is the easiest solusion
    yes it is if all HTMLs of the project are completely in your control
    you cannot implement an iframe on ad-provider such as fourm, yahoo nor msn

  2. April 30th, 2013 at 23:17 | #2

    Have you ever considered about adding a little
    bit more than just your articles? I mean, what you say is important and all.
    Nevertheless just imagine if you added some great graphics or video clips to give your posts more, “pop”!

    Your content is excellent but with pics and videos, this site
    could certainly be one of the most beneficial in its field.
    Great blog!

  3. March 15th, 2014 at 12:38 | #3

    Awesome things here. I’m very satisfied too peer your
    article. Thank you so much and I amm having a look forward to touch you.
    Will you kindly drop me a e-mail?

  4. March 23rd, 2014 at 09:05 | #4

    Don’t wait to competition beat you be faster and get Facebook fans now.

    They also offer custom packages to help you get upto
    twenty million Facebook fans. Glee Live tickets for two at Valley View
    Casino Center on Sunday, May 29 ($78, a $132 value).

  5. March 23rd, 2014 at 21:13 | #5

    Hey! Quick question that’s entirely off topic. Do you know how to make your
    site mobile friendly? My website looks weird when viewing from my iphone 4.

    I’m trying to find a theme or plugin that might be able to resolve this problem.
    If you have any suggestions, please share. Thanks!

  6. April 25th, 2014 at 05:05 | #6

    Hello my family member! I want to say that this post is amazing, nice
    written and come with approximately all significant infos.
    I’d like to peer more posts like this .

  7. May 3rd, 2014 at 12:20 | #7

    magnificent issues altogether, you just won a emblem new reader.
    What would you recommend about your put up that you made a few days in the past?
    Any sure?

  8. May 21st, 2014 at 17:39 | #8

    This website was… how do you say it? Relevant!! Finally I have found something
    that helped me. Thanks!

  1. November 16th, 2014 at 13:37 | #1