9

We have an SWF based audio player. We want to be able to embed this player into Facebook wall posts in the same way that Youtube videos or BandPage songs are embedded into Facebook feed walls. Right now clicking on the image that we provide redirects to the player instead of loading the player inline.

UPDATE: We want to embed our SWF player like BandPage does it. We want to have the little play button on top of our image. We also want to have the small symbol left to the date.

alt text

Clicking on the image or play button then loads the SWF inline.

alt text

How can I achieve this with the Facebook JavaScript API? Is it really just a matter of being white listed? Or do I have to provide more parameters?

This is what I have right now:

function fb_post()
{
    var message = 'Look at my fantastic SWF!';
    var picture = 'A LINK TO A 100X100 IMAGE';
    var link = 'A LINK TO OUR SWF';
    var source = 'A LINK TO OUR SWF';
    var name = 'Blah blah';
    var caption = 'Yada yada yada';
    var description = 'Facebook programming';
    var type = 'swf';

    FB.api('/me/feed', 'post', { message: message, picture: picture, link: link, name: name, type: type }, function(response) {
     if (!response || response.error) {
         alert('Error occured: ' + response.error.message);
        } else {
         alert('Post ID: ' + response);
        }
    });
}

UPDATE: It's working now! We've got the play button on our image and the SWF is loaded and displayed in the Facebook wall :) We haven't got it working with FB.api though. We are using FB.ui.

Use this form for the Video Embed Whitelist Request. We had to wait less than a week to get our URLs whitelisted.

Jan Deinhard
  • 17,925
  • 24
  • 75
  • 131
  • I have updated my answer – saibotd Oct 23 '10 at 09:13
  • look at this topic [Playing back an embedded mp4 video in a Facebook like or share using Flash][1] it shows the new meta tags needed. [1]: http://stackoverflow.com/questions/12623865/playing-back-an-embedded-mp4-video-in-a-facebook-like-or-share-using-flash – Bludau Media Feb 24 '14 at 18:39

2 Answers2

6

You need your domain being white listed. Here is the form: http://www.facebook.com/help/contact.php?show_form=video_embed_whitelist

Update: Have you looked into this? This seems to cover your needs (man, you gotta hate FB for putting up all of these API's and the half-arsed documentation)

This might be interesting:

<meta property="og:video" content="http://www.example.com/player.swf?video_id=123456789"/> 
<meta name="video_height" content="200" /> 
<meta name="video_width" content="300" />
<meta name="video_type" content="application/x-shockwave-flash" />

It's the example for a video-player, but it should work for an audio-player as well.

Also read the OpenGraph documentation - there is a lot of information on how to make your site Facebook-friendly.

saibotd
  • 731
  • 7
  • 19
  • Isnt't that only for videos files? We have an SWF based audio player. – Jan Deinhard Oct 22 '10 at 17:14
  • 1
    I don't think it matters, facebook just needs your word that they can trust your SWF. We are currently in the same process with a video-player - I'll let you know if we encounter any problems. – saibotd Oct 23 '10 at 08:24
  • saibotd, that'd be great. I'll keep you updated too. Do you know what parameters to the FB.api post call are needed? – Jan Deinhard Oct 23 '10 at 08:34
  • saibotd, I think we are on the right track here. Let's hope we get white listed. – Jan Deinhard Oct 25 '10 at 11:21
  • They've just send us an email - we've been white-listed! We don't have the site completely done yet, but I will report if it works as soon as possible. – saibotd Oct 27 '10 at 07:19
  • We've been whitelisted too :D – Jan Deinhard Oct 28 '10 at 09:09
  • 1
    This is no longer in sync with the open graph tag docs on Facebook at http://developers.facebook.com/docs/opengraph/ – Dave Apr 06 '11 at 00:00
0

I also tried embedding a wav audio file using swf based audio player in a Facebook Post by using metatags.

What I did is as follows:

  • Posted a link onto a user's wall using feed graph api.

  • When the link is clicked, server side I add metatags to response header.

    1. I am able to post it successfully on user's wall.
    2. When the same post is viewed by a friend, friend sees the post correctly. On clicking onto pic that has a player button, it plays the audio. On clicking the link URL also it plays correctly. The issue is that the entire post area is clickable and when any area other than link and image is clicked, it shows the html code that I set in response header.
Archana Thapar
  • 31
  • 4