Fb:chat-invite

From Facebook Developer Wiki

Jump to: navigation, search

Contents

Description

Enables your users to initiate Facebook Chat with their friends from within your applications.

This tag renders a list of the current user's friends on your canvas page. When the user selects a friend, a Facebook Chat window opens, and can display a pre-populated message in the text field. This way your users can interact in real time with each other, whether to play a game with each other or to collaborate with a productivity tool.

It's best that you make the message concise, and if you include a URL, keep it as short as possible.

Detecting a User's Online Status

Detecting a user's online status can help you present a more concise and useful Chat invite. You can determine whether a user's friends are online by checking for the online_presence setting in the user FQL table. If a friend is not online, you can put that friend's UID in the exclude_ids array (see below) so that friend doesn't appear in the Chat invite.

Rendering the Invite with FBJS (for Flash-based Applications)

You can use FBJS to render the Chat invite on your canvas page. This is useful for non-page-based applications (especially Flash applications and games).

To render a chat-invite from FBJS, use fb:js-string together with setInnerFBML(). See the Examples for sample code.

Positioning the Chat Invite Tool Over an IFrame

If you're rendering iframes in an FBML application with the fb:iframe tag, you can use CSS to overlay the Chat invite over the iframe rendered by fb:iframe. You need to add some styling to the div tag. See the Examples for sample code.

Incorporating Live Message (Advanced)

Another way you can communicate with your users and their friends is to use the Chat invite tag with the Live Message feature. This way, you can update the page of the user who initiated the chat with some sort of message.

For example, say your chat invitation text contains a URL that allows the recipient of the chat invite to join a game when clicked. When the recipient clicks the link in the invite, the next page load would trigger a call to liveMessage.send, which sends a message to the sender's page. This message would invoke an FBJS callback (for example, to a function called. 'onFriendJoin()') which would inform the sender the friend has joined the game; you could even change the page to bring the sender into the game.

Note: The LiveMessage feature is currently in beta.

Attributes

RequiredNameTypeDescription
required msg string The default message that gets sent to the friend along with the chat invite. You can use plain text only here. However, if you include a URL, it gets formatted properly as a hyperlink.
optional condensed bool Indicates whether to display the user's profile pic and name, or just the user's name. (Default value is false.)
exclude_ids array A comma-separated list of user IDs to exclude from the chat invite (like you can do with fb:multi-friend-selector).

Examples

<fb:chat-invite msg="let's play a game!" condensed="false" exclude_ids="1,2,3"/>


Rendering fb:chat-invite with FBJS

<fb:js-string var="chatInvite"> <fb:chat-invite msg="let's play a game!" condensed="false" exclude_ids="1,2,3"/> </fb:js-string> <div id="chat_invite_container"></div> <script> document.getElementById('chat_invite_container').setInnerFBML(chatInvite); </script>


Positioning the Chat Invite Tool Over an IFrame

<fb:js-string var="chatInvite"> <fb:chat-invite msg="let's play a game!" condensed="false" exclude_ids="1,2,3"/> </fb:js-string> <div id="chat_invite_container" style="position: absolute; left: 200px; top: 300px"></div> <script> document.getElementById('chat_invite_container').setInnerFBML(chatInvite); </script>

The style attribute of the chat_invite_container div tells the browser where exactly to place the friend list, even if it's over other elements, like an iframe.

Notes

  • At this time, you cannot render this tag with fb:serverfbml (for iframe applications and Facebook Connect sites). However, you can use this tag in the context of an iframe rendered with fb:iframe in an FBML application only (not with an HTML <iframe> tag) -- see Positioning the Chat Invite Tool Over an IFrame above. We'll support fb:chat-invite in iframe applications in the future and will let you know when it's available.
  • This tag does not work in Internet Explorer 6.
reference