When someone shares a page on Facebook, the webmaster can specify the title, the description and the default thumbnail image.
The title doesn't have to be the same as the the page's title tag, and is specified with:
<meta name="title" content="different page title"/> The description is taken from the standard description meta tag:
<meta name="description" content="page description"/> The thumbnail used for Facebook sharing, and other places too, can be specified with:
<link rel="image_src" href="[your thumbnail's web address]"/> Place the code in the head section of the web page replacing "[your thumbnail's web address]" with the URL to your thumbnail image, and both the title and description with what you want to have appear when the item is shared on Facebook.
Update: Note that for the image, thumbnail's width or height must be at least 50 pixels, and cannot exceed 130x110 pixels. The ratio of both height divided by width and width divided by height (w / h, h / w) cannot exceed 3.0. For example, an image of 126x39 pixels will not be displayed, as the ratio of width divided by height is greater than 3.0 (126 / 39 = 3.23). Images will be resized proportionally.
23 comments:
Hello David!
Maybe you can help me... I use the share on facebook button under each post but when people share, it won't show the post title and description. Instead, it has the blog title and description. How would you fix that?
(Take a look: www.enroutepourlacoupe.com)
Thanks!
Fred,
A quick look at one of your post's source code shows you have a few issues, some of which would be caught by an html validator. You have more than one <title> tage which will break many things, facebook sharing is just one of them. You also have not made your blog use a "description" meta tag with the posts description, it uses the blog's description.
How to have you blog automatically make title tags and description tags for each post page is largely dependent on what software you use and how much control you have of the server it is hosted on. Some blog software has plug-ins that will solve these issues, some take much struggle to make it do this.
Best of luck!
Hi again
I have added the code below in order to get facebook to recogniste my post titles:
meta name="title" content="different page title"/
I can see how this works in terms of - if you want a static piece of text for every post i share
but do you know could i insert in order for it just to take the actual existing title of the post - which facebook doesnt seem to recognise at the moment?
Specific implementation for your site/s is typically a direct consult, and this post, like most Dave Tips, is about a specific feature in a general case (i.e., beyond just blogger).
For blogger blogs, the code in this post is exactly what is used, with the "content" attribute or image URL changed to the posts specifics using template or layout tags as one can for most blogging software.
Your blog listed in your profile already uses unique-to-each-post-page titles, and when I click the Facebook sharing link, it already seems to use that unique title, the post's description and the first image from the post as the thumbnail. I'm unclear what you are hoping to do beyond that.
Hi David,
I have the same problem as Fred and have your reply. Can you suggest something specific I can do to remedy this problem?
Thanks
Hi Ninja,
I'm not sure what specific you seek that isn't covered in my
reply to Fred. Looking at your site specifically and making recommendations is something I do for clients and would be happy to discuss directly with you.
hi there! I'm looking for a way to customise my "share on facebook" link, as in use an image as the link like i've done with my "tweet this" link. any suggestions?
Yes, please read my comment on my post about blogger share on facebook link.
Direct. Simple.
NICE!
Hi, great post! I have a problem with my share on facebook after each post.
It won't show thumbnail image. What can I do to make it show a different thumbnail image for each post?
You'd have to somehow get blogger to make the <link rel="image_src" href="[your thumbnail's web address]"/> have a different thumbnail address for each post, which would be non-simple.
Something like the template or layout code for the post's URL with ".jpg" added at the end and http://www.example.com/post-images/ added before it with all the images online at that location so the entire URL would lead to the image, like http://www.example.com/post-images/[whole URL to your post].jpg . Very complex, likely better to use a different blogging platform.
Wow, complicated indeed!
Thank you.
facebook doesnt even care to fetch d images from the blogger post ..i just want some image next to the shared link for presentational purposes if not the exact content match image !! ...any idea pls!!!!
Best bet is to add the <link rel="image_src"> tag as described above and ensure that your image fits facebook's requirements (which I'm adding to my post now).
hey man has the new facebook changed the way share thing works
cause i have all tags put up correctly
still description n title dun go to the facebook page
it doesnt pick it up
ne ides??????
It still works on my sites, so I'm not sure what the issue is. Look at your site's source code and make sure it is set up as described in this post. Keep in mind the 'share' function is very different from the 'like' function on facebook. Good luck!
Is there any way to combine Blogger 'Share on Facebook' Code with concrete thumbnail image? I mean, whenever you press 'Share on Facebook'to show always the same image?
hi there! Great tips you have here!
I have a problem with the facebook link you can see it here.http://odipa.blogspot.com/2011/01/blog-post.html
When you try to post the article in your facebook page, you see some "strange" code.
Any suggestions?
Hi ΟΔΗΠΑ,
I don't know all the details of your site, but it seem not to be entirely made of valid html code (more on that at http://validator.w3.org ) and one of your javascripts is not escaped by using //<![CDATA[ as another one of your javascripts is. The unescaped one seems to be being chosen by Facebook's machines as your description.
My suggestion is to both escape this code properly, and try to make more of your code valid (I know that making all of it valid may not be useful or functionally possible). Best of luck. If you'd like further custom consultation, please let me know.
Socco,
I believe the original post specifically addresses using a thumbnail image. My apologies if this seems redundant, but it's there. I may not be understanding what you are asking.
Thank you David i ll do my best and i will come back for questions if neede. Thank you very match :)
Dave thank you for your suggestions. I am in the process of trying to learn HTML so this is very interesting to me.
I, too, have a problem with the thumbnail on my Facebook share. It is still using an image that I deleted from the blog several weeks ago. I have searched the code and don't see the old image URL anywhere.
I have tried what you suggested in terms of adding the new image that I want to the head section using your code just below the meta section but before the body. (I tried to share the actual HTML but the comments function won't allow it.)
I included an href to a .png image. Still, when I FB share, I get that pesky old image! Have I done something wrong? The new image is 128x128. I can use a smaller version if need be, but the old image was 256x320 - the one that won't die! :)
Thanks for any help.
Susan
David, please help me out!
First i tougth it was a plugin conflict, then i tougth it was the theme i used , i deleted everything but on a simple wordpress installation, some of my post when i share them on facebook they pull the image and title but some others wont... its been driving me crazy for the past month... can you help me out to see what could be the reason?
This post works right:
http://oscarimorales.com/2011/06/suenos-o-ilusiones-cual-es-la-diferencia/
This other post doesnt show the title:
http://oscarimorales.com/2011/06/la-teologia-y-la-doctrina-importan/
and some others wont even show an image or post...
PLEASE help me to know how can i fix this?
Thanks
Post a Comment