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

Publus

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.) – Dehydrate

Manuel can you put in feed instead of share and see what happens and report back? – Trevino

Any reason why you say its going to be deprecated soon? – Brockington

Answer 1

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.

Croner

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 – Publus

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. – Croner

No url is the same. Quiz is fully on client side on js base – Publus

Have you resolved this issue yet? Facebook is putting me through hell with this, it's ridiculous to deprecate custom sharing options. – Puerperium

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. – Trevino

Answer 2

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.

Dichroic

Working as expected just one problem, it says "Deepak Mahakale shared an object on blog." – Juggernaut

@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. – Dichroic

Yes, please do share if you find anything. because I had to go with meta tags due to this object thing – Juggernaut

Also, do let me know if there is any question asked by somebody. I can start a bounty on it – Juggernaut

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. – Pepillo

@AndFinally I tested it again - and it shows both image and description. Does this works for you: drib.tech/fbsharetest/quiz.html – Dichroic

@Dichroic Now it works! Thanks a lot DamiR, I can use this as the basis for my sharing. – Pepillo

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." – Ridiculous

@Ridiculous Thank you for the comment - I updated the answer with the warning that solution is not working any more. – Dichroic

Answer 3

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) {});

Apron

I found these on the feed dialog: developers.facebook.com/docs/sharing/reference/feed-dialog/v2.4 – Brockington

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. – Apron

It's deprecated now developers.facebook.com/docs/sharing/reference/… – Juggernaut

Answer 4

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.

Spall

Answer 5

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  

Bidle

FYI - As of Graph v2.9 these extra fields for custom picture, caption, and description are deprecated and no longer functional. – Mesothorium

If you are using Graph v2.8, it'll work until July 17, 2017 before no longer functioning. – Mesothorium