73

http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.google.com

How can I customize the text and image. It looks like Facebook pulled the docs.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
A F
  • 7,424
  • 8
  • 40
  • 52
  • 4
    Facebook has recently disallowed customizing its sharer. You'll have to rely on Open Graph tags from now on – A F May 26 '14 at 16:55

5 Answers5

79

What you are talking about is the preview image and text that Facebook extracts when you share a link. Facebook uses the Open Graph Protocol to get this data.

Essentially, all you'll have to do is place these og:meta tags on the URL that you want to share - 

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
      content="A group of U.S. Marines, under command of
               a renegade general, take over Alcatraz and
               threaten San Francisco Bay with biological
               weapons."/>

As you can see there are both an image property and a description. When you make changes to your pages og:meta tags, you can test these changes using the Facebook Debugger. It will tell you if you have made any mistakes (and how to fix them!)

Digital Brent
  • 1,275
  • 7
  • 19
  • 47
Lix
  • 47,311
  • 12
  • 103
  • 131
  • 8
    I do not think that this is the answer ... because these tags are hardcoded into the html, and thus force any/all fb buttons on the entire page to obey these values ... maybe I have 3 fb share buttons on one page, and I want each one to have a customized image/description. ... True, you could use js to change the meta values before the share action, but that does not seem to actually work, and dynamically changing meta tags seems like bad practice (as that is not there purpose). ... I would use the Lee Sibbald sharer.php solution instead. – dsdsdsdsd Apr 02 '13 at 09:21
  • 1
    however, with that being said, I do use these meta tags on each page, in case a user just copy/pastes my page's url into there fb post, then these metas do the trick ... but not for individual fb buttons ("share this painting" or "share this joke") – dsdsdsdsd Apr 02 '13 at 09:24
  • 3
    Regarding dynamic OG tag generation - I've done this on several occasions using PHP, whereby the OG tags are dynamically populated depending upon QueryString parameters. It works as long as the parameters are in some way unique to each Button (so, for example, adding "?id=123" to the end of each Button URL and changing "123" to be unique). Having had discussions with people at Facebook this was not flagged as bad practice and so I believe it's perfectly fine to work this way. Note however that JS can not be used for this as the FB scraper does not have a JS engine. – Snouto Apr 19 '13 at 10:02
  • 2
    @dsdsdsdsd - even if you are sharing off of a giant content page, each piece of content needs it's own perma-link, right? /That/ is where you put the custom OG tags. – Trass Vasston Aug 25 '13 at 02:01
  • With all the discussion been done.how do you solve the problem of Facebook caching our site.i have been searching about this for over 2 days. links are being generated correctly but the thumbnail and text are not from the post instead from cached data of previous post from my site . Can somebody comment on this.Thanks –  Jul 06 '17 at 07:25
  • Hi @Nomi - It's been a while since I've used these tools, but what I used to do in the past was run the URL through the [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/), this cleared Facebook's cache of the link and re-fetched the meta data. Hope this helps! – Lix Jul 06 '17 at 07:28
  • Thanks. i have already done this .but for a large sized website with a lot of articles we can't just go to debugger every time.can we? –  Jul 06 '17 at 07:46
  • @Nomi - there is a batch debugger tool too at the URL I posted. I believe there is also a [way to do this programatically](https://developers.facebook.com/docs/sharing/opengraph/using-objects#update). Ideally though, you would have a unique URL for each link you want to share - this way Facebook wouldn't use old cache for new URLS. – Lix Jul 06 '17 at 08:16
58

UPDATE:

This answer is outdated.

Like @jack-marchetti stated in his comment, and @devantoine with the link: https://developers.facebook.com/x/bugs/357750474364812/

Facebook has changed how the sharer.php works, as Ibrahim Faour replies to the bug filed with Facebook.

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.

Try this (via Javascript in this example):

'http://www.facebook.com/sharer.php?s=100&p[title]='+encodeURIComponent('this is a title') + '&p[summary]=' + encodeURIComponent('description here') + '&p[url]=' + encodeURIComponent('http://www.nufc.com') + '&p[images][0]=' + encodeURIComponent('http://www.somedomain.com/image.jpg')

I tried this quickly without the image part and the sharer.php window appears pre-populated, so it looks like a solution.

I found this via this SO article:

Want custom title / image / description in facebook share link from a flash app

and this link contained in an answer from Lelis718:

http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-for-your-iframe-tab/

so all credit to Lelis718 for this answer.

[EDIT 3rd May 2013] - seems like the original URL i had here no longer works for me without also including "s=100" in the query string - no idea why but have updated accordingly

Community
  • 1
  • 1
Snouto
  • 1,039
  • 1
  • 7
  • 21
  • 1
    Hey @lee-sibbald Looks like Facebook changed it around and I can't get an image to show up in that dialog anymore. Interesting... – Julian H. Lam May 10 '13 at 16:34
  • 1
    @JulianH.Lam have you took notice of the edit I added a few days ago? I'm using the link shown above including "s=100" and it appears to be working fine – Snouto May 10 '13 at 18:30
  • Hi @LeeSibbald I did, actually, but it still is not working. I ended up redoing the dialog by using the newer "Feed Dialog" window, which isn't perfect either. Thanks anyway! – Julian H. Lam May 12 '13 at 13:31
  • @JulianH.Lam Hmm strange, although it could be a typical partial FB rollout of new functionality. The only other option I can think if is to use: http://www.facebook.com/sharer.php?u=http://www.nufc.com but note this relies on you having valid OG Meta Tags at the URL you define, to specify the story description, image etc. – Snouto May 12 '13 at 13:46
  • Yup, exactly -- because the client wanted complete control over what asset+title+description gets sent, I needed a solution where I could dictate exactly what I needed sent. Could be a partial FB rollout - that seems to happen to me more often than not... – Julian H. Lam May 12 '13 at 13:52
  • @JulianH.Lam You can still create such a scenario of control using the u= parameter, all you need to do is make sure the url you use has querystring params that dictate what content is shown in the meta tags when FB goes crawling for the data. It's not as clean cut though. No doubt the same problem you have is rapidly heading my way :/ – Snouto May 12 '13 at 17:04
  • 4
    The p[x] params don't appear to work anymore, at least if you have working opengraph tags on the page in question. – Mike Shultz May 14 '13 at 20:09
  • 2
    The sharer no longer accepts custom parameters: https://developers.facebook.com/x/bugs/357750474364812/ – DevAntoine Sep 30 '15 at 09:35
22

It appears the following answer no longer works, and Facebook no longer accepts parameters on the Feed Dialog links

You can use the Feed Dialog via URL to emulate the behavior of Sharer.php, but it's a little more complicated. You need a Facebook App setup with the Base URL of the URL you plan to share configured. Then you can do the following:

1) Create a link like:

   http://www.facebook.com/dialog/feed?app_id=[FACEBOOK_APP_ID]' +
        '&link=[FULLY_QUALIFIED_LINK_TO_SHARE_CONTENT]' +
        '&picture=[LINK_TO_IMAGE]' +
        '&name=' + encodeURIComponent('[CONTENT_TITLE]') +
        '&caption=' + encodeURIComponent('[CONTENT_CAPTION]) +
        '&description=' + encodeURIComponent('[CONTENT_DESCRIPTION]') +
        '&redirect_uri=' + FBVars.baseURL + '[URL_TO_REDIRECT_TO_AFTER_SHARE]' +
        '&display=popup';

(obviously replace the [CONTENT] with the appropriate content. Documentation here: https://developers.facebook.com/docs/reference/dialogs/feed)

2) Open that link in a popup window with JavaScript on click of the share link

3) I like to create file (i.e. popupclose.html) to redirect users back to when they finish sharing, this file will contain <script>window.close();</script> to close the popup window

The only downside of using the Feed Dialog (besides setup) is that, if you manage Pages as well, you don't have the ability to choose to share via a Page, only a regular user account can share. And it can give you some really cryptic error messages, most of them are related to the setup of your Facebook app or problems with either the content or URL you are sharing.

LocalPCGuy
  • 6,006
  • 2
  • 32
  • 28
  • 2
    Gold! After trying the incredibly unreliable and connection-error prone JSDK version this is so much more reliable and stable. Thanks a lot! – Rid Iculous Jul 02 '14 at 04:50
  • 1
    dialog feed support for custom parameters ends today (july 17, 2017) – mehulmpt Jul 17 '17 at 07:34
  • @LocalPCGuy parameters are not working although the link is working but image description and the title is not working please guide me – Sanaullah Oct 29 '19 at 08:24
  • /u/Sanaullah this no longer works, Faceboook removed this functionality. See the note in bold at the top of the answer. – LocalPCGuy Oct 29 '19 at 15:24
15

Sharer.php no longer allows you to customize. The page you share will be scraped for OG Tags and that data will be shared.

To properly customize, use FB.UI which comes with the JS-SDK.

Jack Marchetti
  • 15,536
  • 14
  • 81
  • 117
  • Or via [Share dialog](https://developers.facebook.com/docs/sharing/reference/feed-dialog#redirect), which can be just a link just like sharer.php (although the links will be linked to a Facebook app, which might not be preferrable) – fregante Apr 20 '14 at 02:43
5

Facebook sharer.php parameters for sharing posts.

<a href="javascript: void(0);"
   data-layout="button"
   onclick="window.open('https://www.facebook.com/sharer.php?u=MyPageUrl&summary=MySummary&title=MyTitle&description=MyDescription&picture=MyYmageUrl', 'ventanacompartir', 'toolbar=0, status=0, width=650, height=450');"> Share </a>

Don't use spaces, use &nbsp.

yusufshakeel
  • 439
  • 3
  • 11
  • 22
Weider Lima
  • 51
  • 1
  • 3