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]"
Related
For whatever reason, the image that I'm trying to use when sharing a link on FB doesn't load. The exact error that's being given is this:
Provided og:image, could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings.
I'm using an s3 bucket to hold my images, and as far as I'm concerned the bucket is public and I can load these images on any browser. I'm also adding the og:image, og:image:url, og:image:secure_url, og:image:height, og:image:width, and og:image:type to the meta tags, so as far as meta tags are concerned I think I've covered all grounds. Is there a particular setting that I should be adding? Thanks of any help
For other people who end up here, I encountered this issue temporarily. The Facebook Sharing Debugger fetches images asynchronously and can give false 404s.
I recommend scraping again a couple of times to confirm.
After some time I was able to solve the problem. It turns out, the FB Sharer doesn't accept base64 images. What I was doing was directly saving the base64 binary to S3, and because of that FB couldn't display the image.
So if someone out there is doing the same thing as I was, save your base64 images to file/directory first before uploading it to S3.
In my case, this was due to the Extension of the Image.
I changed .PNG to .JPEG and it starts working.
So please try to change your extension and then try again.
At first I convert HTML to canvas, then canvas to image and afterwards this image is drawn with canvas for cropping the initial image to get rid of extra space. After this is done, the image is sent to the server for storage and passed to FB in og:image meta tag.
$scope.facebookShared = () ->
$window.open "//www.facebook.com/sharer/sharer.php?u=" + encodeURI($location.absUrl()), "sharer", "toolbar=0,status=0,width=" + 500 + ",height=" + 500 /// this is window for share fb
height=$('.sharing').height()
html2canvas document.body,
onrendered: (canvas) ->
context = canvas.getContext('2d')
image = new Image()
image.src = canvas.toDataURL("image/png")
image.onload = ->
sharing=$('.sharing')
canvas.height = Math.round(sharing.width()/1.91)
canvas.width = sharing.width()
context=canvas.getContext('2d')
pos = sharing.parent(0).parent(0).position()
context.drawImage(this, pos.left, pos.top, sharing.width() + 20, sharing.height(),0,0,sharing.width()+20,sharing.height())
$.ajax
url: '../../save_img'
type: 'post'
beforeSend: (xhr) ->
xhr.setRequestHeader "X-CSRF-Token", $("meta[name=\"csrf-token\"]").attr("content")
return
data:
base64_image: canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "")
claim_slug: $scope.claim.slug
return false
width: $('.claim-page ').width()
height: height+115
return
I can't seem to find the right location of the settings since facebook redesigned admin panel ... screenshots appreciated , I can only change screenshots and banners but not the app icon itself
thanks
https://developers.facebook.com/apps/[your-app-id]/app-details/ -> "logo" is the way to go. If you uploaded a logo a while ago, it may look like the option to change it is not available, because your old logo isn't showing up (it's just a standard facebook image). That's because your old logo is probably too small. Upload a new logo, and your logo will change.
Info: It's not necessary to submit your app for approval first.
Update: Since "logo" is no longer listed as an option, I assume they have changed the setup form slightly...
New link:
https://developers.facebook.com/apps/[your-app_id]/app-details/.
Under the section: "Icons"...
Heres the docs
Scroll to the next section to see something which might be of interest too:
Promotional images (Cover image & Banners).
NOTE: You may have to do some image editing before uploading to meet the dimension restrictions they have in place (at the time of this post: 1024 x 1024 and size <= 5MB).
This code is processed as goku image on FB chat:
[[236823566443944]][[236823583110609]][[236823586443942]][[236823596443941]][[236823609777273]]
[[236823629777271]][[236823636443937]][[236823649777269]][[236823663110601]][[236823673110600]]
[[236823683110599]][[236823686443932]][[236823696443931]][[236823699777264]][[236823709777263]]
[[236823716443929]][[236823733110594]][[236823736443927]][[236823749777259]][[236823753110592]]
[[236823756443925]][[236823759777258]][[236823769777257]][[236823779777256]][[236823783110589]]
[[236823789777255]][[236823793110588]][[236823796443921]][[236823806443920]][[236823809777253]]
How FB creates image from this? I found the code on symbols-n-emoticons in comments below, copied&pasted into FB chat and - black magic - the image was there.
So I took your example and did some testing. If yout right click on the image in chat and look at it URL, you can find following:
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/227547_236823636443937_1841629131_n.jpg
It's one tile from the goku image. The middle part of the URL corresponds to one value in you code. So this code are actually shortcuts to images stored on FB servers, and the chat window simply replaces the code with image.
I think it could be due to latest update in FB, which allows you to attach images directly to posts.
[EDIT]
I have tried several other images and it worked for all images hosted akamaihd.net aka Facebook hosting. Just grab the secod number and past it in chat in double brackets.
The image is always resized to 16x16px, hence the code for Goku is so long, it's actually made from tiles.
I'm not using any WP cache plug ins. I've noticed that only one png out of the other pngs (and other images) I have on my WP site has a query string attached to it when I look at in Chrome dev tools. It's actually downloaded twice - with and without query string.
The other odd this is that Chrome Dev tools says that the intiator for the png with query string is jQuery. I just include jQuery from Google's CDN, so I'm not changing anything.
Any ideas to why just one of my pngs (why this one?) has a query string attached? Here's what it looks like:
<img src="http://www.mysite.com/wp-content/themes/myTheme/images/slide1Btn.png?1369071380764" alt="">
Please let me know if I haven't included enough information.
Edit
This png is a button on one of the slides I have in a slideshow. I use http://archive.slidesjs.com/ to generate the slideshow. The png images are part of the HTML markup and not generated by the script, however I did find this line in the slides.js code:
// gets image src, with cache buster
var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime();
I would like to just have the png load once and just be retrieved from the cache on reloads - like each of the pngs will do on subsequent slides in my slideshow. I'm perplexed as to why it only happens to this png.
It might either be :
some argument for a script that dynamically generates or resizes or processes the image (it does not matter that the url has a .png extension, that doesn't necessarily mean that a png file is served statically)
a "cache breaker" - or "cache buster". This can be used to prevent the browser (sometimes also the server) to get the image from a cache, and force it to get it fresh from the server.
Because in this case this looks as a timestamp (unix epoch in milliseconds), I'd bet for the later.
wordpress generates many of the images dynamically, meaning when you access the png you are calling a server page that generates the png dynamically choosing between different images or based on the query string parameters, like size for exmaple.
200px width image.
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=200&h=446&zc=1&q=100
vs
600px width image
http://mysite.com/wp-content/uploads/2013/05/Giant_water_bugs_on_plate.png&w=800&h=446&zc=1&q=100
Helle every one,
I'm currently working with a Facebook page RSS feed and I need to retrieve images on it.
the problem is that those images are just thumbnail. I would like to donwload the big one.
For exemple I have these feed : https://www.facebook.com/feeds/page.php?id=126044397444435&format=rss20
I have this image on the feed : https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/393656_257350694313804_126044397444435_712409_344887174_s.jpg
But I would like this one : https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s320x320/393656_257350694313804_126044397444435_712409_344887174_n.jpg
How can I solve this problem ?
Thanks !
Look at the URLs
https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/393656_257350694313804_126044397444435_712409_344887174_s.jpg
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s320x320/393656_257350694313804_126044397444435_712409_344887174_n.jpg
The subdomain for the large image is fbcdn-sphotos-a instead of fbcdn-photos-a, it has a s320x320 directory name inserted before the filename, and the filename is suffixed with _n instead of _s
The 320x320 is a max size, the following url returns the image at 480 px height
https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s480x480/393656_257350694313804_126044397444435_712409_344887174_n.jpg