Name
<fb:share-button/>
Takes a given target URL—optionally with some meta
information so that it knows what to render—and displays a dialog
box with a preview box of the target URL, inviting the user to share
that content with friends. The “Share” button will automatically try
to render the URL for you, or else you can provide metadata
explicitly in the share-button call or in the
site itself that tells Facebook how to display the preview.
FBML-Specific Attributes
Required
class=[url|meta] default: noneThe method to provide attributes to Facebook to aid in rendering the preview to be shared.
href=[string] default: noneRequired only when
class="url"is used. This is the URL to render a preview for. The URL should contain meta elements (listed next) to provide the most intelligent preview possible.
Optional
If meta is selected for the
class attribute, you must provide optional link
and meta tags within the <fb:share-button/>
tags.
Meta and Link Tags
The following are the accepted meta and link tags for different types of content.
Basic meta tags
These tags can be used with any content type. Be
sure to include the medium meta tag to
specify the type of content. You can create a preview of any
page, not just audio and video sources, using these tags:
<meta name="title" content="The title of the page"/><meta name="description" content="The description of the content on the page"/><meta name="medium" content="[audio|image|video|news|blog|mult]"/><link rel="image_src" content="The URL of the image to be displayed"/><link rel="target_url" content="The URL of the document being shared"/>
Required meta tags for an audio source
<meta name="title" content="The title of the page"/><meta name="description" content="The description of the audio"/><link rel="image_src" content="The URL of the image (such as album art) for the audio"/><link rel="audio_src" content="The URL of the audio file"/><meta name="audio_type" content="Content-Type of the audio file"/>
Optional meta tags for an audio source
<meta name="audio_title" content="The title of the audio (such as song name)"/><meta name="audio_artist" content="The author of the audio (singer, rapper, speaker)"/><meta name="audio_album" content="The album the audio belongs to"/>
Required meta tags for a video source
<meta name="title" content="The title of the page"/><meta name="description" content="The description of the page"/><link rel="image_src" content="The URL of the image or screenshot of the video"/><link rel="video_src" content="The URL of the video being previewed or shared"/><meta name="video_height" content="The height of the video"/><meta name="video_width" content="The width of the video"/><meta name="video_type" content="Content-Type of the video file"/>
Example FBML
Here is an example of the
<fb:share-button/> tag with meta
information. For the following video:
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/I6IQ_FOCE6I&hl=en">
</param>
<param name="wmode" value="transparent">
</param>
<embed src="http://www.youtube.com/v/I6IQ_FOCE6I&hl=en"
type="application/x-shockwave-flash" wmode="transparent"
width="425" height="355">
</embed>
</object>you would use this FBML code (note that I added my own
screenshot in the image_src field):
<fb:share-button class="meta">
<meta name="medium" content="video"/>
<meta name="title" content="Here Comes Another Bubble v1.1"/>
<meta name="description" content="Funny Video About the 'Social
Media Bubble'"/>
<link rel="image_src" href="http://staynalive.com/wp-content/
themes/revvedup-158/images/Picture_1-20080318-164716.jpg"/>
<link rel="video_src" href="http://www.youtube.com/v/
I6IQ_FOCE6I&hl=en"/>
<link rel="target_url" href="http://youtube.com/watch?v=
I6IQ_FOCE6I"/>
<meta name="video_height" content="355"/>
<meta name="video_width" content="425"/>
<meta name="video_type" content="application/x-shockwave-flash"/>
</fb:share-button>Here is a second example of the
<fb:share-button/> tag, this time with just
a URL:
<fb:share-button class="url" href="http://youtube.com/watch?v=
I6IQ_FOCE6I"/>Rendered HTML for Single Instance of Tag
Both examples will render as shown in Figure 3-31. (Note that the example with just a URL would autopopulate its own screenshot from the first image on the page or from existing meta tags.) The “Share” button that generates this image when clicked is shown in Figure 3-32.
