Facebook Sharer - Title and summary Customization

Question

I'm working in a project with Django and I'm trying to share pages in facebook and twitter

I have problems on facebook, I want to customize the Title and summary shared, to change the text when you share an Index Page and any other page.

I tried using:

<a href='http://www.facebook.com/sharer.php?s=100&
p[title]=TITLE+TEST&
p[summary]=summary&
p[url]=http://{{ request.META.HTTP_HOST }}{{ request.path }}&
p[images][0]=http://whatever.com/media/img/img_facebook.jpg' 
target="_blank">
<img src="{{STATIC_URL}}img/ico_facebook_small.png" title="Facebook" alt="Facebook" ></a>

and even adding:

<meta property="og:title" content="My Title" />

The only 2 things I can change is the url showed and the image. Facebook sharer ignores title and summary. I search trough internet the last hour and I didn't find any solution that works for me.

Anyone knows if the facebook sharer isn't working anymore ? is there any solution to custom title and summary ?

Thanks

---

EDIT

Now I'm using og meta tags, but still have a problem. I want that each page has different titles, and I need to get the title via Javascript (I change the "og:title" content via js) but it seems the change take effect too late, because Facebook only get the part of the title that is static.

I have something like:

<meta property="og:title" content="TitlePage" /> 

and change the content via js to make like

<meta property="og:title" content="TitlePage SOMETHINGELSE" /> 

The change takes effect nice and without problems but like I said, facebook doesn't detect that change.

---

EDIT 2

I've answered my own question because I've found a solution to do the sharing in the old way, but an app is needed to make the code works.

Humidistat

Is there some reason why you cant set the OG metas directly on page render? – Lutz

also, do you have a live/open page i can look at? – Lutz

Answer 1

Facebook Sharer without Open Graph meta tags

I change correct answer after this long because in a new project, I had to do the same in the old way, and I finally get this code to works fine by creating a simple app in facebook:

Info for this sample apps: Facebook Send Dialog

APP_ID: Facebook app Identifier
http://www.THEPAGE.com: This would be my domain

$('#share_button').bind('click', function(e){
        e.preventDefault();
        var title = 'Title I want';
        var im_url = 'url_to_image';
        var facebook_appID = 'YourFacebookAppID'
        url = "https://www.facebook.com/dialog/feed?app_id="+ facebook_appID +    "&link=" + encodeURIComponent("http://www.THEPAGE.com")+ 
                    "&name=" + encodeURIComponent(title) + 
                    "&caption=" + encodeURIComponent('Shared from MY_PAGE') + 
                    "&description=" + encodeURIComponent('DESCRIPTION') + 
                    "&picture=" + encodeURIComponent("http://www.THEPAGE.com" +im_url) +
                    "&redirect_uri=https://www.facebook.com";
        window.open(url);
    });

Facebook app is needed to do this

To create your facebook app you need to register as developer and create the app visiting the next link:

Facebook Developer APPS

Humidistat

you are the best man!!! this way i don't have to work with that stupid sdk, just show a webview with this url, and done! THANKS!!! – Pershing

I felt same way as you ! The only thing here is that you need to create an APP in facebook, but it's easy to manage in your web app – Humidistat

After reading the link you passed, it is one of the easiest way to share with Facebook ! Create the app is less than 5 minutes, Thanks !! – Besmear

Are you kidding? It took too long to register the app. All I want is to add a description to my sharer URL and we are forced to create an app. Utterly crazy. Twitter have the right idea. Goodbye Facebook – Sort

Answer 2

Set your page up with proper Open Graph meta tags.

This should work with facebooks share scripts. This will also show correct title, image and description of your pages when people post direkt links on facebook without using share buttons.

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail" />

I recommend you check out the facebook documentation https://developers.facebook.com/docs/web/webmasters/ https://developers.facebook.com/docs/plugins/share-button

Dareece

You're saying same things as the guy before, I tried using the Open Graph meta tags, and they're not working. I've checked that sites, and nothing works for me. – Humidistat

Do you have a live page i can look at? – Lutz

It's still in development, the project is inside a VM on my PC, until the last phase of the project, it's not uploaded to a server – Humidistat

Ok, that is probably part of the problem. To read the Meta tags facebook needs to be able to open your page to read them. – Lutz

I would suggest that you open a (temporary) live test page. and use facebook debugger to see that everything looks ok. https://developers.facebook.com/tools/debug – Lutz

So there is no way to do it via javascript ? with p[title] and p[summary] ? Anyway I'll try the og meta tag in a live test page. Thanks for your help! – Humidistat

Javascript: Yes, but you need to use Graph API and have an AppId. These functions seems deprecated in sharer.php as indicated by the blogpost vcarel posted blog.myphpsite.co.uk/?p=186 – Lutz

I moved the page to production, and now it's accesible through internet, still og tags not working, facebook pick the pictures and title he want, and no description – Humidistat

Facebook caches this information. Use their developer tools to verify what they actually sees developers.facebook.com/tools/debug – Lutz

I'm using that tool, but still have the javscript issue – Humidistat

Why does Facebook use invalid HTML? It is supposed to be <meta name=, not <meta property=. w3.org/wiki/HTML/Elements/meta – Intermediary

Answer 3

I agree with other answers, use the OpenGraph Protocol

1. However, if it doesn't work make sure your URL is publicly visible.
2. If it still doesn't work and you are absolutely sure your meta tags are correct that means Facebook cached your page.
3. To remove Facebook cache go to the Facebook Object Debugger page and paste your link. By doing this Facebook will force its cache to be refreshed and show you values of your meta tags. That should fix your problem.

Westlund

Suggestion about caching is really helpful. I would surely recommend if you are doing everything correct and still wondering why og tags are not working... Big time saver. Thanks a lot. – Adalie

I was stuck with the cache! Folks make note of this very important tip by @DhrumilBhankhar – Robertroberta

Answer 4

Well, I am in the similar situation with you... The sharer.php with customized title and description was working up to a few days ago, and since then, only the OG metada are showing up, when they exist !

If you can, I suggest you to use the official version of the sharer URL, which now only accepts the shared URL in the query string, e.g.: https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com

See https://developers.facebook.com/docs/plugins/share-button/#faqdialog

Then you'll have to set up the Open Graph metadata on your page.

You can check how Facebook process your page with their debug page : https://developers.facebook.com/tools/debug/

edit :

Custom parameters in the sharer.php URL are officially not supported anymore : https://developers.facebook.com/bugs/357750474364812

Ibrahim Faour - Developer Support Engineer at Facebook

We have changed the behavior of the sharer plugin to be consistent with other plugins and features on our platform.

The sharer will no longer accept custom parameters and facebook will pull the information that is being displayed in the preview the same way that it would appear on facebook as a post from the url OG meta tags.

Einsteinium

BTW, does anyone know more about the situation ? is the sharer.php?s=100 url still going to be supported ??? – Einsteinium

Apparently FB justed changed the way it works : blog.myphpsite.co.uk/?p=186 – Einsteinium

I tried almost everything, I've visited before the pages that you've suggest and I found nothing. I work as web developer, and it's very important to show title and summary when you share a page, and each page has a different title and summary... thanks for your try anyway – Humidistat

I make that "proper" research, I search during some hours, you can check my profile, I'm not used to make questions, what I can assure is that I check several sites, and tried several ways, even with the og meta tags, title and summary are ignored. Thanks for such constructive comment and that sarcastic speaking way, very useful – Humidistat

No worry, I'm a web developper too, but new to FB and G+ meta data. FYI, I made my share at the end with the feed dialog : developers.facebook.com/docs/reference/dialogs/feed You can get nearly the same result as with the sharer.php.. without any OpenGraph tag ! but the drawback is that you need an appId – Einsteinium

Answer 5

The easiest way to solve this is to use the feed dialog: https://developers.facebook.com/docs/sharing/reference/feed-dialog

I have posted this in another question too because I wasted hours today trying to figure this out. Hopefully it will solve someone's time. You need APP Id.

Adhesive