Whenever a user Likes/Comments on a page of my website, and it subsequently appears in their timeline as a post, the image/icon that appears with the post is one of the social icons from said page (i,e the StumbleUpon/Tweet icon) and not the preview image.
Is there a way to set the preview image that appears with the timeline post when a user Likes/Comments on a page?
Here's an example of what I am referring to (in this case with a StumbleUpon icon from the page):
Have you specified tag in head of your page.
<meta property="og:image" content="tag value"/>
where "og:image" is the URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
This image is pulled from the website on Facebook page when a user likes or comments on your website where like button is placed
You need to have og:image meta tag on page. Image specified that way will appear in published post (no matter where post is displayed timeline or feed)
Related
I have looked around the internet for this specific issue and I cannot seem to find a fix for what my exact issue is. I want to replace the site logo that appears in, for example, a chrome tab that sits to the left of the site title.
I already put a meta tag override in the very top of the header but it failed to do anything.
<meta property="og:image" content="<?php echo( get_template_directory_uri() ); ?>/assets/logo.png">
The meta tag expands into a url that is able to be visited and seen, so I know it is not a bad url.
Any help is appreciated!
Depending on the theme you use it should be available in the Customize menu (top bar), then Site identity and Site icon section. Selected graphics needs to be square and at least 512x512px large.
I'm working on the obituary section of a funeral home website. Users can click the SHARE button under the person's picture to post the link to Facebook.
Obituary listings
I have meta-tags for the page title and image, labeled like Facebook tells you to: <meta property="og:title"... and <meta property="og:image".
The problem is, the title and image that show up when you click the share button don't always show like they're supposed to. Sometimes the photo and person's name are right, but sometimes Facebook just picks the site's header image instead of the photo, and the site's title instead of the person's name.
Does anybody know why it isn't working consistently?
It looks like this is a Facebook cache issue, which there's nothing I can do about.
I have a doubt about this, my head tag in the index page covers the open graph data, twitter card and links for several sizes of apple touch icon. My question is: Is it necessary having these tags within every page of my site? Index page is which loads by default, therefore, I guess that only this page should have it but I have tested that some websites have these calls in every page.
So, what's the best way to proceed?
You should have it on every page. When someone shares a link on a social network or bookmarks a sub-page of your website the browser or social network will want to use that icon. It is not going to load your home page, so the links to the appropriate icons should be in the head of the page itself.
I have a blogger (ameliaily.blogspot.com) and I am trying to get images from the blog to post as a thumbnail on Facebook and I have tried many things and none work. I still keep getting the og:image is not big enough error.
I have searched many forums and looked at all the answers I could find and it is still not working. I do not want FB to keep using my googleusercontent image as the picture (it is my personal photo and I don't want it to be the thumbnail used).
Below are the things I have tried:
Changing the size of the actual image. I've tried making it exactly 200 x 200 px, I've tried making it a rounded number i.e. 600 x 400 instead of 541 x 441.
Uploading the actual image to blogger.
Uploading the actual image to photobucket and THEN linking that image to blogger.
Adding the open graph code to my template HTML as suggested by these two forums: blogger-hints-and-tips.blogspot.com/2013/06/add-facebook-open-graph-tags-to-blogger-for-better-looking-shares-and-likes.html and www.bloggerhow.com/2012/07/implement-open-graph-in-blogger-blogs.html
5) These are the images that I am trying to use as thumbnails: http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/balancebeam-4.jpg.html and http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/image004.jpg.html
They are both huge images so I don't know why FB keeps telling me it is not large enough.
I had a look at the source of your page, and it looks like you are using a tag like this for the image:
<meta content='http://smg.photobucket.com/user/dizzyuptheblue/media/Blogger/image004.jpg.html' property='og:image'/>
The file type of the URL in this tag needs to be an image - at the moment, it is an HTML file which shows an image. You need the direct URL to the image. To get this, you can visit that page (ending in image0004.jpg.html) and right click on the image, copy the image URL and use this copied value in the tag instead - so the tag should become this:
<meta content='http://img.photobucket.com/albums/v235/dizzyuptheblue/Blogger/image004.jpg' property='og:image'/>
Try that instead and then test it out on the Facebook Open Graph debugger.
I need to change the facebook like thumbnail image, I've tried this
<link rel="image_src" href="thisurl" />
and this
<meta property="og:image" content="thisurl"/>
I realized afterwards this needs to go in the head, but because of the structure of the code I'm not able to modify in there and still decide which url I need (i can't access the variables I have for the images in there), I can modify like this
<html>
<head></head>
<body>
...
modify in here
...
</body>
</html>
I also tried creating a meta tag with javascript in the area that I can change, that does not effect it
Does anybody know a way I can tell facebook which image I want as a thumbnail without having to modify inside of the head element
The thumbnail image should go in the header just as you said, using rel="image_src" or the opengraph tag.
Specify a thumbnail image in your html body
If Facebook can't get your thumbnail image from the header, it tries to get it from the content. It usualy takes the first image that it likes, so if you want to force a specific thumbnail not included in the page, put an invisible image (using the inline css display:none) just after the tag:
<img src=”http://www.website.com/images/thumbnail.jpg” alt=”thumbnail” height=”200″ width=”250″ style=”display:none” />
Doing this, remember to:
Avoid spaces in thumbnail name (FB doesn't manage spaces too well)
Use a jpg (FB doesn't like png)
Use the right dimensions (see below)
Check your thumbnail's dimensions
Facebook doesn't like thumbnails of every size. The most important thing is the ratio between height and width that should be lesser than 1/3. So 40 & 100 would be ok, but 30 & 100 won't work. In addition, Facebook recently seems to prefer image with at least 200px in both dimensions (but don't forget the 1/3 rule).
Clean Facebook Cache
Furthermore, you should clean the Facebook cache before every test using the Facebook Debug Tool (once knew as Facebook Linter):
http://developers.facebook.com/tools/debug
Insert your url in the form field and press Debug. You'll force Facebook to overwrite its information about your link. Sometimes you think there's still something wrong but it's just because it's using a wrong cached version of your page.
About Facebook Linter, be aware that (accordingly to he OGraph documentation):
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.