Add custom name, caption, image, description to new facebook share dialog or custom stories not taking them from og meta

Question

I'm just working on a quiz script. Thus I want to share the results of an quiz and not the og meta data.

I know it is possible to use the old FB.ui feed action do add a custom name, caption, description and message than sharing an url. E.g.:

    FB.ui({
    method: 'feed',
    href: url,
    name: name,
    caption: title,
    description: des,
    message: message,
    picture: img,
}, function(response){});

However I think this gonna be deprecated soon?!

Is this possible with the new share api too? Or can I do this with custom stories? How? I'm looking for something like

    FB.ui({
    method: 'share',
    href: url,
    name: name,
    caption: title,
    description: des,
    message: message,
    picture: img,
}, function(response){});

But this isn't working :/ it only takes the href. Everything else is ignored and not prefilled :(

Is there any best practise or a facebook recommended way to do this?

API docs: https://developers.facebook.com/docs/sharing/reference/share-dialog

Thx. I really appreciate your help

Excellent question. I am still struggling with this. (Side note: even the feed API is not working well for me now, but that's probably my bad.) — dimitarvp, Oct 30 '14 at 11:45
Manuel can you put in feed instead of share and see what happens and report back? — Pavan Katepalli, Mar 02 '15 at 00:14

DamirR · Answer 1 · 2019-08-10T19:33:22.293

10

Update on 2019. This method is not working any more. New solution has not been find yet. :(

Update on 27.06.2018. Old version of the code stopped working properly. The shared image was displayed as small image on the left, instead of as large full column image. The fix is to replace action_type: 'og.shares' with action_type: 'og.likes'.

Use this code:

    FB.ui({
    method: 'share_open_graph',
    action_type: 'og.likes',
    action_properties: JSON.stringify({
        object: {
            'og:url': url,
            'og:title': title,
            'og:description': des,
            'og:image': img
        }
    })
},
function (response) {
// Action after response
});

This works with API version 2.9+. Please note that using og.shares action_type, is not advised any more since it is not mentioned in the FB documentation and it doesn't properly display the large image. I now use og.likes. The small downside is the sentence like "John Doe likes the object on drib" near the top of share dialog and shared content on user wall.

For full working example checkout Dynamically change Facebook open graph meta data with JavaScript.

edited Aug 10 '19 at 19:33

answered Aug 21 '17 at 21:45

DamirR

1,696
1
14
15

Working as expected just one problem, it says "*Deepak Mahakale* shared an object on blog." – Deepak Mahakale Sep 26 '17 at 15:39
@DeepakMahakale thanks for the feedback, unfortunately I didn't figured out how to fix this. I suspect that probably it is not possible for now, but since this feature is not well documented one can't be 100% sure. – DamirR Sep 29 '17 at 09:31
Yes, please do share if you find anything. because I had to go with meta tags due to this *object* thing – Deepak Mahakale Sep 29 '17 at 10:22
Also, do let me know if there is any question asked by somebody. I can start a bounty on it – Deepak Mahakale Sep 29 '17 at 10:23
I'm finding that when I pass both `og:image` and `og:description` the description is not displayed in the share dialogue. When there's no image the description is shown. – And Finally Apr 09 '18 at 15:39
@AndFinally I tested it again - and it shows both image and description. Does this works for you: http://drib.tech/fbsharetest/quiz.html – DamirR Apr 09 '18 at 17:29
@DamirR Now it works! Thanks a lot DamiR, I can use this as the basis for my sharing. – And Finally Apr 10 '18 at 08:31
1

The linked-to site now says _"Update 30.04.2019. This method is not working any more. When and if I discover how to dynamically override og meta data the solution will be posted here."_ – Brandon Aug 07 '19 at 17:16
@Brandon Thank you for the comment - I updated the answer with the warning that solution is not working any more. – DamirR Aug 10 '19 at 19:34

score 5 · Answer 2 · answered Nov 26 '15 at 00:35

5

I have no idea where these parameters are documented for the Share dialog, but I had a guess, and these all work. As a tip, change the 'name' parameter you were using in the Feed method to 'title'. I am custom sharing from multiple share buttons on a single web page. Obviously, replace all the 'custom...' variables with your own variables or 'string':

FB.ui({
        method: 'share',
        href: 'http://yourwebpage.com',
        picture: customImage,
        title: customTitle,
        description: customDescription,
        caption: customCaption

    }, function(response) {});

answered Nov 26 '15 at 00:35

spacewindow

387
1
3
16

1

I found these on the feed dialog: https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.4 – Chris Dec 03 '15 at 09:46
1

Yes, feed dialog parameters are well documented there.. but the question is what the parameters are for the 'share' dialog – which do not seem to be documented for _multiple individual shares_ on a single page as described in the question. My example above works with the Share dialog for individual shares. – spacewindow Dec 05 '15 at 21:21
It's deprecated now https://developers.facebook.com/docs/sharing/reference/feed-dialog#deprecated-params – Deepak Mahakale Sep 26 '17 at 13:51

score 0 · Answer 3 · answered Mar 06 '15 at 19:16

I actually had to make a page for each posible answer and added different og metas to each answer, but you could use some url interpreters like code igniter to generate url's and its content, then just create a function to insert meta tags dynamically. This works similar to a RESP web service api where the url is not actually a location to the server but a call to a function and its parameters.

score 0 · Answer 4 · answered Feb 27 '17 at 20:42

0

Actually this is working for me

            FB.ui({
                method: 'share',
                href: urlHost+link,
                // method: 'feed',
                title: name,
                link: urlHost+link,
                picture: urlHost+"/assets/images/fb.jpg",
                caption: "Interbank",
                description:description

answered Feb 27 '17 at 20:42

Rolly

3,205
3
26
35

3

FYI - As of Graph v2.9 these extra fields for custom picture, caption, and description are deprecated and no longer functional. – Stephen Tetreault May 15 '17 at 13:09
2

If you are using Graph v2.8, it'll work until July 17, 2017 before no longer functioning. – Stephen Tetreault May 15 '17 at 13:09

score -4 · Accepted Answer · answered Jul 01 '14 at 12:26

-4

I think that your href URL should use metadata so that Facebook could get those informations.

From Facebook developers page:

Include open graph meta tags on the page at this URL to customize the story that is shared back to Facebook.

answered Jul 01 '14 at 12:26

lsilvs

104
1
3

3

cannot use open graph meta tags because I want to share an indvidual users results of a quiz. Looking for a solution for fb api 2.0 – Manuel Oct 10 '14 at 13:22
1

I'm not an expert in the FB API, but in my understanding you can still use the meta tags for a dynamic page. I mean, your URL would have the "quiz result id" so that your tags would be loaded dynamically. – lsilvs Oct 27 '14 at 11:51
No url is the same. Quiz is fully on client side on js base – Manuel Oct 27 '14 at 12:04
Have you resolved this issue yet? Facebook is putting me through hell with this, it's ridiculous to deprecate custom sharing options. – sveti petar Nov 21 '14 at 16:14
3

Your answer doesn't answer the question at all. The problem Manuel is describing is exactly the solution you gave. The href url's OG tags are being used for the share and he doesn't want that. I down voted your answer. – Pavan Katepalli Mar 02 '15 at 00:13

Add custom name, caption, image, description to new facebook share dialog or custom stories not taking them from og meta

5 Answers5