Creating a Facebook share button with customized url, title and image

Question

Facebook used to allow custom parameters in the Facebook share button, but it is not working now. What I need is to create a Facebook share button which will have a custom title, url, image, description, etc. It cannot be done using meta tags because there are multiple share buttons on a single page. Each should have a different title, urls, images etc. I heard it can be done using the Facebook app - using app id or something.

I tried this but it's not working:

<a title="send to Facebook" 
  href="http://www.facebook.com/sharer.php?s=100&p[title]=YOUR_TITLE&p[summary]=YOUR_SUMMARY&p[url]=YOUR_URL&p[images][0]=YOUR_IMAGE_TO_SHARE_OBJECT"
  target="_blank">

_“It cannot be done using meta tags, because there are a number of share buttons in a single page”_ – so all of them are sharing the _same_ URL? One URL == one Open Graph object. If you want to use different Open Graph objects, use different URLs. If this is not an option (although sharing the same object with multiple images/descriptions does not make much sense – when those posts are _re-shared_ on FB directly, FB will pull the info from the URL anyways), the [Feed dialog](https://developers.facebook.com/docs/sharing/reference/feed-dialog) still allows you to set those parameters at runtime. — CBroe, Apr 05 '14 at 12:37
urls are different. Or is it possible in PHP to goto another page if the visitor is from facebook @CBroe — Gijo Varghese, Apr 05 '14 at 16:07
So if the URLs are different, then why can’t you just provide the individual meta data under each of them? / Facebook appends a certain amount of tracking parameters to links from their news feed, so you could look for these and then redirect if necessary. — CBroe, Apr 05 '14 at 18:49
ooops sorry the urls are the same. I mean the title, description and image will be different. @CBroe — Gijo Varghese, Apr 06 '14 at 01:45

CodeDreamer68 · Accepted Answer · 2015-08-16T15:17:18.440

6

Unfortunately, it appears that we can't post shares for individual topics or articles within a page. It appears Facebook just wants us to share entire pages (based on url only).

There's also their new share dialog, but even though they claim it can do all of what the old sharer.php could do, that doesn't appear to be true.

And here's Facebooks 'best practices' for sharing.

edited Aug 16 '15 at 15:17

answered May 06 '14 at 17:09

CodeDreamer68

420
5
10

3

dead link: http://www.phpscholar.com/tutorials/custom-thumbnail-title-and-description-for-facebook-share-using-open-graph – vida Dec 17 '14 at 04:50

score 5 · Answer 2 · answered Feb 22 '17 at 10:03

This is the code as 2017:

<i class="fa fa-facebook-square"></i>
<a href="#" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href),'facebook-share-dialog','width=626,height=436');return false;">Share on Facebook</a>

Facebook now takes all data from OG metatags.

NOTE: This code assumes you have OG metatags on in site's code.

Source

kittu · Answer 3 · 2017-04-04T10:37:48.577

5

Use facebook feed dialog instead of share dialog.

Example:

https://www.facebook.com/dialog/feed?app_id=1389892087910588 &redirect_uri=https://scotch.io &link=https://scotch.io &picture=http://placekitten.com/500/500 &caption=This%20is%20the%20caption &description=This%20is%20the%20description

edited Apr 04 '17 at 10:37

answered Apr 04 '17 at 09:58

kittu

6,662
21
91
185

@GijoVarghese Remove spaces in the url. Happened to me – kittu Apr 04 '17 at 11:01
@GijoVarghese Also check app id and app domain in facebook developer console – kittu Apr 04 '17 at 11:02
This has been deprecated: https://developers.facebook.com/docs/sharing/reference/feed-dialog. – GabeIsman Aug 09 '17 at 23:05

score 2 · Answer 4 · edited Sep 30 '16 at 07:59

Crude, but it works on our system:

<div class="block-share spread-share p-t-md">
  <a href="http://www.facebook.com/share.php?u=http://www.voteleavetakecontrol.org/our_affiliates&title=Farmers+for+Britain+have+made+the+sensible+decision+to+Vote+Leave.+Be+part+of+a+better+future+for+us+all.+Please+share!" 
     target="_blank">
    <button class="btn btn-social btn-facebook">
      <span class="icon icon-facebook">
      </span> 
      Share on Facebook
    </button>
  </a>

  <a href="https://www.facebook.com/FarmersForBritain" target="_blank">
    <button class="btn btn-social btn-facebook">
      <span class="icon icon-facebook">
      </span>
      Like  on Facebook
    </button>
  </a>
</div>

will there be any error if i use this method in 2018? – Alauddin Ahmed Nov 09 '18 at 10:52 — Alauddin Ahmed, Nov 09 '18 at 10:52

Creating a Facebook share button with customized url, title and image

4 Answers4

Linked