Facebook Social plugins

The Facebook Social plugins for Rails 3 consist of:

The ‘Helper::View` contains methods for inserting the HTML5 <div> elements for Facebook social plugins

The ‘Helper::Script` contains methods for inserting <script> snippets for Facebook integration, such as displaying the Social plugins with the Facebook layout/styling applied etc.

Social plugins

Currently the following Social plugins are included in this gem

(see more info below)

Script Helpers

The async_init_script requires the Facebook app_id, fx ‘753632322’ and the domain name of the app, fx ‘www.example.com’. You can also specify the channel file (will default to channel file in vendor/assets of this gem)

Configuration scripts*

Login

Logout

Open Graph Helper

Convenience method to generate all header/meta tags for Facebook Open Graph

*<head> tag helper*

*<meta> tag helpers*

Extra View helpers

Social plugins

Currently the following Social plugins are included in this gem

View methods exposed:

Note: You don’t have to worry about dashed or underscored properties. Conversions will be handled automatically. The Facebook Social plugins API is (sadly) not very consistent when it comes to attribute names.

Extras:

Logout button options: html: (html options for anchor tag) size: ‘small’ or ‘large’ (size of logout button img)

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>

Comments

<div class=“fb-comments” data-href=“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>

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>

Login

<div class=“fb-login-button” data-show-faces=“true” data-width=“200” data-max-rows=“1”></div>

Registration

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.

<fb:registration redirect-uri=“developers.facebook.com/tools/echo

fields='[{"name":"name"},
         {"name":"username","description":"Username","type":"text"}]' 
onvalidate="validate_async"></fb:registration>

<script src=“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'});
});

} </script>

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.

Facepile

<div class=“fb-facepile” data-href=“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.

Recommendations

<div class=“fb-recommendations” data-width=“300” data-height=“300” data-header=“true”></div>

Send button

<div class=“fb-send” data-href=“example.com”>>

Subscribe button

<div class=“fb-subscribe” data-href=“www.facebook.com/zuck” data-show-faces=“true” data-width=“450”></div>

Contributing to facebook-social_plugins

Copyright © 2012 Kristian Mandrup. See LICENSE.txt for further details.