Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Social Plugins

kristianmandrup edited this page · 5 revisions

Facebook root

<div id="fb-root"></div>

A Facebook placeholder div

Activity feed

<div class="fb-activity" data-width="300" data-height="300" data-header="true" data-recommendations="false"></div>
  • site - the domain for which to show activity; include just the full domain name, without http:// or a path. The XFBML version defaults to the current domain.
  • action - a comma separated list of actions to show activities for.
  • app_id - will display all actions, custom and global, associated with this app_id.
  • width - the width of the plugin in pixels. Default width: 300px.
  • height - the height of the plugin in pixels. Default height: 300px.
  • header - specifies whether to show the Facebook header.
  • colorscheme - the color scheme for the plugin. Options: 'light', 'dark'
  • font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
  • border_color - the border color of the plugin.
  • recommendations - specifies whether to always show recommendations in the plugin.
  • linktarget - This specifies the context in which content links are opened.
  • ref - a label for tracking referrals; must be less than 50 characters
  • max_age - a limit on recommendation and creation time of articles that are surfaced in the plugins, the default is 0 (days)

Comments

<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>

href - the URL for this Comments plugin. News feed stories on Facebook will link to this URL. width - the width of the plugin in pixels. Minimum recommended width: 400px. colorscheme - the color scheme for the plugin. Options: 'light', 'dark' num_posts - the number of comments to show by default. Default: 10. Minimum: 1 mobile - whether to show the mobile-optimized version. Default: auto-detect.

Like box

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>
  • href - the URL to like. The XFBML version defaults to the current page.
  • send - specifies whether to include a Send button with the Like button.
  • layout - there are three options (standard, button_count, box_count)
  • show_faces - specifies whether to display profile photos below the button (standard layout only)
  • width - the width of the Like button.
  • action - the verb to display on the button. Options: 'like', 'recommend'
  • font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
  • colorscheme - the color scheme for the like button. Options: 'light', 'dark'
  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters fb_ref - the ref parameter fb_source - the stream type ('home', 'profile', 'search', 'ticker', 'tickerdialog' or 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.

Live stream

<div class="fb-live-stream" data-event-app-id="285193711555371" data-width="400" data-height="500" data-always-post-to-friends="true"></div>
  • data-event-app-id : the id of the Facebook app

data-always-post-to-friends

When set all posts will always go their profile. Should only be set when this post makes sense outside the context of this event.

Login

<div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1"></div>
  • show-faces - specifies whether to show faces underneath the Login button.
  • width - the width of the plugin in pixels. Default width: 200px.
  • max-rows - the maximum number of rows of profile pictures to display. Default value: 1.
  • scope - a comma separated list of extended permissions.

Registration

<div class="fb-registration" 
  data-fields="name,birthday,gender,location,email" 
  data-redirect-uri="https://developers.facebook.com/tools/echo/"
  data-width="530">
</div>

The Registration plugin allows users to easily sign up for your website with their Facebook account. The plugin is a simple iframe that you can drop into your page. When logged into Facebook, users see a form that is pre-filled with their Facebook information where appropriate.

The registration plugin gives you the flexibility to ask for additional information which is not available through the Facebook API (e.g. favorite movie). The plugin also allows users who do not have a Facebook account, or do not wish to sign up for your site using Facebook to use the same form as those who are connecting with Facebook. This eliminates the need to provide two separate login experiences.

  • client_id - Your App ID.
  • redirect_uri - The URI that will process the signed_request. It must be prefixed by your Site URL.
  • fields - Comma separated list of Named Fields, or JSON of Custom Fields.
  • fb_only (Optional: boolean) - Only allow users to register by linking their Facebook profile. Use this if you do not have your own registration system (Default: false)
  • fb_register (Optional: boolean) - Allow users to register for Facebook during the registration process. Use this if you do not have your own registration system (Default: false)
  • width (Optional :int) - The width of the iframe in pixels. If the width is < 520 the plugin will render in a small layout.
  • border_color (Optional) - The border color of the plugin.
  • target (Optional) - The target of the form submission: _top (default), _parent, or _self.

Async Validation

If you have to check something on your server (e.g. if a username is taken) then you don't have to reply from the validation function right away. You can return null (which is the default return in javascript) and then use the second parameter to reply with any errors. You have 20 seconds before the form submits anyways.

<div class="fb-registration" data-redirect-uri="https://developers.facebook.com/tools/echo" 
  data-fields='[{"name":"name"}, {"name":"username", "description":"Username","type":"text"}]' 
  data-onvalidate="validate_async">
</div> 

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
function validate_async(form, cb) {
  $.getJSON('https://graph.facebook.com/' + form.username + '?callback=?', 
    function(response) {
      if (response.error) {
        // Username isn't taken, let the form submit
        cb();
      }
      cb({username: 'That username is taken'});
  });
}

Add to Timeline

<div class="fb-add-to-timeline"></div>

Add to Timeline lets users create a lasting connection between your app and their Timeline on Facebook. When a user clicks Add to Timeline, your app can publish app specific actions to the user's Timeline. As users engage with your app over time, their actions become more prominently displayed on their Timeline. This can become an important part of how people express themselves on Facebook. The experience for users is seamless and fun and requires little effort for them to personalize their identity.

Add to Timeline plugin is available through the Javascript SDK via the fb:add-to-timeline XFBML tag.

There are two different display modes for the Add to Timeline: box (default) and button. You can also configure additional extended permissions for the plugin by adding the perms parameter.

  • mode - the display mode - box (default) and button
  • show_faces - whether to show faces

Facepile

<div class="fb-facepile" data-href="http://developers.facebook.com" 
  data-action="join" data-size="large" data-max-rows="1" data-width="300" 
  data-colorscheme="dark">
</div>  

The Facepile plugin displays the Facebook profile pictures of users who have connected with your page via a global or custom action, or can also be configured to display users that have signed up for your site.

If you want to display users who have connected to your page via an action, specify with the action parameter

To display users who have liked your page, specify the URL of your page as the href parameter. To display users who have signed up for your site, specify your application id as the app_id parameter.

  • event-app-id - the app id for the event
  • action - the action to perform, fx 'og_recipebox:planning_to_make'
  • width - the width of the plugin in pixels. Minimum recommended width: 400px.
  • href - the referenced page
  • max_rows - max rows to display, 1-10 normally

Recommendations

<div class="fb-recommendations" data-width="300" data-height="300" data-header="true"></div>
  • site - the domain to show recommendations for. The XFBML version defaults to the current domain.
  • action - a comma separated list of actions to show recommendations for.
  • app_id - will display recommendations for all types of actions, custom and global, associated with this app_id.
  • width - the width of the plugin in pixels. Default width: 300px.
  • height - the height of the plugin in pixels. Default height: 300px.
  • header - specifies whether to show the Facebook header.
  • colorscheme - the color scheme for the plugin. Options: 'light', 'dark'
  • font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
  • border_color - the border color of the plugin.
  • linktarget - This specifies the context in which content links are opened. By default all links within the plugin will open a new window. se to _top or _parent.
  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters
  • max_age - a limit on recommendation and creation time of articles that are surfaced in the plugins, the default is 0 (days)

Send button

<div class="fb-send" data-href="http://example.com"></div>
  • href - the URL to send.
  • font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
  • colorscheme - the color scheme for the button. Options: 'light', 'dark'
  • ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters
  • fb_ref - the ref parameter
  • fb_source - the story type ('message', 'group', 'email') in which the click occurred.

Subscribe button

<div class="fb-subscribe" data-href="https://www.facebook.com/zuck" data-show-faces="true" data-width="450"></div>
  • href - profile URL of the user to subscribe to. This must be a facebook.com profile URL.
  • layout - there are three options (standard, button_count, box_count).
  • show_faces - specifies whether to display profile photos below the button (standard layout only)
  • colorscheme - the color scheme for the plugin. Options: 'light' (default) and 'dark'
  • font - the font to display in the plugin. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
  • width - the width of the plugin.
Something went wrong with that request. Please try again.