When I try to share any link on my site with facebook sharer.php, I get a blank page
I want to share
http://sportmenow.com/bar.php?id=10
with
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsportmenow.com%2Fbar.php%3Fid%3D10
But this sends me to a blank page (firefox and chrome)
as does simply
https://www.facebook.com/sharer/sharer.php?u=sportmenow.com
Is this because of some issue with the site hosting? It is accessible to the web...
I needed to add facebooks OG tags. I guess this is a relatively new requirement? I inherited this site recently, so I was not present when it was implemented first, but I hear it was working.
How did I infer this
Step 1 - I have just discovered the Facebook debugger
this page suggests that there is something wrong with the formating of my html or something in that area, and it is possible that the critical error is the one causing this issue.
There is also wave.com which also performs such checks, but not sure if they are the same errors.
Step 2- Critical Error Linting URL: An internal error occurred while linting the URL and others kept suggesting the og tags which led me to try it out. Adding a og:image tag fixed it.
Related
I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps
So, on an android tablet I'm getting a 404() for site/apple-touch-icon.png. Which, the 404 makes sense because no such file exists. But what's more, that file is referenced no where in the markup. I understand that apparently this icon can be automatically sought out depending on the inclusion of certain mobile-related META tags, but no such tags are anywhere in the code either. With the exception of the title, description, and keyword tags the only meta tag in said code is a
<meta name='viewport' content="width=1000">
and from what I've found, this wouldn't cause this 404.
Additionally, the only time said 404 seems to occur is when the user 'logs in.' The user can log in from any page on the site, but navigating such pages normally causes no problems. The login flow takes the user to a designated url, performs validation etc. and then redirects the user back to wherever they came from. No meta tags are output prior to the redirect. But somewhere in this flow, the tablet's browser believes it needs to seek out the 'apple-touch-icon.png' file.
Does anyone have any ideas as to what might be the culprit? Is it the result of a redirect without any output? If so, how might I discourage the client from behaving as such? I'm just at a loss trying to figure out what's causing it.
In case someone thinks it relevant, the site is built with codeigniter, and the redirect is using their core method. Thanks very much for any help.
EDIT
To clarify, because I realize this was written poorly (my bad), the tablet is NOT getting a RESOURCE 404. The tablet's browser is actually navigating to the url of the non-existent file. The result is a dead page.
Apple devices make a request to apple-touch-icon or apple-touch-icon-precomposed.png to use that image as a bookmark for your site, similar to how desktop browsers request favicon.png.
Presumably the android devices are just copying the IOS behaviour as they are hoping an icon will be available in that location.
I'm seeing requests for this image, plus apple-touch-icon-precomposed.png too, in my Apache http log.
Obviously, I don't carry any apple content on my site. It's probably the result of either someone's client or their carrier botching an ad injection when they visit my site. Favicon requests would be .ico files. I'm thinking of having some fun and putting goatse up with those image names, lol.
We're a website completely written in PHP, we use facebook metatags since we provide facebook sharing, liking, etc...
problem is when we share a link from our site to facebook, it shows the picture correctly, however trying to reshare the same link from another user, removes the picture and shows the link only.
Further troubleshooting using the FB debug tool shows below error message:
Unable to download og:image: The image referenced by the url of og:image tag could not be downloaded.
The weird thing is that the image is already see and accessible in the debugger!!
A sample page:
http://fbcomics.com/home/index/92/date/1462
Debugger for it:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Ffbcomics.com%2Fhome%2Findex%2F92%2Fdate%2F1462
Your cooperation is highly appreciated.
I think that you probably need to urlencode() the url value going into the content attribute of your og:image meta tag.
This might be related to a recent Facebook bug. https://developers.facebook.com/bugs/239522122851150
Issue was solved by itself. It seems that Facebook needs sometime (weeks I think) to store the page information including the picture using its crawlers.
If you face this, most probably you'll need to wait for sometime before sharing your new pages.
Thanks,
My app is loading a nested version of facebook inside of facebook. Its only doing this when you click on the App Bookmark, or invitation sent to users.
Please see the link, you will see it immediately (look at the header)
http://apps.facebook.com/passparcelapp/?fb_source=bookmark_apps&ref=bookmarks&count=0&fb_bmpos=1_0
I'm racking my brain to figure out why this is happening.
Please help.
Your code has two "fb-root" divs (which will mess things up) and two fb.init()s which will also mess things up.
But the main problem is probably because you also try to load jQuery (as other libraries) twice - once near the bottom of the body, once in the header - this is leading to JavaScript errors that will cause your redirect. The timings of the load will impact the behaviour, which is why you get differences on local and live - and it may randomly change again.
You also have outside the that shouldn't be there.
You'll need to seriously tidy the code up first - then it will hopefully just work. But right now, all bets of off!
I have my site and it looks great on FF, SF, IE8 but on google chrome it shows a blank page, but if you click on view source, it is there !!
on js console I got "Failed to load resource".
Also I have the same site on my localhost and it works great on chrome !!
My site: http://grupooak.com
take a look on chrome and if you know how to fix it , or a tool to debug it and find the issue lmk :)
Thanks !!
btw the site was developed on php (akelos framework)
Sometimes, if you try several times you can get the page, but it gets stock if you click on any link
You need to make sure the DOM is valid, as your html seems messy I would advise you to fix the following errors:
http://validator.w3.org/check?uri=http://grupooak.com/app/%3Fak%3D/account/sign_in/&charset=(detect+automatically)&doctype=Inline&group=0
Just a thought but try loading the page without any javascript files, and if the page loads, add one back in a t a time testing if it still loads, when you add the javascript back in and the page fails to load, let us know what that file is.
Its could be one of the following:
Your server is failing to respond to the call, unlikely
there is a memory leak in the javascript files, causing the brows to focus on the file which does not continue to load the file.
Reasons for this is if you go to the url: view-source:http://grupooak.com/app/?ak=/account/sign_in/ in Google Chrome, you will see the whole response, meaning that it is something that is loaded into the browser that's the issue.
If you inspect the element of the page you will see that it stops loading loading the page after the first javascript include, try UPDATING Your Libraries versions.
Have you tried disabling caching and/or output encoding?
Something similar happened to me before, and it was related to the Mime type.
If that's the case, take a look at this article: http://www.dyeager.org/post/2009/01/php-xhtml-mime-type-caching
maybe fix this tag.
<img style="width: 95px; height: 113px;" src="/app/images/homepage10.jpg"
also look at the developer tools in chrome they will point you to this error
/app/?ak=/account/sign_in/ Failed to load resource
info about developer tools
http://code.google.com/chrome/devtools/docs/overview.html
First of all you should have a look at the W3C's HTML validator output, correct all of the errors, and try again. I guess that it will solve your issues with Chrome.
When I inspect the computed styles in chrome, the html element's height is 0. This might explain why the page is blank.
It's your rotator script. The first argument must be a beforeLoad event object.