The object debugger picks up the og:image
Sharer.php does not show the og:image (see screenshot)
If I refresh the sharer.php browser window, the image is showed. (see screenshot)
The image exists when I open sharer.php.
The exact same code worked a month ago, I am sure of this.
To scrape your new page before showing the sharer.php popup, just do the following call using javascript on the client side as soon as the page you want to cache exists:
function onResultPageGenerated()
{
var u = "http://example.com/result.php?id=12345";
$.post(
'https://graph.facebook.com',
{
id:u,
scrape: true
},
function(response){
alert("SCRAPED: " + response);
}
);
}
Related
I have asked a question in Hide div in a Custom Tab opened from a Trusted Web Activity
Let me explain a little bit more.
My twa website is https://www.monsoonmalabar.com/
In the above site there is a link to external site which is https://keralapsc.monsoonmalabar.com/ when clicking this link in twa app, this link opens in in-app browser. In that in-app browser(website: https://keralapsc.monsoonmalabar.com) there is a button floats left side with link https://play.google.com/store/apps/details?id=com.monsoonmalabar.app.
I want to hide that link(button) when user using twa(in-app browser). According to your suggestion in the stackoverflow site, I added the external link as https://keralapsc.monsoonmalabar.com/?hideDiv=true
And added a code in external site as
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
if(url.searchParams.get("hideDiv")) {
document.write('<div></div>');
} else {
document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
}
</script>
Now what happens is during the first visit from twa(which has hideDive=true) the button disappears. But when I continue to surf external site by going to another page in that external site button shows again. Maybe I didn't understand you correctly. Can you please explain a little bit more with codes. I am new to coding. My twa app is https://play.google.com/store/apps/details?id=com.monsoonmalabar.app
Below is the screenshot of external link marked.
The solution is to save the hideDiv information into the sessionStorage, so you can load the information from there when navigating to other pages.
The code would look something like this:
<script>
// Set `hideDiv` to `true` on sessionStorage when we receive the `hideDiv` parameter.
const url = new URL(window.location.href);
if(url.searchParams.get('hideDiv')) {
sessionStorage.setItem('hideDiv', true);
}
// sessionStorage is persisted across page loads, but cleared if the tab is closed and
// a new navigation session starts. We check if it's been set to `true` in this session.
if(sessionStorage.getItem('hideDiv')) {
document.write('<div></div>');
} else {
document.write('<div id="play_button"><a class="btn_openinapp" data-attr="btn_openinapp" href="https://play.google.com/store/apps/details?id=com.monsoonmalabar.app" style="left: 0px;"><i class="fab fa-google-play"></i></a></div>');
}
</script>
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 am trying to take a screenshot of a div on my webpage using html2canvas.
In the html2canvas documentation it is stated that:
The script doesn't render plugin content such as Flash or Java applets. It doesn't render iframe content either, unless the content resides under the same origin.
My div contains same-origin iframes, but the iframes dont appear in the screenshot.
My script:
$('#savetopdf').click(function () {
html2canvas($('#dashboard'), {
"logging": true,
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
});
Unfortunately this is not implemented, any more.
I had the same issue and submitted it as a bug/feature request.
https://github.com/niklasvh/html2canvas/issues/376
The owner of the project stated:
niklasvh
There is currently no support for rendering iframe's even if the reside under same origin.
The goal :
I would like to have a share button in my fancybox that share the image I'm looking at with the correct image name in the Facebook sharer. I would like that when a user click on this in Facebook, he arrives on an opened Fancybox with the correct image.
The problem :
I have a gallery with Jquery FancyBox (http://fancyapps.com/fancybox/). I added a share button with the code I find in this fiddle (http://jsfiddle.net/G5TC3/).
My share button works, but get the meta og from the site and I want to have the og:image from the image I'm looking at.
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
beforeShow: function () {
if (this.title) {
// Add FaceBook like button
this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
}
},
helpers : {
title : {
type: 'inside'
}
}
});
For the user who clicks on my link and arrives on an opened Facybox with the correct image I have no idea how to do that and if it's possible.
What I know:
I know that I have to have uniques URL for each images and I think I have it. ex from my site:
www.myURL.com/images/gallery/myimages_1.jpg
www.myURL.com/images/gallery/myimages_2.jpg
Is it correct?
I think I have to change the "this.href" in the sharer by the image url. First is it correct? And second (sorry I'm new in javascript) how can I do that?
I hope somebody could help me. Sorry for my English I'm trying to write my best English :)
If you need more information please do not hesitate.
Thanks
[EDIT]:
I add this script on the gallery page
$(function()
{
$('.thumbs').click(function()
{
$tempImgName = $(this).attr('id');
$tempUrl = this.href + '/images/thumbs/' + $tempImgName;
$meta = document.getElementById('facebook');
$meta.setAttribute("content",$tempUrl);
});
});
So when I click on a thumbsnail (with the class .thumbs) I get the image URL and I change the meta (with the facebook Id). It works but I think Facebook check the meta when the page load so how can I force Facebook to recheck my meta to take the good thumbs to share?
og:image cannot change by url. You need to give different share urls for different images.
For example :-
www.myURL.com/?pic=img1
www.myURL.com/?pic=img2 etc.
And a server side language ( like php ) can read the "pic" GET argument and change the og:image.
I have added a website to the iOS home screen. If a load open the website from the iOS home screen, it seem to be always loading a cached page. Even if I updated the page or delete the page entirely, it still load the original version.
It will load the updated page if I open the site directly from iOS Safari instead of clicking the icon on the home screen.
The site is hosted on Apache running Ubuntu 11.10.
I have added following inside
and added
in attempt to force it to load the updated page.
I have also tried clear the cache and cookie and history from iOS Safari setting and also rebooted the ipad and nothing seem to work.
Please help~!
This should do it, though it will result in double-loading of your page in instances where it is not initially loaded from a cached copy.
<script>
var url = window.location.href;
if (url.indexOf('rnd=') == -1) {
url = (url.indexOf("?") == -1 ? url + "?rnd=" : url + "&rnd=") + Math.random();
window.location.href = url;
}
</script>
So basically you would add http://mysite.com/myCoolPage.html to the iOS home screen, and then whenever the page is loaded in the browser it will redirect to http://mysite.com/myCoolPage.html?rnd=xxxxxxx, effectively preventing it from being cached.