When i paste a link to my website i would like facebook to grab certain images from my website to show. How do i do this?
i tried adding this right below my title tag but it doesnt seem to work, nothing shows
<link rel='image_src' type='image/jpeg' href='http://www.url.com/myImage.png'>
regards,
alexander
You can use the facebook "Open Graph" meta data protocol.
<meta property="og:image" content="http://www.url.com/myImage.png" />
Full Documentation
Related
I would like to use my own image for the LinkedIn share button. I've been following the information on this previous post:
How to make a custom LinkedIn share button
It's noted here that: To create a custom Share button for LinkedIn, you need to make POST calls now.
I've read the Linkedin documentation however I don't understand how to incorporate the POST call with my HTML page. Could someone help explain it to me please?
I've initially tried to use this URL which i understand is now not supported by LinkedIn:
https://www.linkedin.com/shareArticle?mini=true&url=articleUrl&title=YourarticleTitle&summary=YourarticleSummary&source=YourarticleSource
It partially works! The image, title and summary are all incomplete or not what I have specified in the URL, however if I click on the LinkedIn post it does actually link to the right page.
Is there anyway of getting this working?
Many thanks
Let's take a quick glance at the Official LinkedIn "Making Your Website Shareable on LinkedIn" Documentation. The URL format should be...
https://www.linkedin.com/sharing/share-offsite/?url={url}
And to have it use the other parameters, such as image, etc., set your og: tags in the HTML of the link you are sharing, like so...
<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" />
I am attempting to get my website logo to show up properly on Facebook news feeds. When I paste my site link on my news feed (share it) in Facebook and the image shows up, but the thumbnail image is just a portion of my logo. Specifically, the center portion of my logo shows up only.
My image/logo is exported via GIMP 2.8 and it is 1200 by 349 px. I made it this size because that is the closest I could come to the Facebook recommended 1200 x 650 px (or something like that).
EDIT:
I am not sure if this is the best way to publicly share images, but this is exactly like my logo except for text and color:
http://2imgs.com/2i/i/53d2dd5f/22d0e1223be1e43544446b27ab6b4b3c/377394be6d.f.jpg
Then when I scale the image down (in GIMP 2.8) to something that seems like it will fit, the image doesn't seem to change anything.
I am using the Open Graph Debugger here:
https://developers.facebook.com/tools/
I am doing stuff like this (and many other) posts:
Default website image for social sharing
Here is the head of my Index.php:
<head>
<link href="html5reset-1.6.1.css" rel="stylesheet">
<meta charset="utf-8" />
<meta name="description" content="my business description here" />
<!-- For facebook -->
<meta property="og:image" content="http://www.example.com/imagename_w1200h349.jpg">
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="349">
<link rel="icon" type="image/png" href="myiconpic.png" />
<title>my business title here</title>
</head>
What am I missing? This is the first website I have built.
Make sure the Open Graph image is always public, that image does not seem to be available for Facebook.
About the correct sizes: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content#images
I sorted it out. I had two issues:
1) Facebook's Open Graph debugger Share Preview section doesn't refresh right when you upload a new Index.php and picture file to my host. I had to let it sit for a few minutes then refresh the page to get the preview to update.
2) I'm not sure if this is 100% true, but it worked for me: I made my image 1200 x 1200 with white canvas space above and below the logo (black). Since Facebook's recommendation is to go with 1200 x 630 pixels pictures, my solution here seems off, but it works so I am posting it.
Here is my image example that works:
EDIT: (Previous link didn't work. Hopefully this one does.)
http://2imgs.com/2i/i/53d3c78d/6719aed50ed239e3331cdeeadc572cf1/577394be6d.f.jpg
you can test why is not fetching you site image to facebook.
Facebook crawler will 'scrape' your site search for an image to use when it is being shared. If you want to specifiy which image to use, put this in the the section of your site:
Facebook may have cached a copy of the previous random image. to change or refetch for newer image. and you can test it for your ans.
https://developers.facebook.com/tools/debug/
I recently designed and built this site: http://velvetbus.co.uk
When one of the administrators go to post a link on Facebook the post appears like this:
How can I change the icon? A 'v' is nice and all but doesn't really represent the company too well.
Thanks
Facebook uses Open Graph protocol. You need to add a meta tag on your web page so facebook will know what image do display
<meta property="og:image" content="http://LINK_TO_YOUR_IMAGE"/>
It's best to use a square image, as Facebook displays them in that matter.
That image should be at least 50x50 in any of the usually supported image forms
(JPG, PNG, etc.)
Here you can learn about other tags http://davidwalsh.name/facebook-meta-tags
Is the facebook link from your website? Make sure to include a <meta property="og:image" content="someimg.jpg" /> in the head of the url you're pointing to in your post, to tell Facebook which image to use for the post.
Jeroen
I want to share my website on my facebook status. But when I write www.site.com it shows me what I wrote as a title when I add to my website to the host. But when I write www.site.com/index.html everything is okay and it shows my website title. How can I fix it? Thanks..
Facebook takes the relevant data to display from the og meta tags you place inside your
In example if you want to set a title you want Facebook to display you would add:
<meta property="og:title" content="My Website Title!" />
Also don't forget to add this:
<meta property="fb:app_id" content="1234567890" />
For the content you can place your facebook_id or facebook_id of your app. It will grant you access to insights and more.
Cheers
When posting a link to a website in Facebook (Google+ and the rest count too) you're given a thumbnail, or selection of thumbnails to choose from. These are tags from the HTML.
I've always been of the opinion that it was good practice to make my logo a background image inside a h1 tag using CSS. I make the h1 tag a link back to the home page and hide the header text with something like {text-indent: -9999px}, leaving a lovely semantic HTML header. Here's a link to my site if you want a look: http://tempertemper.net
The problem with this is that as it's a background image it's overlooked.
Would it be a good idea to post a custom at the top of the HTML for this purpose only, and hide it off the side of the page? I don't know, seems a bit messy. I could just put the tag inside the h1, but the logo wouldn't be the right shape as it's designed for a specific purpose.
Maybe there's a meta tag for this purpose or maybe there's a technique to force FB to pull a specific image that isn't loaded normally? Does anyone have any ideas or top tips for this?
Yes, you can set a meta tag so that Facebook knows which image to pick.
See: https://developers.facebook.com/docs/opengraph/
Specifically, it is the og:image property, and it will tell Facebook's link share script to choose that image as its thumbnail.
Keep in mind though that Facebook does some caching, so if you've already shared the link once it may still be "stuck" on using the older image.
You can see whats Facebook getting out of your website by using the Facebook URL Linter. See: http://developers.facebook.com/tools/lint/ (The use of the URL Linter will also rebuild Facebook's cache)
There is a Meta-Tag to let the Application (like FB) know that you want a specific image taken rather than let the user choose one.
<link rel="image_src" href="http://link.to/image.png" />
For Facebook there is also an other Way to achieve this by using Open Graph protocol.
You need to prepare your Website for using og: Tags by adding the og-Namespace in your html-Tag:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">
Then you are able to use the og: Meta-Tags like this:
<meta property="og:title" content="Any title here" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://link.to/image.png" />
For Facebook this six og Meta-Tags are required:
og:title
og:type
og:image
og:url
og:site_name
og:admins OR og:app_id
You can find additional information an more og: types at: https://developers.facebook.com/docs/opengraph/
Like others have answered but it only works for me when i use (https)
<meta property="og:image" content="https://link.to/image.png" />
Instead of
<meta property="og:image" content="http://link.to/image.png" />
what if you did like a img but in css put
#logo{
display: none; }
<img id="logo" src="yourlogohere.jpg">
the image would not show up on the page but i don't know if facebook would see the image
As already said: Best would be to use the metatag with the og:image opengraph property.
In addition to that: Facebook is not the only platform using the opengraph metatags. Also Google+, or Xing are preferring it. Not sure about others...