Although the Facebook Debugger is showing the correct thumbnail for: http://www.apparelyzed.com/forums/topic/26287-burned/
When this url is entered into the profile update, it only fetches the text, and not the meta-image as well.
Thanks
Simon
In the above given page source has a this link tag and has an image. What is the purpose of this image. Try removing this link and see.
<link rel="image_src" ref='http://www.apparelyzed.com/forums/public/style_images/master/meta_image.png' />
and also check that your image size is minimum 50x50 and its good to have 200x200
The og:image property has some optional structured properties:
1. og:image:url - Identical to og:image.
2. og:image:secure_url - An alternate url to use if the webpage
requires HTTPS.
3. og:image:type - A MIME type for this image.
4. og:image:width - The number of pixels wide.
Related
Links from Facebook to my Mediawiki-powered website show an ugly default image for links. (The squarish image which shows a truncated "Powered by Mediawiki") pointed to by the gray arrow.)
How do I override this? I'm looking for a single image which would be the same for all pages rather than a custom image for each page. I want to avoid adding extensions if possible!
Added: #wgLogo is set and the logo file thus set does appear on the individual pages, but not on the FB link.
It seems that the secret is to set <meta property='og:image'… on every page (https://developers.facebook.com/docs/sharing/webmasters/images/).
To do so without installing extensions, add to your LocalSettings.php:
$wgHooks ['BeforePageDisplay'] [] = function (OutputPage &$out, Skin &$skin): bool {
$out->addMeta ('og:image', '(path to your image)');
return true;
};
Further reading:
https://www.mediawiki.org/wiki/Manual:Hooks/BeforePageDisplay
https://doc.wikimedia.org/mediawiki-core/master/php/classOutputPage.html#a1d667167a39be62f9988e94256508489
The PageImages extension adds the most prominent image used on the page as the OpenGraph image. The WikiSEO extension lets you set it manually (per-page or sitewide).
I have been trying to add a link to one of the YouTube videos in the README.md file. So, first I took a screenshot of the video at a specific timestamp, put it in the local directory, and then used the following syntax:
[![ALT TEXT] (image/screenshot path)] (https://youtu.be/video_id "video text")
But as the size of the screenshot is a little big (as big as my laptop screen), using the above syntax takes a lot of space in the output! I don't want that. I want to control the size of the screenshot/image. How can I do that?
I found different answers on adding an image with a clickable link; resize an image in readme; but I couldn't find any answer addressesing both the issues. (Sorry if such answer already exists)
Thanks a lot in advance :)
You can include raw HTML in your Markdown document, so just use standard HTML <a> and <img> tag with width and height atttributes:
<img src="path/to/img.png" width="xxx" height="yyy">
This will render correctly on github and elsewhere.
I have created an facebook share button using the url below:
http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.elementalworks.nl/KPJH/Homepage&p[images][0]=http://www.elementalworks.nl/KPJH/images/logo.jpg&p[title]=KPJ Halsteren voor jouw schuurfeesten en trekkertrek activiteiten&p[summary]=Schuurfeesten, Trekkertrek en allerlei andere gezellige bijeenkomsten vindje bij KPJ Halsteren
In addition to this i placed the open graph image tag as follows:
<meta property="og:image" content="http://www.elementalworks.nl/KPJH/images/logo.jpg" />
BUT.. the facebook debugger (https://developers.facebook.com/tools/debug) sais that the image is'nt big enough, it has to be 200x200. The image itself is 365x250 50kb.
Strange thing is that in the small preview window below the debugger the image does show.
So why doesnt it show at the moment of sharing? You cna find the page in question here: www.elementalworks.nl/KPJH
I'm using the Facebook Share Dialog (https://developers.facebook.com/docs/reference/plugins/share-links/) and the image doesn't appear. I've checked a lot of posts here in SO an other forums but couldn't find a solution
I found this site where Share Dialog works correctly: http://election.gv.my/ (They don't use meta property="og:image")
https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http%3A%2F%2Felection.gv.my%2F&p[images][0]=http%3A%2F%2Felection.gv.my%2Fassets%2Fcombined.jpg&p[title]=Malaysia+Twitter+Popularity+Index&p[summary]=Malaysia+Twitter+Popularity+Index+for+March+31%2C+2013%3A+%40anwaribrahim+21%2C+%40NajibRazak+28
If I use its image in my code, it shows:
var sharer = "https://www.facebook.com/sharer/sharer.php?s=100&p[url]=" + shareURL + "&p[images][0]=" + "http://election.gv.my/assets/combined.jpg" + "&p[title]=" + shareTitle + "&p[summary]=" + shareExcerpt;
If I use my image in its code it doesn't:
https://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://election.gv.my/&p[images][0]=http://mysite.com/app/wp-content/uploads/2013/03/poster.jpg&p[title]=Malaysia+Twitter+Popularity+Index&p[summary]=Malaysia+Twitter+Popularity+Index+for+March+31%2C+2013%3A+%40anwaribrahim+21%2C+%40NajibRazak+28
The only reason I can think of is something in the server configuration. I've checked my url (website & image) in https://developers.facebook.com/tools/debug and the results are OK, at least the same as that site
The problem in my case was image sizes generated by WordPress:
NO: 85x85, 96x54, 166x94, 170x96, 193x108, 711x400
YES: 356x200, 360x124
https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/
og:image – This is an image associated with your media. We suggest that you use an image of at least 200x200 pixels. However, bigger is better, so if you have a 1500x1500 image that you can use, please use it. We'll downsample and crop it for for people using smaller-resolution devices but will use it on a larger device. The larger this image is, the more likely it will be used when sharing stories on Facebook. (Note: image sizes must be no more than 5MB in size.)
But this doesn't explain why size 356x200 is ok but no 711x400 wich is bigger and has the same aspect ratio
Try reducing the file size: I changed from 56 to 24 and it then loaded.
Try adding a second "&" before "p[images][0]" => "&&p[images][0]"
So I'm creating an app which basically is a UIWebView that loads an HTML page, which should have images on it. The HTML page is loading fine (confirmed with a little text on the page), but then I have this code in it:
<img src="images/image_1.png">
test
Check this out:
The tag has a broken image link
But, when I tap on the link, the
image loads!
How is this happening? What kind of solution is there?
I have the images in a subfolder of resources, which I added by "Create Folder References."
Help? A note: This is on iPad, using 4.2. But that shouldn't matter, right Apple? (Also, changing it to xml <img /> type tag doesn't do anything)
The image was way too big - over 2500px wide. Resizing to 1024px fixed it. Thanks Jose Vega.
Also, Automator is a gift from the Gods when it comes to batch operations.