http://new.sonikastudios.com
I tried everything to get my logo image to be picked as the thumbnail, but this is eluding me! It keeps defaulting to either the Twitter or Facebook button when I try to share this link on Facebook.
<meta property="og:image" content="http://new.sonikastudios.com/images/sonika_logo.png"/>
<link rel="image_src" type="image/jpeg" href="http://new.sonikastudios.com/images/sonika_logo.png" />
Those are specified on the section.. not to mention the img tag is straight-foward:
<img src="/images/sonika_logo.png" title="Sonika Studios Inc." alt="Sonika Studios Inc." />
What am I missing to make my logo the main thumbnail for Facebook shares? Thanks in advance.
Probably because you specified the MIME type as image/jpeg when your image is actually a PNG.
Just remove the type attribute - it's not required by Facebook Share.
Related
Bit of a silly question but when I'm linking my portfolio to external sites like Linkedin, a randomly selected image shows up. How do I change the source for my image so that I can use my logo as the image shown instead?
You can just include your logo as a source to the image in your source code:
<img src="url-to-your-logo" alt="alternative text">
What you need to do is add a reference to the image you want to display in a meta tag with a property="og:image" attribute.
Such meta tags control which information will be displayed when sharing your link:
<meta property="og:title" content="Title Of My Site">
<meta property="og:description" content="This description will appear below the title in a smaller font.">
<meta property="og:image" content="http://mysite.example.com/show-this-instead-of-linkedin-logo.jpg">
<meta property="og:url" content="http://mysite.example.com">
You can check this CSS Tricks article for more information.
If I share the link to my page via Facebook the wrong image appears. How can I control which image is displayed when my page is shared in social media such as facebook and previewed:
The image of the envelope displayed above is what I'd like to control.
Thank you
try put this code in tag head of page that you want to share, it work in my web:
<head>
<meta name="title" content="title" />
<meta name="description" content="description" />
<!-- deafult image for fb share -->
<link rel="image_src" href="http://web.com/myweb.png" />
</head>
I am working on a new site ATM which features a traditional image + div with post text structure. When a user adds a link to this site in a Facebook status update, Facebook only shows the link and no text or image from the site. Know I would like to know which content Facebook loads from a site if a user added a link to a status message? Which html tags are selected and how can I change my HTML so that an preview image and text is loaded by Facebook.
Other website:
My website:
Better late than never...
It's in the Facebook documentation:
In order to make sure that the preview is always correctly populated, you should add the tags shown below to the element in your HTML code. If you don't tag your page, Facebook Share will grab the title of your page as specified in the tag, and will create a summary description from the first text that appears in the body of your page. A list of thumbnails will all be selected from available images on your page.
You can control the exact title, description, and thumbnail that Facebook Share uses by adding the following meta tags to the element in your page:
<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />
So an example news story could have the following:
<meta property="og:title" content="Smith hails 'unique' Wable legacy"/>
<meta property="og:description" content="John Smith claims beautiful football is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
As shown, og:title contains the preview title, og:description contains the preview summary and og:image contains the preview image. Please make sure that none of the content fields contain any HTML markup because it will be stripped out.
The title and description tags are the minimum requirements for any preview, so make sure to include these two.
The og:image is the URL to the image that appears in the Feed story. The thumbnail's width AND 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.
I've attached a Facebook like button to a friends parents home page for there business but the problem is that on when someone likes the link, on the Facebook page it shows a different logo attached to the message on Facebook (a Austrian flag instead of an Australian). The code for the like button is
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=17923769214223454&xfbml=1">
</script>
<fb:like href="http://www.velumount.com.au/en/" send="false" layout="button_count" width="450" show_faces="true" font="">
</fb:like>
And the website I've placed it on -
http://www.velumount.com.au/en/
You've to set the metatag og:image, i.e. placing in your head something like
<head>
<meta property="og:image" content="http://www.velumount.com.au/config/logo-en.gif" />
</head>
by the way, you can always check how your link will look like with Facebook URL linter
I'm having a problem with my facebook like button and the webpage. The webpage contains banners and random images as well as the article image, now facebook have removed the share button, though it still works, but with the current like button. Facebook chooses the image automatically, and sometimes it chooses the banners instead of the article image. Is there any alternate way instead of adding properties to the article images? Like exculding all the images but the article image.
This answer isn't necessarily helpful for "excluding" specific images, but you can control what Facebook scrapes off of your page via Open Graph protocol with meta tags. For example:
<meta property="og:title" content="This is my title" />
<meta property="og:type" content="activity" />
<meta property="og:url" content="http://www.mysite.com/redirect/" />
<meta property="og:image" content="http://www.mysite.com/logo.jpg" />
<meta property="og:site_name" content="I'm on Facebook!" />
<meta property="og:description" content="Hello World!" />
This will force Facebook to reference http://www.mysite.com/logo.jpg to use as thumbnail.
Additionally, my blog post on the related subject matter might help you: http://weblogs.asp.net/kon/archive/2011/06/07/trick-facebook-scrapping-of-facebook-tab-url.aspx
I had the same problem. Kon has a good suggestion, but I'd rather have Facebook use the article image and not the logo, so what I did is put all logos and ad banners as background-image through CSS.
Something like this:
<span style="background-image: url('IMAGE OF AD'); width:Xpx; height:Xpx; display:block;"></span>