Facebook sharing: going from 'feed' to 'share_open_graph'

Question

I'm messing around with an Angular app, let's say for the sake of argument that I'm not using any meta tags, how can I use the Share Dialog to let users share pages of my app?

Using the old Feed Dialog works, but it has been deprecated:

$scope.share = function() {
        FB.ui({
                method: 'feed',
                name: 'This is the name field',
                link: 'The link',
                picture: 'The picture',
                caption: 'The caption',
                description: 'This is the content of the "description" field, below the caption.'
                })
            },
            function(response) {
                if (response && !response.error_code) {
                    console.log('Posting completed.');
                } else {
                    console.log('Error while posting.');
                }
            });
    };

So even though this works, I want to use the Share Diolog in the same way but I'm not figuring it out. This is sort of what I've been trying, keep in mind that I'm a newbie:

$scope.share = function() {
        FB.ui({
                method: 'share_open_graph',
                action_type: 'og.likes',
                action_properties: JSON.stringify({
                    object: {
                        'title': 'The title',
                        'image': 'An image',
                        'url': $scope.shareUrl,
                        'description': 'This is the description',
                    }
                })
            },
            function(response) {
                if (response && !response.error_code) {
                    console.log('Posting completed.');
                } else {
                    console.log('Error while posting.');
                }
            });
    };

Any hints?

Answer 1

The short answer is that you can't, you must use OpenGraph meta tags.

Since Facebook doesn't understand JavaScript and thus Angular, you must detect Facebook's crawlers server-side and render a static page for them instead of the Angular app.

While the precise implementation will vary depending on your server technologies, here's the general idea:

1. Setup a route for the resources that need sharing: http://example.com/resources/:id
2. Look for the user-agent
3. If it's one of Facebook's crawlers, fetch the resource and render a simple view with OpenGraph tags and an empty body. Otherwise, simply render the Angular app.

Facebook's crawlers are available here and they currently are:

• facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
• facebookexternalhit/1.1
• Facebot