jquery.FbMultiShare.js

Related Links


Facebook's multi-friend-selector (v1 and v2) has a nice GUI for selecting multiple friends, but is limited to only sending requests or invites. This plugin leverages the selection functionality from the standard multi-friend-selector to generate a customizable friend selector that can be used for Facebook shares.

There is an example of this plugin in FaceSharp's Test Suite.

The plugin accepts the following options:
  • friendContainer (DOM element | default: 'ul#friends'): container element for the list of friends
  • friendElement (DOM element | default: 'li'): id of friendElement must equal the friend's Facebook user id
  • selectedClass (string | default: 'fbms-selected'): class name used for the selected friend element
  • serverPost (boolean | default: false): set to true if using server-side API call for Share
  • serverPostParams (object/string | default: null): parameters to be sent to server for server-side post
  • serverCallbackPath (string | default: ''): callback path for server-side post
  • searchBox (DOM element | default: '#fbms-search'): input field for filtering list of friends
  • messageBox (DOM element | default: '#fbms-message'): input field for entering a custom message to be used on the Share
  • submitButton (DOM element | default: '.fbms-submit'): element for sending the Share
  • submitButtonClick (callback | default: null): method called when user clicks on the submitButton element
  • submitButtonSuccess (callback | default: null): method called when the Share has completed successfully
  • submitButtonError (callback | default: null): method called when the Share has returned an error
  • cancelButton (DOM element | default: '.fbms-cancel'): element for closing the Share dialog
  • cancelButtonClick (callback | default: null): method called when user clicks on the cancelButton element
  • error (callback | default: null): method called when user clicks on the submitButton element, but has not selected a friend
  • notificationsElement (DOM element | default: '#fbms-notifications'): container element for displaying notificationsHtml if a friend is not selected (can be used by other callbacks)
  • notificationsHtml (string | default: 'Please select a friend.'): message that gets appended to notificationsElement element if a friend is not selected (can be used by other callbacks)

These are used in the Facebook API call to configure the Share (Graph API > Post > Publishing):
  • wpMessage (string | default: ''): sets the "message" value
  • wpPicture (string | default: ''): sets the "picture" value
  • wpLinkURL (string | default: ''): sets the "link" value
  • wpLinkText (string | default: ''): sets the "name" value
  • wpCaption (string | default: ' '): sets the "caption" value
  • wpDescription (string | default: ''): sets the "description" value
  • wpSource (string | default: ''): sets the "source" value
  • wpActions (string | default: ''): sets the "actions" value
  • wpPrivacy (string | default: ''): sets the "privacy" value
  • wpTargeting (string | default: ''): sets the "targeting" value

The FaceSharp example shows the multi-friend-selector with a Facebook GUI, but the plugin does not require this interface. All of the code required to use the Facebook GUI is available in the FacebookApp Area, but the following code shows what is required while allowing for complete customization of the interface.

HTML:

    <div id="fbms-notifications"></div>

    <input id="fbms-search" type="text" autocomplete="off" placeholder="Start Typing a Name" value="Start Typing a Name" />
    <input id="fbms-message" maxlength="1000" value="Write a message" />

    <ul id="friends">
    <!-- START: the list of friends will need to be appended dynamically -->
        <li id="*Friend's Facebook User ID*">*Friend's Name*</li>
    <!-- END: list of friends -->
    </ul>

    <input class="fbms-submit" type="button" value="Share" />
    <input class="fbms-cancel" type="button" value="Cancel" />

JavaScript:

The following JavaScript code initializes the plugin with all of the required options:
$.fbMultiShare({
    wpLinkURL: 'customizable link URL'
    , wpLinkText: 'customizable link text'
    , wpPicture: 'customizable absolute image path'
    , wpDescription: 'customizable description'
});

Last edited Mar 14, 2011 at 6:47 PM by bluehazetech, version 2

Comments

No comments yet.