http://fb://profile/profile-id violates AMP html policies and has led to Google de-indexing all of my web pages. How can I open my Facebook link on Facebook app when a user click Facebook icon on my site's footer using another way? I am using AMP version for mobile.
Thanks in advance
What error messages do you get after running AMP validation?
Open your page in your browser.
Add "#development=1" to the URL, for example, http://localhost:8000/released.amp.html#development=1.
Open the Chrome DevTools console and check for validation errors.
One problem could be the protocol, use https. After updating the protocol and running validation, do you have any errors?
Related
My website(http://www.only4laugh.com) is not WordPress based, I use JavaScript Framework (ReactJS) to build my website, on connecting your website step google provide code to put in website header which is
<script data-ad-client="ca-pub-8461898881815761" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
which I pasted on my website but Adsense still showing me Error
"Code is missing or incomplete"
Well I need to use Nextjs for it using next/head solve my problem. Nextjs allow to render on serverSide before I was using React-Helmet which is causing issues, it showing metatags on header but not showing on browser first snapshot so I after replacing react-helmet to next/head it fix my issues.
Attempting to load the Facebook MessengerExtensions appears not to work when using the in-browser experience for Facebook messenger (as opposed to the native apps on iOS or Android). When I interact with my bot's persistent menu to open a webview (that is trying to use MessengerExtensions), I get this error in the browser console of a newly opened tab:
Messenger Extensions are not enabled - could be "messenger_extensions" was not set on a url, the domain was not whitelisted or this is an outdated version of Messenger client
I have the impression that MessengerExtensions is simply not supported for the in-browser experience but have a couple of questions:
Can someone find where in the docs this lack of support is stated (because I've obviously missed it if it's there...)?
If this is supported somehow, suggestions for what I might be doing wrong? (I have confirmed that my persistent menu button has messenger_extensions: true and my web_url is whitelisted...)
Is there some kind of workaround (not using MessengerExtensions) for the webview opened in the browser to get the page-scoped user Id (PSUID) for the user interacting with the bot?
For a button generated with the Send API I could conceivably append the PSUID to the URL being opened as a query param (not sure of security considerations on that)
For the persistent menu the web_url of the button action is NOT dynamic (it's configured ahead of time) so I'm unsure how this URL when opened from the browser-based messenger interface is supposed to figure out what user opened it. Thoughts/Ideas?
I've just tried it on the chrome with facebook api version 2.10, and it works. When I clicked on the button, I got a "lightbox" looking window that opened on top of the messenger, and all the proper callbacks are called in javascript.
this is my button json:
{
type: 'web_url',
title: <title>,
url: <url>,
messenger_extensions: true,
fallback_url: <url>,
webview_height_ratio: 'tall'
}
these are a few things that I did:
the button spec should contain messenger_extensions: true
facebook whitelisted_domains doesn't do subdomains, so make sure you whitelist the entire url before the parameters.
fallback_url should be whitelisted as well.
I have the same problem like asked here: Facebook messenger checkbox plugin is hidden
I tried the implementation of the Facebook Checkbox Plugin according to Facebooks documentation but it won't show on my VM in my Company.
The Facebook SDK Implementation works fine, I tried the "Share" and "Like"-Button, which show up correct.
I have a Facbook Page which has public access and a Messenger APP in DEV-mode. The "Send-API" from Facebook works correct too: I am able to send message to myself as administrator from my Webpage on my development VM.
Following Steps are done: use a random user_ref on every request, set my page on the whitelist, use "https", visit my page FB-loggedIN and FB-loggedOut
But the result ends in Markup and Log-Infos like this screen:
See FF DeveloperTools Markup Screenshot for current state
According to this I visited a page given as origin where the Plugin should work (see first link in my question) - but there the plugins' HTML is the same like mine.
So is there a general problem on Facebooks' site or is there quite more necessary, to get this plugin running? Could it be a problem with self-signed certificate on my VM?
At the moment I don't want to notify or login any user. All I want is that the checkbox is shown.
Pherhaps anyone has an idea or the same experiences :)
Additional Info: the console shows following message
fb:messenger_checkbox failed to resize in 45s
after some fiddling we found out that a registered webhook is required (even if you dont consume the events) to make the messenger checkbox plugin render properly.
I'm developing website with a lot of HTML5 and CSS3 features. I'm also using iframe to embed several content on my website. It works fine if I open it using Chrome/Firefox/Safari mobile browser. However, if I share on facebook (post/page) and I opened it up with Facebook application with Facebook Internal Browser, my website is messed up.
Is there any tools or way to debug on Facebook Browser? Thanks.
This is how you can do the debugging yourself. It's painful, but the only way I've come across so far.
tl;dr Get the Facebook App loading a page on your local server so you can iterate quickly. Then print debug statements directly to the page until you figure out what is going on.
Get a link to a page on your local server that you can access on your mobile device (test in mobile safari that it works). See this to find out your local IP address How do you access a website running on localhost from iPhone browser. It will look something like this
http://192.xxx.1.127:3000/facebook-test
Post that link on your Facebook page (you can make it private so your friends aren't all like WTF?)
Click the posted link in the Facebook mobile App and it will open up in Facebook's mobile browser
Since you don't have a console, you basically need to print debug statements directly to the page so it is visible. Put debug statements all over your code. If your problems are primarily related to CSS, then you can iteratively comment out stuff until you've found the issue(s) or print the relevant CSS attributes using JavaScript. Eg something like (using JQuery)
function debug(str){$('body').append("<br>"+str);}
Quite possibly the most painful part. The Facebook browser caches very aggressively. If you are making changes and nothing has happened, it's because the content is cached. You can sometimes resolve this by updating the URLs, eg /facebook-test-1, /facebook-test-2, or adding dummy parameters eg /facebook-test?dummy=1. But if the changes are in external css or js sheets it sometimes will still cache. To 100% clear the cache, delete the Facebook App from your mobile device and reinstall.
The internal browser the Facebook app uses is essentially a uiWebView. Paul Irish has made a simple iOS app that lets you load any URL into a uiWebView which you then can debug using Safari's Developer Tools.
https://github.com/paulirish/iOS-WebView-App
I found a way how to debug it easier. You will need to install the Ghostlab app (You have a 7-day free trial there, however it's totally worth paying for).
In Ghostlab, add the website address (or a localhost address) you want to debug and start the session.
Ghostlab will generate a link for access.
Copy that link and post it on Facebook (as a private post)
Open the link on mobile and that's it! Ghostlab will identify you once you open that link, and will allow you to debug the page.
For debugging, you will have all the same tools as in the Chrome devtools (how cool is that!). For example, you can tweak CSS and see the changes applied live.
If you want to debug a possible error, you can try to catch it and display it.
Put this at the very top of your code:
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert('Script Error: See Browser Console for Detail');
} else {
var message = [
'Message: ' + msg,
'URL: ' + url,
'Line: ' + lineNo,
'Column: ' + columnNo,
'Error object: ' + JSON.stringify(error)
].join(' - ');
alert(message);
}
}
(Source: MDN)
This will catch and alert your errors.
Share a link on Facebook (privately), or send yourself a message on Facebook Messenger (easier). To break the cache, create a new URL every time, e.g. by appending a random string to the URL.
Follow the link and see if you can find any errors.
With help of ngrok create temporary http & https adress instead of your ordinary localhost:3000(or other port) and you could run your app on any devices. It is super easy to use.
and as it was written above all other useful information you should write somewhere inside div element (in case of React I recommend to put onClick on that div with force update or other function for getting info, sometimes it helps because JS in FB could be executed erlier than your information appears). Keep in mind that alerts are not reliable, sometimes they are blocked
bonus from ngrok that in console you will see which files was
requested and response code (it will replace lack of network tab)
and about iFrame.If you use it on other domain and you rely on cookies - you should know that facebook in-app browser blocks 3rd party cookies
test on Android and iOS separately because technicaly they use different browsers
It looks like a recent Chrome update broke this by tightening mixed content (https/http) security policies, and I read that Firefox plans to do this too.
Here's the issue:
Say I set the Secure Canvas URL of my app to https://themediadudes.com/httpstest/
That page contains only a link to Google:
Google
When I view the app on Facebook and click the link, nothing happens. An error appears in the console:
[blocked] The page at https://apps.facebook.com/myappname/ ran insecure
content from http://www.google.com/.
I understand that having insecure scripts/stylesheets etc. on an https page isn't allowed, but a simple link to a different website shouldn't be blocked right?. I assume Facebook is running some scripts which do something with the page before sending the user there? Which causes the error.
If I set the target of the link to _top or _blank it works.
Ideally I want to be able to use a javascript window.location to send the user to this insecure URL, or header('Location: blah'); in PHP. But neither of those work either. And it looks like this is a bigger problem than that if even a simple link to an insecure URL doesn't work.
I thought it may be caused by whatever makes the 'fluid' canvas width and canvas height settings work. But I tried setting both width and height to fixed and the problem still happens.
Does anybody have a solution or workaround, or can anybody at least shed some more light on this?
Thanks
I've been struggling with a similar issue and the answer seems to be that it is not possible at all to reference any non-https resources from within your page tab app. Of course if a google link is all you require then that is simply resolved (as google has a https version of course) but referencing external non-https sites will always turn up this warning/block in chrome
Additionally, I should add that I have noticed that the 'page tab URL' section requires a url to a particular page, whereas the 'canvas URL' needs to link to a directory. This does not seem to be documented and will also give the insecure content message in chrome and prevent the page tab app from loading