I had a <meta name="og:image" content="imageUrl"> which was working fine but i need to show two thumbnail images so i just added another
`<meta name="og:image" content="secondImageUrl">`
first image was ignored and still facebook shows just one option now it's second on (Sequence of tags does not matter i checked by putting tags up and down).
Facebook linter (https://developers.facebook.com/tools/debug) show me two correct images in og:image column.
is there any solution to this problem ??
I need to show multiple images in thumbnail option for example i have shared a link
on facebook linter i noticed some thing called
"The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags."
why this happens i have provided these properties and visible in Inspect Element too and linter is also fetching correct provided images.
It resolved without any major change but just replace second image with another image of 200*200 dimension.
I had checked this before might be possible that Facebook did cache at that time that's why now it resolved himself after period of almost (20 or 24 hours).
Related
We have the ability current to share current articles on our site by clicking on the sharing icon. This loads up a URL like:
https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.mydomain.com%2Fbuild-to-suit-leases-0419%2F
What's odd, is that the image that is loaded up from the OG:Image sometimes is very large while other times it's displayed as a small icon/banner layout. But in either case, the image is the exact same size and format which is used. The browser we use doesn't make a difference. I've also found that if I wait for the linked cache to clear and try to share the link again, it can give me a different layout.
Is there something else I can provide in that URL to specify the desired layout?
I think this was already answered here:
LinkedIn share requirements (BIG image)
But
Take a look at this link
https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
So the recommended ratio of your image should be 1.91:1.
Do you have a working link for the URL you want to share?
I had problems before with it because we had something generating dynamic images and that was causing linkedin to display them little.
You can also add more meta tags to it like:
og:image:width - The number of pixels wide.
og:image:height - The number of pixels high.
More info about extra meta tags can be found here
http://ogp.me/
I made a post on WordPress, then shared it on a Facebook page. In the past, the shared image would be the large "post" image. But now, for some reason, it's using the thumbnail. Running the url through fb's debugger shows that Open Graph recognizes both og:images, but that neither of them are being used in the share preview. Once posted, it uses the thumbnail.
I checked the meta content in the page head just to double check and sure enough, it looks fine:
<meta property="og:image" content="##">
What's causing this? It's recognized, but not used. What?
I currently facing the same issue, after contacting facebook, it turns out there is an issue in Open Graph in facebook that affects some users.
The Bug has been reported and assigned as "high priority" in Facebook support center - https://developers.facebook.com/bugs/978421888869140/
Be sure to have a look at
https://developers.facebook.com/docs/sharing/best-practices#images
You need at least images of 1200x630 pixels size to be able to get a large preview image.
Furthermore, you should put the larger image first IMHO.
See
https://developers.facebook.com/docs/sharing/webmasters/optimizing#cachingimages
https://developers.facebook.com/docs/sharing/webmasters#images
All:
I'm trying to configure a website I administer to be pinnable in Windows 8.1/IE11 with a live tile. The first time I went through http://www.buildmypinnedsite.com and it's documentation and provided the RSS feed, I noticed with some surprise that one of the articles in the RSS feed (the only one which had images in the content) actually used one of the images as a background for the live tile (when that article was displayed), with smaller text at the bottom of the tile, over a translucent dark background.
Check the last image at http://blog.laptopmag.com/how-to-create-a-windows-8-1-live-tile-for-your-website for an example. That article mentions, "as long as your RSS feed has images in it, the tile will rotate through your most recent five articles with images".
I really liked the look of using images instead of a solid color and plain text, so since all my articles have a banner image associated with them in our CMS (though not necessarily actually in the content), I updated the RSS feed to include an <img> tag at the top of the content (<description>) embedding the banner right at the top of the content. I also added the banner as an <enclosure> on each <item>. I added some padding characters to the GUIDs so that it would see the content as "new", but the live tile continued showing four articles with just text and a colored background, and the single article with the same background image.
Several weeks have now passed, lots of new articles posted, and yet still the live tile continues to cycle through the articles just showing text.
Windows 8 prepare site for pinning has lots of good information and links to documentation, which I've gone through, but I can't find any more information about how the images should be "included" in the feed in order for them to be pulled in as backgrounds. Am I missing it somewhere?
Thanks for your time and help!
P.S. The <description> field in my XML contains the full article HTML (just the article, no sidebars, headers, etc of course), wrapped in a <![CDATA[]]> tag, in case you're wondering.
I'm looking into this exact problem too (the main difference: I've a partial feed, not a full-content one).
The only reference I could find is msapplication-TileImage http://msdn.microsoft.com/en-us/library/ie/dn255024%28v=vs.85%29.aspx#msapplication-TileImage :
<meta name="msapplication-TileImage" content="images\tileimage.jpg">
This, of course, is just a suboptimal "one image for all" solution.
Ok, I finally got it right.
The key (thanks #james3mg ) was to drop the RSS-based approach completely and go for IE11 specific XML of the tiles feature.
So I used this:
<meta name="msapplication-notification"
content="frequency=60;
polling-uri={$SiteURL}tiles/1;id=1;
polling-uri2={$SiteURL}tiles/2;id=2;
polling-uri3={$SiteURL}tiles/3;id=3;
polling-uri4={$SiteURL}tiles/4;id=4;
polling-uri5={$SiteURL}tiles/5;id=5;
cycle=1"/>
You can see those XML here :
turbolab.it/tiles/1
turbolab.it/tiles/2
turbolab.it/tiles/3
turbolab.it/tiles/4
turbolab.it/tiles/5
The complete list of the available template is here: The tile template catalog (Windows Store apps)
I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that
I'm having a peculiar problem with comments in Drupal. If I enable writing comments in a node, and I put a hash tag in the url (for example, node/123#footer), it will load for a split second at the correct div and jump right back to the top. This doesn't happen on any other page of the site where there are no comments. It also doesn't happen if I disable comments or set comments to read-only for the node. It's not Javascript and it's not my theme because the same thing happens if I disable JS in my browser (tested with Chrome, Firefox, IE, and Opera) and use Garland. I've also changed the node's comment settings to every combination I could think of.
I want to use this because I have a lot of links that jump directly to a comment (each comment has id="comment-cid") but it's pretty useless right now!
Any idea where to look? Appreciate it!
Did you check thr source to see if there are any actual anchors available ?
If you have commentes over multiple pages(I mean 30 comments per page), then node/123#comment-3232 won't work if the comment-3232 is in ?page=1 or 2,3,etc.