Issue

I am trying to implement a "Check-In" button for my website. The main purpose: when the user clicks the button, a Facebook share dialog will be opened and the users will be checked in a custom place. The user post will not be automatically posted and the message will not be set so that it dont violate the Facebook policy. As fas as I know, this can happen with the Facebook Open Graph stories. I have added a "Place" option as an Open Graph Object type. I know that to able to do this my app requires "publish_actions" permission and my app is in the developers mode, so thats not the problem. I use Facebook Javascript SDK. So the code goes like this:

This is the OG markup (given by facebook):

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# place: http://ogp.me/ns/place#">
  <meta property="fb:app_id"                content="my-app-id" /> 
  <meta property="og:type"                  content="place" /> 
  <meta property="og:url"                   content="my-url" /> 
  <meta property="og:title"                 content="my-place-name" /> 
  <meta property="og:image"                 content="sample-url-image" /> 
  <meta property="place:location:latitude"  content="Sample Location: Latitude" /> 
  <meta property="place:location:longitude" content="Sample Location: Longitude" />

and this is the function that invokes the share dialog (also given by facebook):

function share()
{
    FB.api(
      'me/objects/place',
      'post',
      {'object': {
        'og:url': 'my-url',
        'og:title': 'my-place-name',
        'og:type': 'place',
        'og:image': 'sample-url-image',
        'og:description': '',
        'fb:app_id': 'my-app-id',
        'place:location:latitude': 'Sample Location: Latitude',
        'place:location:longitude': 'Sample Location: Longitude'
      }},

     function(response) {
        // handle the response
        // for example (using Jquery)
        $('#element').append('shared');
      }
    );
}

and this is how the function is called:

<span onclick="share()">click to share</span>
<div id="element"></div>

The problem is that the code doesn't work and the share dialog won't open. Where is my mistake?

Solution

Finally I created it just as a share button. With option to check if it's really posted, not canceled after that.

FB.ui({
    method: 'share',
    mobile_iframe: true,
    title: 'My title',
    href: 'url to share',
    picture: 'image URL',
   description: 'The description'
    }, function (response) {
   if (response && !response.error_message) {
    alert('Thank you for sharing!');
    } else {
    alert('You have cancelled the share.');
   }
  });
},{scope: 'email'});

Answered By - webtech

Thursday, January 6, 2022

[FIXED] Facebook Check-In button for my website

Issue

Solution

No comments:

Post a Comment