Social Media Integration Share on Facebook – How to embed your own MP3s on someone's Facebook wall when your web pages are “Shared” on Facebook
|
|
Did you know you can embed your own MP3s on someone's Facebook wall when someone uses "Share on Facebook" on your website? This article will show you how to do it.
Facebook Bookmarks or "Share on Facebook"
We have all seen the ubiquitous “Share” buttons on blogs and Corporate websites, such as the below.
They all tend to work the same, when you click Facebook a new browser window opens up and you will see the usual Facebook “Post to Profile” page (such as the one at the top of this article).
In my other article Share on Facebook - Customizing the Text and Images that are posted when your web pages are "Shared" on Facebook I went over how you customize the text and images that Facebook uses for a normal (non-multimedia) web page.
For web pages that contain multimedia, such as MP3s, Facebook does allow you to embed your MP3s on someone's Facebook wall, but only if you specify your own MP3 player. Don't worry, it's not as complicated as it sounds.
Before I begin
All the changes I describe below will need to be done in the HTML code of the webpage on your website that has the MP3, and that you want to embed on someone's Facebook wall when a visitor clicks "Share on Facebook".
First - Specify a Title, Description, and Image
As with normal (non-multimedia) web pages, you should specify a title, description, and image for your multimedia web page. I explained how to do this in my other article Share on Facebook - Customizing the Text and Images that are posted when your web pages are "Shared" on Facebook, so you'll need to do this first if you haven't already. If you're restricted by where you can put these, for example, you use Wordpress, the image_src can go in the html body.
In the example above, I specified the title, description, and image below.
|
<meta name="title" content="Share on Facebook – How to embed your own MP3s on someone's Facebook wall when your web pages are Shared on Facebook" /> <meta name="description" content="Did you know you can embed your own MP3s on someone's Facebook wall when someone uses Share on Facebook on your website? This article will show you how to do it." /> <link rel="image_src" href="/images/stories/articles/social_media/integration/facebook_audio_post_onwall.jpg" /> |
Second - Specify the Location of your MP3 player and the MP3 that you want Facebook to use
To specify the location of the MP3 player component and MP3 that you want Facebook to use, you will need to add the following html code to your web page (it can live in the html body). For the purposes of this example, I will use the JW Player which I use all over this website, however, you may use theoretically any MP3 player component you wish.
| <link href="/embed/player.swf?config=http://garethhooper.com/embed/flvplayer_facebook_embed_audio_config.xml&file=http://garethhooper.com/images/stories/articles/social_media/integration/cupids_chokehold_cover.mp3" rel="video_src" /> |
Where embed/player.swf is the relative location of the MP3 player, ?config=http:/garethhooper.com/embed/flvplayer_facebook_embed_audio_config.xml is the absolute location of the configuration for the MP3 player (so will change depending on the MP3 player you use), and &file=http://garethhooper.com/images/stories/articles/social_media/integration_cupids_chokehold_cover.mp3 is the absolute location of the MP3 file. If the MP3 is on another website, specify the full URL to the other website instead.
Lastly - Specify the dimensions of the MP3 player that you want Facebook to use
You should specify the height and width of the MP3 player so that Facebook displays it correctly. You will also need to specify a video type. Even though you are embedding an MP3, you still specify a video type, I believe this is more to do with the fact that the MP3 player is a flash component. The height, width, and video type can go in the html body.
| <meta content="24" name="video_height" /> <meta content="300" name="video_width" /> <meta content="application/x-shockwave-flash" name="video_type" /> |
Example
Here's a sample MP3 (thanks Justin Sanderson) and two example links below it:
Justin Sanderson - Cupid's Chokehold (Cover)
You need to get your website WHITE LISTED with Facebook
Before you'll be able to successfully embed your website's MP3s in Facebook, you will first need to get your website white listed, which is just a simple form you fill in. Click below and fill in the simple form.
Facebook Video Embed Whitelist Request
I know it reads "Video", but this same form applies to MP3s too. If like this website, you host your MP3s on another website (for better bandwidth, etc), such as Amazon's S3 service website, you still ONLY need to whitelist your own website. You do NOT need to also whitelist the other website that is hosting your MP3s (e.g. Amazon S3).
Facebook turned around my whitelist request in less than 8 hours, so you'll need to wait for your whitelist confirmation (which comes via email) before proceeding with your testing.
Caution when testing
- See my other article Share on Facebook - Customizing the Text and Images that are posted when your web pages are "Shared" on Facebook on how it appears that Facebook caches.
- Note: You won't see the MP3 player on the Post to Profile page. It's only visible once the link is posted on the visitor's Facebook wall, so I suggest you test by actually posting to your own wall (you can remove the post afterwards).
Related Articles
- Share on Facebook – How to embed your own Videos on someone's Facebook wall when your web pages are “Shared” on Facebook
- Share on Facebook - Customizing the Text and Images that are posted when your web pages are “Shared” on Facebook
- How to create your own Facebook Custom Page with your own page icon
- Overview of the New Facebook Social Plugins – Part 1 of 3
Please leave me a comment if you found this article useful or if you have any questions.
Comments (11)
...
i have created two Apps in the Developer-Group before with the titles "test" and i have to choose one App. I dont understand this.. i want only to post flash-apps as Status...
-
- +0
-
-
...
thank you
-
- +1
-
-
...
actually , Please let me know how to pass my flash params values while using . What is config and file here ?
-
- +1
-
-
...
-
- +0
-
-
...
-
- +0
-
-
...
Does this still work? I tried it with my website. I got everything as you stated, except when the image is clicked, instead of playing the song/showing the flash player... the original webpage is opened in a new tab! Any help would be highly appreciated.
-
- +0
-
-
...
Thanks for making me aware of it.
Gareth
-
- +0
-
-
...
Changing the link to the mp3 or video in the player config from http to https might solve it, but I haven't had a chance to test that. I will post a full fix soon though, sorry for the delay, work is crazy.
Gareth
-
- +0
-
-
Write comment
Show/Hide comment form
| < Prev | Next > |
|---|