How to integrate share/invite function into fanpage custom tab

I was just wondering how I could integrate a share/invite function into a custom facebook tab.

My purpose is to dev a button "invite friends to the XXX fanpage."

I already created an HTML page that I use as a custom tab for facebook.

The current page is here

Any help would be much appreciated.

Cheers,

Solution

Your APP ID: 275339329168531 Your Page URL: http://www.facebook.com/pages/Salon-Babyboom/237448289650901

Per: https://developers.facebook.com/docs/reference/dialogs/requests/

You can only invite people to use an application. So this would be the code to do an app invite.

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>Request Tester C</title>
  </head>

  <body>
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <p>
      <input type="button"
        onclick="sendRequestToRecipients(); return false;"
        value="Send Request to Users Directly"
      />
      <input type="text" value="User ID" name="user_ids" />
      </p>
    <p>
    <input type="button"
      onclick="sendRequestViaMultiFriendSelector(); return false;"
      value="Send Request to Many Users with MFS"
    />
    </p>

    <script>
      FB.init({
        appId  : '275339329168531',
        status : true,
        cookie : true,
        oauth: true
      });

      function sendRequestToRecipients() {
        var user_ids = document.getElementsByName("user_ids")[0].value;
        FB.ui({method: 'apprequests',
          message: 'My Great Request',
          to: user_ids, 
        }, requestCallback);
      }

      function sendRequestViaMultiFriendSelector() {
        FB.ui({method: 'apprequests',
          message: 'My Great Request'
        }, requestCallback);
      }

      function requestCallback(response) {
        // Handle callback here
      }
    </script>
  </body>
</html>

To "Share" a fanpage, you will use the Like Box plugin to do that.

See: http://developers.facebook.com/docs/reference/plugins/like-box/

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=275339329168531";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/pages/Salon-Babyboom/237448289650901" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>