I am using amp on my site, users are all mobile and amp. I got the popup ad. But when I add a popup to the amp page, the amp page breaks down and it gets out of circulation.
how do I solve this problem?
code in the example I used.
Thanks
<script>
var username= "***";
</script>
<script type="text/javascript" src="//POPADRESS.JS"></script>
You can't execute your own authored JavaScript on AMP pages, what you're trying to do will not work. You'll need to refactor your advertisement to use one of the approved AMP components found on the AMP components page.
Please refer to the 'How AMP Works' documentation.
JavaScript is powerful, it can modify just about every aspect of the
page, but it can also block DOM construction and delay page rendering
(see also Adding interactivity with JavaScript). To keep JavaScript
from delaying page rendering, AMP allows only asynchronous JavaScript.
AMP pages can’t include any author-written JavaScript. Instead of
using JavaScript, interactive page features are handled in custom AMP
elements. The custom AMP elements may have JavaScript under the hood,
but they’re carefully designed to make sure they don’t cause
performance degradation.
While third-party JS is allowed in iframes, it cannot block rendering.
For example, if third-party JS uses the super-bad-for-performance
document.write API, it does not block rendering the main page.
Related
I'm reading this documentation:
https://developers.facebook.com/docs/facebook-login/web/
sadly the documentation is confusing. The page has a code-generated button, which is very nice. However, the actual code the page uses is completely different -
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
I don't understand which one I'm meant to use, or how to call a js method on logging in if I use the code generated sample:
<div class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="false" data-auto-logout-link="false"></div>
The code sample calls "onlogin", but it is some sort of weird... facebook thing. Has anyone done login (and, honestly, with facebook's money you'd think they could write documentation! grrr!)
They should both work, they are just different versions of writing the same thing. The latter is the HTML5 compatible version.
And the onlogin attribute works for both; it doesn’t even have to be written as data-onlogin as the rest of the parameters in the HTML5 version. I’m pretty sure Facebook parses that attribute itself (browsers don’t know a native login event), but guess they simply chose that attribute name to have it be kind of consistent with “traditional” HTML event handler attributes such as onclick etc.
I have implemented AMP successfully for my webpages and google started indexing it, which I came to know via WebMaster tool. I am facing some issues which is present and disappears in short span of time.
Issue logged are:
User authored JavaScript found on page
The pages doesn't contain any script tags except schema.
This error is showing for few pages from 120 pages instead of following same
template. Below is the image link:
Have some more query:
I have observe different amp urls getting redirected to its original page when the same amp url is being used in Web Browser.
Is Google taking care of it or its on us to do the redirection?
I am planning to implement the sign in and share buttons on my web pages which will be using javascript. But if I do so, I do get validation error. So what is the right approach.
Can anyone please help me on this?
Please ensure that all script tags are of type application/ld+json. There should be no executable code in these script tags.
Redirection is something that you must be doing on your end. Google doesn't do any sort of redirection from AMP to non-amp pages if the URL is hit directly. In fact that URL schema that Google uses in their carousel is entirely their own, and just includes the path to your page inside it. E.g. https://cdn.ampproject.org/v/www.yoursitehere.com/path/to/article.html
Social sharing using Javascript inserted in the page is not allowed, as no Javascript is allowed. If you want to use social sharing, use a non-javascript implemention, or try out the amp-social-share
thanks for the response. As per the query which I asked
Please ensure that all script tags are of type application/ld+json. There should be no executable code in these script tags - I am not using any Script as of now except amp only
Redirection is something that you must be doing on your end. Google doesn't do any sort of redirection from AMP to non-amp pages if the URL is hit directly. In fact that URL schema that Google uses in their carousel is entirely their own, and just includes the path to your page inside it. E.g. https://cdn.ampproject.org/v/www.yoursitehere.com/path/to/article.html -
Understood
Social sharing using Javascript inserted in the page is not allowed, as no Javascript is allowed. If you want to use social sharing, use a non-javascript implementation, or try out the amp-social-share - Implemented Social Share and its working fine
Can we implement AMP for eCommerce sites where a lot of JavaScript, forms, plugins can be included? As of my knowledge AMP wants to keep it simple and thus restrict as many JavaScript, form tag is not valid only. So is there any chance we can implement AMP on eCommerce sites.
I'm creating a website using multiple views.
The tag and the tags of the page get changed through a a $rootScope variable.
so I have something like
<html>
<head>
<title ng-bind="page_title"></title>
<meta property="og:title" content="{{page_title}}">
</head>
Whenever each view get loaded on the website, the page_title variable changes and the title and the og:title tags get updated (everything works as expected).
The problem is that I need, on some views to load a facebook, a google+ and a twitter button.
I can display them properly but if I click on each them the page title appear to be something like:
{{page_title}}
I've tried to delay the execution of the scripts of each button using setTimeOut but to no good.
But the scripts just read whatever is written, they don't parse the page_title.
Does anyone know a workaround to this?
Thank you
This can't be done using javascript. Some people think that Facebook is reading what's currently on the page. It's not. It makes a separate request to your server using the same url (from window.location.href) using it's Scraper, and the Facebook Scraper does not run javascript. That's why you get {{page_title}} when clicking on something like a Facebook share button. Your content will have to be generated by the server so when Facebook goes to hit the url it gets the content it needs up front without the need for javascript. You can tackle the server side rendering in a fews ways.
You can allow your server side technology to render the content.
You can use the PhantomJS approach https://github.com/steeve/angular-seo.
There's also a possibility that you can re-render Facebook widgets. Use their parse method:
FB.XFBML.parse();
after your angular stuff has completed. It's not working for my share button (yet!!), but I tested it on likes, and it's cool. Basically it re-scans the DOM and renders the Facebook widgets. You can also pass it a single element, something like this directive:
'use strict';
angular.module('ngApp')
.directive("fbLike", function($rootScope) {
return function (scope, iElement, iAttrs) {
if (FB && scope.$last) {
FB.XFBML.parse(iElement[0]);
}
};
});
This snippet would rescan the DOM for html5 facebook fb-like widgets when creating the last element in angular repeater.
I have a pure GWT based website and as we are aware the search engines cannot index pure gwt based websites. Thus, I have created an alternate web page as shown below which is stored as a separate html in the war folder. The purpose of this webpage is to enlist and index details regarding my website. This page is never displayed on my website, but instead is meant only for indexing. The url leading to this web page is part of the Sitemaps.xml. Thus I am assuming that the below html will be indexed because it's a part of Sitemaps. So here are my questions:
Will the content I give in the div with id "crawler" be indexed given the fact that it is scheduled for removal onload and that the browser is redirected to another url on load?
Is there a better way to get the content indexed for a pure GWT website which does not have any html based user interface?
I can also have urls that will invoke a servlet and return a response that is meant for indexing. But then the same url will be displayed in search results, which is not useful. In other words, I am trying to figure out a way in which the content gets indexed, but when the user clicks the search result he should be redirected to the home page instead of showing the indexed content.
<head>
<script>
function load(){
element = document.getElementById("crawler");
element.parentNode.removeChild(element);
window.location.href='http://<mysite>.com';
}
</script>
</head>
<body onLoad='load()'>
<div id="crawler">
<CONTENT TO BE INDEXED>......
</div>
</body>
As you can see here the div (crawler) that contains all the content that is meant for indexing, is removed as soon as the body loads. Apart from this the page also redirects to the home page of the site on load.
The crawler will read in the entire contents of the page for indexing, so it will have no trouble picking up the portion within the div. The onload is not executed by the crawler prior to reading the page.
A method I have used in the past was to generate static html versions of the pages and reference these through the sitemap.xml. Users landing on the html page would then be directed to the equivalent dynamic page when they click on a link (ie: Buy or Specifications). This worked well for search engine placement with many pages appearing in the top ten.
The best solution to notify the search engines about an undiscoverable website's content is to create a HTML website (as you did). If you create redirects based on the crawler, search engines will not love you. I think you have to fill out your HTML with content with relevant information and add
<link rel="canonical" href="https://gwtsite.com/exact_url"/>
tag to your website's head section. This will notify the search engines that the other site has to appear in the SERP-s instead of the HTML one.
I implemented facebook comments across a legacy, custom CMS. I used the XFBML implementation. Everything works as expected except when clicking the links back to the article page from a commenter's facebook feed the comment box does not show any comments. The link is of this form:
{Article URL}?fb_comment_id={comment_id_string}
And if I remove the comment parameter and only go to the article url the comment box renders correctly with the comment and all other comments on the article. So, it's some issue with the fb_comment_id parameter. One weird thing about how I had to implement the comments is, because of how the routing on the site works, I could not use server side code to set the the URL parameter in the <fb:comments> object. So I had to use this jquery code in the <head>:
<script>
// assign current page to comments url
$(document).ready(function() {
$('fb\\:comments').each(function(){
$(this).attr('href', window.location);
});
});
</script>
And used this for the actual <fb:comments> code:
<fb:comments href="{site's root URL}" num_posts="8" width="570"></fb:comments>
So, I figure doing this client side may be causing the issue. Not doing this server side is a hard constraint though, and everything else works so I'm hopeful there may be some way to make this work. If making the comment link work correctly is impossible, a reasonable hack would be to rewrite the link in the facebook feed so that it just points to the article url without adding the comment parameter. Any suggestions? Thanks!
NOTE: I've also tried using the html5 comments implementation and there is the same issue.;
Once facebook has rendered the iframe based upon your fb:comments tag, does it have the correct url? I am thinking it does not. You may have to call FB.XFBML.parse() after you inject the complete