I have generated the following url to share the page into facebook,
https://www.facebook.com/dialog/feed?app_id=195106440518444&link=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2F&picture=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fdd%2F56%2F37%2Fdd56376f6bb3f69130ec3216a13ec99c.jpg&name=Capella+FlexPath&caption=FlexPath%3A+Your+degree.+Your+pace.&description=With+FlexPath%2C+you+can+still+build+the+career-advancing+skills+and+knowledge+you+need%2C+but+with+a+class+schedule+entirely+controlled+by+you.&redirect_uri=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2Fflexpath-trial-course%2F&ext=1519158959&hash=AeY6NpBp29iik5NI
While hit on the above link, I couldn't see the picture. And I know the picture attribute is deprecated. Then I have tried to use the other way,
I can achieve the same thing with the help of meta tag,
<meta property="og:image" content="https://static.xx.fbcdn.net/rsrc.php/v3/ye/r/lWB96Z8sFtt.png" />
If I have include this meta tag in my page the image will display.
But I would like to display the picture dynamic also same page I would like to use different image on different shares.
Please provide suggestions If you have a idea.
quick question:
one tiny prob i have is when i try to share a page from my site on facebook (for example:http://pent-house.co.il/index.php/sale/52-2013-12-12-13-41-40), i cannot see thumbnails for the gallery. i see only the logo :\
is there any way that i can share the photos throw facebook?
thank you very much and have a damm nice day! XD
i wanted to shar a pic but i dont have enough reputation
You have to set an og:image meta tag like this:
<meta property="og:image" content="THE LINK TO YOUR IMAGE"/>
In the <head> of your document otherwise facebook bot uses (usualy) the biggest images he can fin. On the example page you linked to the biggest one is the logo.
Once you have set the og:image meta tag don't forget to delete facebook's cache by entering your page url on this page so you can see the modifications you make.
More information about thos meta tags and open graph here
One of the problems I face while sharing a link of my blogger post on facebook or linkedin is that the thumbnail shared is my picture (which is the only picture on the page). I would prefer no thumbnail being shared.I tried using
<meta property="og:image" content=""
I.e the content is kept as blank, yet it shows a thumbnail. How do i set it to no picture?
You can't. Facebook/Linkedin will crawl your site and decide on it's own what images to offer the user. The og:image meta tag is just a suggestion and not a directive.
The only way to share without image is for the user to remove it.
Update: there is another way. You could detect (on the server) FB/LinkedIns crawler and serve them HTML that does not contain any images. That way they wouldn't have anything to display (just text). I don't know if that's possible on blogger. And if you go down this path, check FB/LinkedIn's TOS if this is allowed (doing this with google, for instance, will get you banned).
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 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.