× Joomla Facebook Connect support forum

Topic-icon HOW DO I TRIGGER AN OPENGRAPH ACTION?

Active Subscriptions:

None
Hi there,

As I mentioned in other posts, I wish to invoke an opengraph action when some media is played in my site's media player. I'm using music collection which utilises JW Player. The player/component contains javascript events that update the number of plays on a song, utilising the song id so, with some scripting I can easily access the song's data - title, description etc - but, I'm a little unclear as to how I would go about triggering the action when a user plays it. To clarify, how do I go about binding the action to the click of the play button?

I have music collection graph tags setup as follows;
  1. Artist/Client pages are dynamically given JFBCGraph type=learnthrusong:client. This page lists all of a client's alums
  2. Album/Project pages are dynamically given JFBCGraph type=learnthrusong:project. This will be a collection of songs/videos that can be played using the JW player
  3. Song/Video pages are dynamically given the JFBCGraph type=learnthrusong:song.

In 1, I'll only be using the like, recommend and comments etc., however, in the album (2) and song (3) pages, I'm also going to need to be able to trigger the actions above.

This poses a challenge in that, on the album page, if a user clicks play on a song, I want to trigger the action to point to the song, i.e. use the song data as opposed to the current view/tags for the album. Can I just pump in the url to the song which is accessible from the player (I'll have to do this programmatically) as an 'a' tag? I mean, will FB just look at that page/url I give it for the song to get the opengraph tags, or do I need to provide it with more info?

Any help, example or otherwise would be much appreciated!

Many thanks,

Gez
The topic has been locked.
Active Subscriptions:

None
12 years 2 months ago #19681 by learnthrusong
Any help on this would be most appreciated,

Gez
The topic has been locked.
Active Subscriptions:

None
12 years 2 months ago #19704 by learnthrusong
Given that I wish to invoke the 'play' action on a playlist items play button that already has a javascript event attached, do I need to use the FB JS API?

How do I call this into action?

Thanks,

Gez
The topic has been locked.
Support Specialist
12 years 2 months ago #19709 by alzander
Gez,
In all honesty, you're going a bit beyond what we've done enough research on. Deep Open Graph integration is definitely something on our radar, but Facebook still has a backlog of Open Graph actions to publish and is really just starting to promote it to all users. While I understand the big picture, we haven't implemented the actions and OG objects yet, which is the first step to getting better integration into JFBConnect for it.

With that said, the page below has a great overview of what you need to do to publish the actions:
developers.facebook.com/docs/opengraph/tutorial/

It sounds like you already have the "Object Page" setup how you want it (the playlist item with a Play button). They also include the following tag on the Object page:
<fb:add-to-timeline></fb:add-to-timeline>
My assumption is that that tag is used by Facebook to verify that this page should be added to the timeline. It's also possible that simply having this line will automatically include the page on the user's timeline. I honestly can't find much info about it.. but keep it in mind..

Once that's setup, the have a great code snippet for what would happen if a user clicked "I cooked this" (for a recipe):
function postCook()
  {
      FB.api(
        '/me/[YOUR_APP_NAMESPACE]:cook?recipe=http://fbwerks.com:8000/zhen/cookie.html',
        'post',
        function(response) {
           if (!response || response.error) {
              alert('Error occured');
           } else {
              alert('Cook was successful! Action ID: ' + response.id);
           }
        });
  }
That's the Javascript you'd need to call, obviously replacing bits and pieces for your example as necessary.

There is also a way to add Open Graph events via PHP code on the server side.. still looking into that.

Hope that all helps, but definitely keep us posted on how things go. We're excited to see that JFBConnect is helping a lot with this, but we understand it's not doing everything for you.. that's how a lot of features are added to JFBConnect, by the way. We get some overzealous users to help us understand how they want things to be used, and then we try to make it simple for the masses :)

Best of luck,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 2 months ago #19713 by learnthrusong
Hi Alex, thanks again for the info and links!

Just one question... Before the JS function that you posted, do I need initialise the JS API - I mean, is this already included in the JFBC Framework?

I think I have to go the JS route although I'd prefer to be using PHP as the play button already increments the total plays on a song via JS... I just think it would be more complex to be passing back and forth between the 2 via ajax or some more convoluted way!

Thanks again!

Gez

Oh, sorry, 1 last thing - I'm presuming the z-index question is going to be pretty straight forward right? Sorry, Did you get chance to look at that post yet?
The topic has been locked.
Support Specialist
12 years 2 months ago #19775 by alzander
Gez,
The Facebook Javascript library is automatically included on each page and should be initialized in a way that you can just add the Open Graph code that you need.

We agree the PHP code could be a good way to go, but for now, I'd recommend the JS path. It's simper, easy to read (less debug), and should work with your current flow. When we dig into Open Graph actions later this year, we're planning to include ways for both actions to happen. Events that go back to the server will use PHP and events on the page will be able to use JS. Again though, this is still a bit off, so we'd recommend the path of least resistance for now :)

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 1 month ago #19790 by learnthrusong
Hi Alex,

That's great!

One more question...

I've created my object (well a few) and configured some custom properties. According to the documentation/tools, custom properties are added in meta tags (raw) like
<meta property="learnthrusong:topics" content="Dog Fouling" />
where 'learnthrusong' is the application namespace and 'topics' is the property name.

I understand from your replies that this is not something that JFBC currently handles however, if I needed to create a tag like your {JFBC} tags to accommodate this, in which file would I need to add it?

I was thinking that something like
{JFBCGraphProperty [app-namespace]:[property-name]=some string}
would do the trick as it shouldn't interfere with any existing stuff from what I can tell. I've had a quick 2 min glance through some of the files but haven't yet come across the function to construct the raw meta from the JFBC tags found in content.

Just wanted to put this out there really... Any advice on achieving this would be most welcome and needless to say that any of my findings will be reported back in the hope that it's useful to your good selves/community!!!

Thanks again,

Gez
The topic has been locked.
Support Specialist
12 years 1 month ago #19799 by alzander
Gez,
You should be able to use the standard JFBCGraph tag to do what you're looking for:
{JFBCGraph learningthrusong:topics=Dog Fouling}
We updated the JFBCGraph tag (in 4.0 I believe, but possibly 4.1) to handle arbitrary Open Graph tags so it didn't always expect og:xxx type tags.

Let us know if that doesn't work for you and we can investigate further!
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 1 month ago #19804 by learnthrusong
Hi Alex,

Wow, that's awesome, I must have missed that in the docs so sorry if it is my oversight!

Brill! I'll get all over that now and let you know how it goes.

Thanks,

Gez
The topic has been locked.
Active Subscriptions:

None
12 years 1 month ago #19811 by learnthrusong
Yes good sir,

you were exactly correct about the custom properties being able to be set as you describe... AWESOME!

Gez
The topic has been locked.