CODEWITHSUNDEEP
facebookcenter
Stoop
Stoop

Reputation: 1275

How to send app invite to facebook friends on the facebook mobile app?

I have a website and a facebook canvas app. Users on the website can create content and then invite their facebook friends to see it. When they do this, their friends will get a notification in facebook (on facebook.com) and the link will take them to my facebook canvas page. Works fine.

Now, I want to do the same for friends who are on facebook's mobile app (not facebook.com). So, if a user on my website invites a friend, I want that friend to be able to see the notification in their facebook mobile app and then click the link which will take them to my website to see the content. I don't have a mobile app for my web site, so that's why I want the link to go to my website via web browser.

Is this possible?

If not, what is the best way to be able to have your website allow users to invite facebook friends, and then those friends get the notice on the facebook mobile app?

The reason why this is important is because the users on my website will be creating time sensitive content so I don't want them to have to wait for their friends to be physically at their computers on facebook.com. I want their friends to get it right away when they open the facebook mobile app wherever they are in the world.

Upvotes: 0

Views: 3452

Answers (2)

Pritam Kumar
Pritam Kumar

Reputation: 86

This code helps you post, send messages, and also send requests to your friends:

Head Tag:

<script type="text/javascript">
  function logResponse(response) {
    if (console && console.log) {
      console.log('The response was', response);
    }
  }

  $(function(){
    // Set up so we handle click on the buttons
    $('#postToWall').click(function() {
      FB.ui(
        {
          method : 'feed',
          link   : $(this).attr('data-url')
        },
        function (response) {
          // If response is null the user canceled the dialog
          if (response != null) {
            logResponse(response);
          }
        }
      );
    });

    $('#sendToFriends').click(function() {
      FB.ui(
        {
          method : 'send',
          link   : $(this).attr('data-url')
        },
        function (response) {
          // If response is null the user canceled the dialog
          if (response != null) {
            logResponse(response);
          }
        }
      );
    });

    $('#sendRequest').click(function() {
      FB.ui(
        {
          method  : 'apprequests',
          message : $(this).attr('data-message')
        },
        function (response) {
          // If response is null the user canceled the dialog
          if (response != null) {
            logResponse(response);
          }
        }
      );
    });
  });
</script>

Body Tag:

<body>
<div id="fb-root"></div>
<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxxxxxxxxxx', // App ID
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true // parse XFBML
    });

    // Listen to the auth.login which will be called when the user logs in
    // using the Login button
    FB.Event.subscribe('auth.login', function(response) {
      // We want to reload the page now so PHP can read the cookie that the
      // Javascript SDK sat. But we don't want to use
      // window.location.reload() because if this is in a canvas there was a
      // post made to this page and a reload will trigger a message to the
      // user asking if they want to send data again.
      window.location = window.location;
    });

    FB.Canvas.setAutoGrow();
  };

  // Load the SDK Asynchronously
  (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";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

<header class="clearfix">
  <?php if (isset($basic)) { ?>
  <p id="picture" style="background-image: url(https://graph.facebook.com/<?php echo he($user_id); ?>/picture?type=normal)"></p>

  <div>
    <h1>Welcome, <strong><?php echo he(idx($basic, 'name')); ?></strong></h1>
    <p class="tagline">
      This is your app
      <a href="<?php echo he(idx($app_info, 'link'));?>" target="_top"><?php echo he($app_name); ?></a>
    </p>

    <div id="share-app">
      <p>Share your app:</p>
      <ul>
        <li>
          <a href="#" class="facebook-button" id="postToWall" data-url="<?php echo AppInfo::getUrl(); ?>">
            <span class="plus">Post to Wall</span>
          </a>
        </li>
        <li>
          <a href="#" class="facebook-button speech-bubble" id="sendToFriends" data-url="<?php echo AppInfo::getUrl(); ?>">
            <span class="speech-bubble">Send Message</span>
          </a>
        </li>
        <li>
          <a href="#" class="facebook-button apprequests" id="sendRequest" data-message="Test this awesome app">
            <span class="apprequests">Send Requests</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <?php } else { ?>
  <div>
    <h1>Welcome</h1>
    <div class="fb-login-button" data-scope="user_likes,user_photos"></div>
  </div>
  <?php } ?>
</header>

Upvotes: 1

Cal McLean
Cal McLean

Reputation: 1438

From the Facebook Mobile Web Tutorial:

function sendRequest() {
  FB.ui({
    method: 'apprequests',
    message: 'invites you to learn how to make your mobile web app social',
  }, 
  function(response) {
    console.log('sendRequest response: ', response);
  });
}

For more details, see the Request Dialog documentation.

Upvotes: 0

Related Questions