I am using JS SDK for the send dialog:
FB.ui({
app_id: appId,
method: 'send',
link: window.location.protocol+'//'+server+'/xxxxx',
name: 'name',
description: 'description',
to: '1111111111'
});
The 'name' and 'description' parameters are ignored.
I understood that using metadata tags is the solution.
What tags should I use for the name and description?
The metadata tags are called Open Graph tags. There are many of types data that can be included in these headers, if you are curious then read up about the options here and here.
To specify just the name and the description, you should use the og:title and og:description tags in the HTML of the URL being sent, like this:
<meta property="og:title" content="The Name Goes Here" />
<meta property="og:description" content="Some text about this link goes here" />
One thing to remember is that Facebook caches this data quite aggressively - so you might find yourself wondering why when you've changed the tag, the text in the send dialog is not changing. If this happens, paste the URL into Facebook's Object Debugger - https://developers.facebook.com/tools/debug and it should clear their cached version.
Related
This has been working fine for over a week.
FB.ui({
method: 'send',
to: connectionid,
name: subject,
picture: staticurl + 'images/logoformysite.png',
link: homeurl + '/' + username + '/something=' + var1 +'&somethingelse=' + encodeURI(var2) + '&evenmore=' + encodeURI(var3),
description: invitemessage,
});
I had initially had an error last week where if the URL was within the Facebook domain, Facebook would block it. I fixed that and now both the picture and the link do not belong to the Facebook domain and come from my site. But this started happening today with nothing changed. It is intermittent.
An error occurred. Please try again later.
API Error Code: 100 API Error Description: Invalid parameter Error Message: 'link' is invalid.
It is not clear why it works sometimes and not other times even if I am sending it to the same user. Wondering if I missed an announcement. But I would hope that it would at least fail consistently but that is not the case.
UPDATE:
I am not sure how the link I am setting in the dialog can be set globally on the page. It will send the recipients of the message the wrong link. It would be really helpful to see an example of how the above would work in the new open graph world.
ANSWER AUG 12 2013
The issue revolved around our url being dynamic and needing force caching each time. I now make an ajax call to "https://developers.facebook.com/tools/debug/og/object" to refresh it and then launch the send dialog.
I had the same issue and that stopped working since last week.
Here is my solution:
Go to Facebook debugger and add your URL.
Click on "Debug" and fix all warnings displayed by Facebook.
To fix mine I had to add the og.url meta tag in my page. The value should be exactly the same as the one you want to share (no redirection).
Then Facebook sent me this notification (alert):
Your app, XXX, is now compliant with the Stream post URL
security migration. No further action is required.
Try to share your link with FB.ui once again and now your post should automatically display your og values.
Note:
Facebook October breaking change will automatically use those og metas instead of custom FB.ui parameters, therefore you can now activate the breaking change to get ready and remove name/picture/description from your code.
UPDATE:
This problem can happens again even if what I mentioned above is correctly implemented.
If it is your case that's because you have to enforce Facebook to "scrape" your page. This process is automatically done by Facebook when you use the Facebook object debugger or you copy/paste your link on your timeline / private messages. If you use the JavaScript SDK you have to ask Facebook to index and cache your page.
You won't find this in the Facebook documentation related to the JavaScript SDK (or you are lucky) so to save you all the days I lost to find this unbelievable issue (remember Facebook only said your link is invalid) you can find more details on this page.
I tried to use the Graph API to enforce my newly created page to be scraped by Facebook, if it works for you you are lucky. The second method which is not mentionned but produced the same result is to send a request to the Facebook Object Debugger page and add your page link in the URL (e.g. https://developers.facebook.com/tools/debug/og/object?q=YourPageUrlHere). By doing this Facebook will this time scrape your page and now you can share your links with the Facebook API, everything is now working.
I can confirm that this was fixed for me when I forced Facebook to first scrape the URL before trying to send that same URL via the FB UI Dialog.
Sample code:
FB.api('https://graph.facebook.com/', 'post', {
id: '[URL]',
scrape: true
}, function(response) {
FB.ui({
method: 'send',
name: '[name]',
picture: '[Picture URL]',
link: [URL]',
description: '[description]'
});
});
Make sure that when facebook requests your url, it will never be forwarded.
A way to do this is to present facebook with a special page of its own, containing all the right ingredients.
Here is an example (sort of based on php + symfony 1.4):
<?php
if(preg_match('/facebookexternalhit/i', $request->getHttpHeader('User-Agent')))
{ ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta property="fb:app_id" content="<?php echo sfConfig::get('app_facebook_app_id'); ?>" />
<meta property="og:url" content="<?php echo sfContext::getInstance()->getRequest()->getUri(); ?>" />
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:description" content="<?php echo $description; ?>" />
<meta property="og:image" content="<?php echo $image; ?>" />
</head>
<body>
hello Facebook!
</body>
</html>
<?php
}
?>
We have a like button. We populate the data-href with something like: http://foo.com/stuff/1?tracking=member1
When facebook scrapes our page for the title and images defined in the "og" meta tags, it disregards the original request parameters from the data-href. This means we can't customize the title and image based on the referring member, but this is exactly what we need to do.
We have tried all sorts of combinations of values for the data-href and og:url fields to no avail. Does anyone have any ideas?
within the head tags:
<meta content="This title should be based on the referring member" property="og:title"></meta>
<meta content="Content would go here" property="og:description"></meta>
<meta content="http://foo.com/stuff/1" property="og:url"></meta>
<meta content="http://foo.com/images/hello.png" property="og:image"></meta>
<meta content="Foolandia" property="og:site_name"></meta>
and then our like button tag:
<fb:like data-action="like" data-href="http://foo.com/stuff/1" data-ref="member1" data-send="false" data-show-faces="false" />
So, after several permutations and combinations, this is how we were able to address this issue:
We added the member id to the data-href (http://foo.com/stuff/1?tracking=member1) and removed the og:url from our meta-tags. Facebook now scrapes our page with the url: http://foo.com/stuff/1?tracking=member1 and we're able to customize the title and image displayed on facebook based on the referring member.
Thanks for all the help!
Are you sure the value for og:url tag your URL is returning to the Facebook crawler is the same one in the data-href? facebook will, if it finds a canonical meta tag or og:url tag on the scraped page, discard the metadata and retrieve metadata from the canonical URL instead.
You can test what facebook detects for a URL with Facebook's Debug Tool
Where can I find full docs for using http://www.facebook.com/sharer.php ? I want to know all aviable params to this url for sharing something.
P.S. http://developers.facebook.com/docs/reference/plugins/like/ gave me no info.
There's no documentation because the new way for sharing is the Like button. But you can add do http://www.facebook.com/sharer.php?u=yourURL.
To specify the image and the description, you have to add the following meta data in the header of your website.
Image
<meta property="og:image" content="URL of your image" />
Description
<meta name="description" content="Your description" />
Facebook will use the meta og:image to find the image and the meta description for the description.
Cheers
The official docs for the sharer are pretty sparse and virtually non-existent. You used to be able to send a whole host of params to the Facebook sharer.php
Facebook have since made an update (feb/mar 2014) and it now looks at the OpenGraph tags above anything else. See response from FB developer
They now recommend using the Feed Dialog method of sharing.
I'm trying to create a link that will share a page on Facebook. So far I've got:
href="http://www.facebook.com/sharer.php
?u=http%3A%2F%2Fwww.cnn.com%2F
&t=CNN%26s+website"
However, I'd really like to add some text that will go in the 'What's on your mind?' text box (especially as the t value gets overridden by the link's title). Does anyone know if this is possible?
Simplest way to share on facebook is:
https://www.facebook.com/sharer/sharer.php?u=xerosanyam.github.io"e=You_are_amazing
Bonus:
Simplest way to share on twitter is:
https://twitter.com/intent/tweet?via=xerosanyam&text=You_are_amazing
NOTE: #azure_ardee solution is no longer feasible. Facebook will not allow developers pre-fill messages. Developers may customize the story by providing OG meta tags, but it's up to the user to fill the message.
This is only possible if you are posting on the user's behalf, which requires the user authorizing your application with the publish_actions permission. AND even then:
please note that Facebook recommends using a user-initiated sharing modal.
Have a look at this answer.
You can't do this using sharer.php, but you can do something similar using the Dialog API. http://developers.facebook.com/docs/reference/dialogs/
http://www.facebook.com/dialog/feed?
app_id=123050457758183&
link=http://developers.facebook.com/docs/reference/dialogs/&
picture=http://fbrell.com/f8.jpg&
name=Facebook%20Dialogs&
caption=Reference%20Documentation&
description=Dialogs%20provide%20a%20simple,%20consistent%20interface%20for%20applications%20to%20interact%20with%20users.&
message=Facebook%20Dialogs%20are%20so%20easy!&
redirect_uri=http://www.example.com/response
The catch is you must create a dummy Facebook application just to have an app_id. Note that your Facebook application doesn't have to do ANYTHING at all. Just be sure that it is properly configured, and you should be all set.
November 2021 update
The feed part of the Dialog API no longer includes the message field in the message. It is not included in the feed dialog documentation. The fields picture, name, caption, and description are now deprecated.
Therefore, for the purpose of sharing to the wall, you're better off with sharer.php, which does not require an app_id, and therefore does not need registering an app:
http://www.facebook.com/sharer.php?u=https://example.com
Like #Ardee said you sharer.php uses data from the meta tags, the Dialog API accepts parameters. Facebook have removed the ability to use the message parameter but you can use the quote parameter which can be useful in a lot of cases e.g.
https://www.facebook.com/dialog/share?
app_id=[your-app-id]
&display=popup
&title=This+is+the+title+parameter
&description=This+is+the+description+parameter
"e=This+is+the+quote+parameter
&caption=This+is+the+caption+parameter
&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F
&redirect_uri=https%3A%2F%2Fwww.[url-in-your-accepted-list].com
Just have to create an app id:
https://developers.facebook.com/docs/apps/register
Then make sure the redirect url domain is listed in the accepted domains for that app.
To add some text, what I did some time ago , if the link you are sharing its a page you can modify. You can add some meta-tags to the shared page:
<meta name="title" content="The title you want" />
<meta name="description" content="The text you want to insert " />
<link rel="image_src" href="A thumbnail you can show" / >
It's a small hack. Although the old share button has been replaced by the "like"/"recommend" button where you can add a comment if you use the XFBML version. More info her:
http://developers.facebook.com/docs/reference/plugins/like/
Like said in docs, use
<meta property="og:url" content="http://www.your-domain.com/your-page.html" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Website Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="http://www.your-domain.com/path/image.jpg" />
image size recommended: 1 200 x 630
Facebook does not allow you to change the "What's on your mind?" text box, unless of course you're developing an application for use on Facebook.
I don't think this is possible in the Dialog API, which triggers starting a message on Messenger. (Note: this is different from "posting to your wall" in the accepted answer, the difference being /dialog/send instead of /dialog/feed).
For example:
http://www.facebook.com/dialog/send?
app_id=123050457758183&
link=http://developers.facebook.com/docs/reference/dialogs/&
redirect_uri=http://www.example.com/response
See the Facebook documentation. As of November 2021, the documentation does not show the fields picture, name, caption, description: they are populated from the Open Graph tags of the website. I tried adding the field message and it failed to produce any text, but the link still redirects to Messenger.
I am trying to implement share this method. I am using the code as follows
http://www.facebook.com/share.php?u=my_website_url
Now when Facebook is showing it showing some thumbnails at left side. These images are picked from my website. How can I pick a particular image as thumbnail or at least stop it showing thumbnail?
You can check it with my blog address.
From Facebook's spec, use a code like this:
<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />
Source: Facebook Share
This blog post seems to have your answer:
http://blog.capstrat.com/articles/facebook-share-thumbnail-image/
Specifically, use a tag like the following:
<link rel="image_src"
type="image/jpeg"
href="http://www.domain.com/path/icon-facebook.gif" />
The name of the image must be the same as in the example.
Click "Making Sure the Preview Works"
Note: Tags can be correct but Facebook only scrapes every 24 hours, according to their documentation. Use the Facebook Lint page to get the image into Facebook.
http://developers.facebook.com/tools/lint/
My tags were correct but Facebook only scrapes every 24 hours, according to their documentation. Using the Facebook Lint page got the image into Facebook.
Enter your URL here and FB will update the metadata from your page:
https://developers.facebook.com/tools/debug (updated link)
Facebook uses og:tags and the Open Graph Protocol to decipher what information to display when previewing your URL in a share dialog
or in a news feed on facebook.
The og:tags contain information such as :
The title of the page
The type of page
The URL
The websites name
A description of the page
Facebook user_id's of administrators of the page ( on facebook )
Here is an example ( taken from the facebook documentation ) of some og:tags
<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"/>
Once you have implemented the correct markup of the og:tags and set their values, you can test how facebook will view your URL by using the Facebook Debugger. The debugger tool will also highlight any problems it finds with the og:tags on the page or lack there-of.
One thing to keep in mind is that facebook does do some caching with regard to this information, so in order for changes to take effect your page will have t be scraped as stated in the documentation :
Editing Meta Tags
You can update the attributes of your page by updating your page's
tags. Note that og:title and og:type are only editable
initially - after your page receives 50 likes the title becomes fixed,
and after your page receives 10,000 likes the type becomes fixed.
These properties are fixed to avoid surprising users who have liked
the page already. Changing the title or type tags after these limits
are reached does nothing, your page retains the original title and
type.
For the changes to be reflected on Facebook, you must force your page
to be scraped. The page is scraped when an admin for the page clicks
the Like button or when the URL is entered into the Facebook URL
Linter Facebook Debugger...
I see that all the answers provided are correct. However, one important detail was overlooked: The size of the image MUST be at least 200 X 200 px, otherwise Facebook will substitute the thumbnail with the first available image that meets the criteria on the page. Another fact is that the minimum required is to include the 3 metas that Facebook requires for the og:image to take effect:
<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />
Debug your page with Facebook debugger and fix all the warnings and it should work like a charm!
https://developers.facebook.com/tools/debug
I was having the same problems and believe I have solved it. I used the link meta tag as mentioned here to point to the image I wanted, but the key is that if you do that FB won't pull any other images as choices. Also if your image is too big, you won't have any choices at all.
Here's how I fixed my site http://gnorml.com/blog/facebook-link-thumbnails/
Here’s how this works all:
You need the ability to access the HTML on the particular webpage you are sharing. It'll probably work site wide too if you use a common header file. I have not tried this, but it should work. You'll just get the same image for all pages if you do this though.
You need to add these HTML meta tags into page in the . It will not work if you put it in the . Make sure to customize per your a) image, b) description, c) URL, and d) title.
A Real Example.
<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />
<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />
<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />
<meta property="og:title" content="Coaches Wisdom Telesummit" />
Save
Open a fresh Facebook post, and retry the page you wanted to share.
If you are having trouble… you can debug it with this Facebook tool. It looks more geeky than it is. It tells you what Facebook is seeing when you post in the URL to share.
https://developers.facebook.com/tools/debug/og/object/
Big Tip.. make sure the “quote marks” are the same in your HTML (they should look like 2 straight marks and no curves… sometimes programs change these to different fonts and it goofs up the code.
Sharing on Facebook: How to Improve Your Results by Customizing the Image, Title, and Text
From the link above. For the best possible share, you'll want to suggest 3 pieces of data in your HTML:
Title
Short description
Image
This accomplished by the following, placed inside the 'head' tag of your HTML:
Title: <title>INSERT POST TITLE</title>
Image: <meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
Description: <meta name=description content="INSERT YOUR SUMMARY TEXT"/>
If you website is static HTML, you'll have to do this for every page using your HTML editor.
If you're using a CMS like Drupal, you can automate a lot of it (see above link). If you use wordpress, you can probably implement something similar using the Drupal example as a guideline. I hope you found these useful.
Finally, you can always manually edit your share posts. See this example with illustrations.
I also had an issue on a site I was working on last week. I implemented a like box and tested the like box. Then I went ahead to add an image to my header (the ob:image meta). Still the correct image did not show up on my facebook notification.
I tried everything, and came to the conclusion that every single implementation of a like button is cached. So let's say you clock the Like button on url A, then you specify an image in the header and you test it by clicking the Luke button again on url A. You won't see the image as the page is cached. The image will show up when you click on the Like button on page B.
To reset the cache, you have to use the lint debugger tool that's mentioned above, and validate all the Urls for those that are cached... That's the only thing that worked for me.
The easiest way I found to set Facebook Open Graph to every Joomla article, was to place in com_content/article/default.php override, next code:
$app = JFactory::getApplication();
$path = JURI::root();
$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) :
$document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
$document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
endif;
This will place meta og tags in the head with details from current article.