Entries tagged with javascript

A few weeks ago we gave Givvy users the ability to connect with Facebook using Facebook Connect. When we did the push to production there was a feature missing that we wanted. The feature was the ability to push information to your friend's Homepage feed. I had read all the docs I could find, but the only thing I could get it to do was post a 1 line message to my profile page. Frustrated I put it down and decided it best if I leave it alone and come back to it later. Well tonight, was later. I discovered that the problem was not with my code, but with my feed template.

I will now give you instructions on how to create a form feed template that will work place a feed message on the connected user's friend's home page.

First thing is you need is to go tothe Feed Template Console. This is where you create your template that will show in the feed. From there it will ask you what application you want to create the feed for. If you don't already have an application created you should go to the Facebook Developer application and create your application. I am going to choose the "Givvy" application.

Clicking on the Next button brings you to the "Create a One Line Story template". This template is what is displayed on your profile. Follow the instructions on the page it's pretty simple. When you are happy click next. The next page is "Create a Short Story template (optional)". If you want this template to publish to your friend's homepage feed then do not skip it. This is the template that displays in their feed. Choose your title and your content. The next page is also listed as optional, but you may want to use it to drive traffic to your website "Create an Action Link (optional)". Create a link using text and a URL to direct your user's friends to your website.

Once you have both the "one line story template" and the "short story template" you can use it with your facebook connect application! It's that simple.

One of the hardest things to do is search Google to figure out how to embed sound in a website that you can control without using flash. Today I am going to show you the simple way to embed a hidden sound file and control it with it's javascript methods.

First we need a sound file. Take an mp3 you have and copy it to a file named "sound.mp3", we will use this as the sound we are going to play. Next we will write our object code to embed the file into the webpage.

<div style="visibility: hidden">
    <object type="audio/x-mpeg"
            data="sound.mp3" width="1" height="1" autoplay="false" 
        id="soundplayer">
        <param name="src" value="sound.mp3" />
        <param name="controller" value="true" /> 
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
    </object>
</div>

You'll notice that in both the <object> an the object parameters we include some of the same data twice, and in a couple different ways. This is because browser makers suck and instead of sticking to a standard they go off on their own merry way. We are simply covering all our bases.

You will also notice that the width and height tags are set to 1. Which sets the player so small that it can hardly be seen. The object tag does not like the style "display: none;" so instead we used "visibility: hdden;". This will keep the 1x1 pixel object from being seen, and it being 1x1 means it takes up little space and can be throw at the bottom of your HTML document out of the way of your design flow.

Now we need to be able to control our player. The object tag is very non standard with it's javascript calls, which is what threw me off for so long. I was expecting it to have a play() method and a stop() method. This is close, but incorrect. It has a Play() and a Stop() method. Not very standard for javascript methods as they are usually start with a lower case character. so we'll add this bit of HTML

    <input type="button" value="Play" 
        onclick="document.getElementById('soundplayer').Play()" />

    <input type="button" value="Stop"
        onclick="document.getElementById('soundplayer').Stop()" />

If you now load your page, your 2 buttons should start and stop the sound.mp3 loaded into the object file. That's it pretty simple. Oh? What's that? You ask, why is there no "embed" tag version? It's pretty simple really. Mozilla family browsers were really the only browser that supported embed tags, and since Firefox supports the object tag, the embed tag is pretty pointless, so I don't use it. Have fun! View the Demo.

Facebook Connect - Pushing to feeds.

Embeded website Sound without Flash