How to Pass a Parameter Like Title, Summary and Image in a Facebook Sharer Url

How to pass a parameter like title, summary and image in a Facebook sharer URL

Looks like Facebook disabled passing parameters to the sharer.

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.

Here's the URL to the post: https://developers.facebook.com/x/bugs/357750474364812/

how to pass custom parameter in facebook sharer link

Instead of using the sharer.php script on Facebook, you can use the Facebook JavaScript SDK to make a custom share dialog.

<!-- include Facebook JavaScript SDK -->

<!-- share link -->
<a href="#" class="share-btn">Share to Facebook</a>

<script type="text/javascript">
function fb_share() {
    // facebook share dialog
    FB.ui( {
        method: 'feed',
        name: "Your Page Title",
        link: "https://www.webniraj.com/link-to-page/",
        picture: "https://stackexchange.com/users/flair/557969.png",
        caption: "Some description here"
    }, function( response ) {
        // do nothing
    } );

}

// add click event to link using jQuery
$(document).ready(function(){
  $('.share-btn').on( 'click', fb_share );
});
</script>

This will create a nice popup for sharing to Facebook, and you can easily change the title, description, and picture attributes in the JavaScript. Working demo available here.

Passing title, url and image on share.php of facebook

According to the facebook developers (bug):

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.

1. Either you use the Share Button - requires Javascript SDK

2. Or, use the latest Share Dialog - requires just an app id. It has a direct url direction method for invoking the share dialog:

   https://www.facebook.com/dialog/share?
     app_id={app-id}
     &display=popup
     &href={link-to-share}
     &redirect_uri={redirect-uri}
   

How to pass custom parameters to Facebook share link

This no longer works as of 18/12/2013. See comments for alternatives.

http://www.facebook.com/sharer.php?s=100&p[title]=titleheresexily&p[url]=http://www.mysexyurl.com&p[summary]=mysexysummaryhere&p[images][0]=http://www.urltoyoursexyimage.com

http://blog.cjgammon.com/?p=336

I was tired of scouring sites on google for this.

Facebook Sharer - Title and summary Customization

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

How does Facebook Sharer select Images and other metadata when sharing my URL?

How do I tell Facebook which image to use when my page gets shared?

Facebook has a set of open-graph meta tags that it looks at to decide which image to show.

The keys one for the Facebook image are:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

and it should be present inside the <head></head> tag at the top of your page.

If these tags are not present, it will look for their older method of specifying an image: <link rel="image_src" href="/myimage.jpg"/>. If neither are present, Facebook will look at the content of your page and choose images from your page that meet its share image criteria: Image must be at least 200px by 200px, have a maximum aspect ratio of 3:1, and in PNG, JPEG or GIF format.

Can I specify multiple images to allow the user to select an image?

Yes, you just need to add multiple image meta tags in the order you want them to appear in. The user will then be presented with an image selector dialog:

I specified the appropriate image meta tags. Why isn't Facebook accepting the changes?

Once a url has been shared, Facebook's crawler, which has a user agent of facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), will access your page and cache the meta information. To force Facebook servers to clear the cache, use the Facebook Url Debugger / Linter Tool that they launched in June 2010 to refresh the cache and troubleshoot any meta tag issues on your page.

Also, the images on the page must be publicly accessible to the Facebook crawler. You should specify absolute url's like http://example.com/yourimage.jpg instead of just /yourimage.jpg.

Can I update these meta tags with client side code like Javascript or jQuery?
No. Much like search engine crawlers, the Facebook scraper does not execute scripts so whatever meta tags are present when the page is downloaded are the meta tags that are used for image selection.

Adding these tags causes my page to no longer validate. How can I fix this?

You can add the necessary Facebook namespaces to your tag and your page should then pass validation:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">  

Has Facebook sharer.php changed to no longer accept detailed parameters?

Facebook no longer supports custom parameters in sharer.php

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.

Use dialog/feeds instead of sharer.php

https://www.facebook.com/dialog/feed?
  app_id=145634995501895
  &display=popup&caption=An%20example%20caption 
  &link=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fdialogs%2F
  &redirect_uri=https://developers.facebook.com/tools/explorer

Official answer from fb team

Sharer link with parameter in URL

You should URL encode the parameters.

var facebook_url = 'http://www.facebook.com/sharer.php?'+
  'u='+encodeURIComponent('http://google.com/?q=bla')+
  '&t='+encodeURIComponent('Some Page Title');

---

Related Topics