When someone posts a link to a web site in Facebook, it populates the link preview box with a photo and some text from the site.
If someone posts a link to my site in Facebook, it is generally just get the site's domain name and one of the images that appears on the site. No text appears.
I would like to be able to control what text and images appear in the link. Is there a specification that they use? Can I provide some metadata so Facebook will display what I want?
Here is Facebook's developer page on their share function.
Basically there are some simple metatags you can use to optimize what appears on FB
<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" / >
AND:
The wiki article doesn't mention this, but Facebook CACHES the results of your site for awhile. So, if you're debugging & doing quick iterations, you either need to wait awhile, or rename the page (index2.html, index3.html, etc) until you find something that works.
Related
We have been sharing our website pages and articles to LinkedIn for almost 4 years using
https://www.linkedin.com/shareArticle?mini=true&url=https://example.com/page1/
Until recently, the share block would appear with an image, caption and summary. Just as in Facebook. But now, we find that the summary does not show. I know many have raised this same concern here. One solution I saw in this forum is to switch to forcing visitors to sign into our LinkedIn app and post the status via REST API. My question is, Is this really necessary. We don't have a login feature for our website and to force people to login to LinkedIn app just to show description which is already part of the og tags on the page. Surely someone from LinkedIn can respond to this issue since so many have raised it.
You can use Post Inspector (https://www.linkedin.com/post-inspector/) to preview how your posts will be shared on LinkedIn.
Alternatively, you can use the Share Plugin (https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin) to add a widget for users to easily share content on LinkedIn.
Just take a quick look at the Official LinkedIn "Making Your Website Shareable on LinkedIn" Documentation. I will bold areas of particular interest:
If you're the developer of your website, you'll need to make sure the source code complies with Open Graph Protocol (OGP) and certain image requirements specific to LinkedIn....
Below are the og: tags that must exist and their correct format:
<meta property='og:title' content='Title of the article"/>
<meta property='og:image' content='//media.example.com/ 1234567.jpg"/>
<meta property='og:description' content='Description that will show in the preview"/>
<meta property='og:url' content='//www.example.com/URL of the article" />
And the requirements...
Here are the image requirements specific to the LinkedIn sharing module:
Max file size: 5 MB
Minimum image dimensions: 1200 (w) x 627 (h) pixels
Recommended ratio: 1.91:1
So, if you want to make sure your image displays correctly in the LinkedIn share functionality, make sure your webpage has the following...
<html>
<head>
<meta property="og:image" content="someweburl.jpg" />
</head>
...
</html>
Hope this helps!
Is there a special url for sharing to Facebook and Twitter for mobile?
Or are they the same as those from websites?
Using
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Twitter
for Twitter and
<script>
function fbs_click()
{
u='www.something';
t='title';
window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="http://www.facebook.com/sharer/sharer.php?u=someurl" onclick="return fbs_click()" target="_blank" class="">Facebook</a>
for Facebook.
Your sharing implementation should be the same and should work so long as your mobile users have devices capable or rendering JavaScript. Otherwise you can use each platforms' API url to share inside a link, the only problem is the callback redirects them either to Twitter or Facebook and they'll have to manually return to your site. The links are as below:
Sharing on Facebook:
http://m.facebook.com/sharer.php?u=<urlencoded url>t=<urlencoded title>
For example:
http://m.facebook.com/sharer.php?u=http://www.google.com
Updating status on Twitter:
http://mobile.twitter.com/home?status=<urlencoded status>
A couple of notes regarding Simpleton's answer.
The http://m.facebook.com/sharer.php URL may not be what you want. The site that you provide in the u query parameter needs to have some tags in the page in order for the share
page to be at all interesting. Just try putting another URL in there other than Google to see what I mean. I was never really able to figure out what it is looking for in the page of the site in order to show anything useful in your share page. I did not see any way to provide extra information about the site you are sharing.
The t query parameter is no longer read by facebook as far as I could tell
I found that the Facebook feed dialog was a better sharing alternative (https://developers.facebook.com/docs/reference/dialogs/feed/). See the example at the bottom of that page for the information you can share. Paste that example URL in to your browser to see what it looks like. You can play around with the parameters to see what each parameter controls in the post. For example, if you don't provide the caption parameter, it seems that the base URL of the link parameter is used in it's place. To use the feed dialog approach, you need to register your app in Facebook to get an app_id that you will need to include in the feed dialog URL. You also associate your app with a web site URL, which you also use in the feed dialog URL. If you want Facebook to serve you a mobile-friendly page, append &display=touch to the end of the feed dialog URL. Lastly, you must provide redirect_uri parameter where the user will be redirected (with the post ID included as a query parameter), so you have to have something at that URL to handle the response.
Regarding the http://mobile.twitter.com/home?status URL, I learned a couple of things: first, any URL's in include in the status will not be shortened (bummer); second, if your status includes any single quotes, they will be encoded as ' (HTML entity code) but will not get decoded when your post the tweet. However, this doesn't happen if you are posting via the desktop, using the same URL. You can see what I mean by trying the following URL from both your iPhone (I was using Safari on iPhone) and then from your desktop (I was using Safari):
http://mobile.twitter.com/home?status=Wayne's%20World
Note, I do an javascript encodeURI on the status, but single quotes are not generally encodable characters by most URL/I encoders. There are some that will replace the single quote with a %27, but I tried inserting that manually and it still didn't get decoded in the status text.
I hope this information helps someone comes here looking for simple Facebook and Twitter sharing options.
Twitter - This is how I solved the tweet by url for all devices/browsers issue:
http://twitter.com/intent/tweet?text= + encodeURIComponent(tweet);
encodeURIComponent - is a built in javascript function, explained here.
The 'http://mobile.twitter.com/home?status=' is not supported, and you will get encoding issues when twitter requests a login.
Facebook - For facebook sharing I used Facebook API example
The url is ok, but you need to do some work on your server to get Facebook to really make it look decent. Facebook now uses "Open Graph", which allows you to add special tags to your web page that Facebook understands. You can define what types of media are on the page, even add your own objects with definitions you create inside your Facebook app. The link to the developer Open Graph objects page is Here.
A sample of Open Graph on a detail page might look like this:
<meta property="fb:app_id" content="YOUR FACEBOOK_APP_ID }}" />
<meta property="og:url" content="The URL that this page is on" />
<meta property="og:site_name" content="Your domain" />
<meta property="og:title" content="Title of your page" />
<meta property="og:type" content="This is very important - it is how
Facebook refers to your post. Image, video, text, etc. Even custom stuff is
possible" />
<meta property="og:image" content="image url for facebook to display on
the user's wall" />
<meta property="og:determiner" content="auto" />
<meta property="og:description" content="A description you want with this
content" />
And so on. This all goes in the <head> of the page of the actual url you are supplying to Facebook. Then Facebook will translate this into the appropriate post. In addition, you need to set up the Open Graph on your apps developer page, so that Facebook knows to look for the og: tags. It's complicated, but it does work.
Good luck!
I am using Facebook Send button in 3 pages of my website. Before i send the message, the title, website and description looks fine. After i send, it shows up different title and different description in the message . I have no idea what's wrong in here? Is that my mistake somewhere or cache issue or something else?
Thanks a lot in advance!
Facebook has a tool called URL Linter. This tool gives us an idea about how a url will be shared on facebook, what content, which image will be fetched. We can use this tool for any url and it fetches the latest title, description, excerpt and other stuff that will be shown while sharing the link. If you use an already shared URL with this tool then facebook fetches the latest content, and also updates it cache with the latest content.
https://developers.facebook.com/tools/debug
At first you have to cross check and confirm that the url shared is of the right page, not the simple domain address. It will be better to cross check the following contents inside <Head> tag to make sure that you have done basic code requirements.
<link href="{URL OF THE PAGE}" rel="canonical">
<meta content="{YOUR FB APP ID}" property="fb:app_id">
<meta content="{YOUR PAGE TITLE}" property="og:title">
<meta content="website" property="og:type">
<meta content="{URL OF THE PAGE}" property="og:url">
<meta content="{LOGO IMAGE URL}" property="og:image">
<meta content="{YOUR SITE NAME}" property="og:site_name">
Once this is done, it should mostly resolve your issue with different title and different description.
If you still face issue, go to https://developers.facebook.com/tools/debug
Input URL or Access Token and click DEBUG button. It will guide you if there is any errors in the in accessing the page by facebook.
Hope this helps.
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.