If you're using a page feature and this feature does not load or does not show up, be sure that you imported it in the head. AMP has plugins at the top of the page, which must be imported in order for certain elements to work. An example would be let's say you want to embed a Facebook posts. In order to embed it to a certain page, first you'll have to import the facebook script in the head of the page.
<head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <!--Import your scripts here--> <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script> <!--Import your scripts above this--> <!--AMP HTML files require a canonical link pointing to the regular HTML. If no HTML version exists, it should point to itself.--> <link rel="canonical" href="index.html"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i">
As you can see, we've added the facebook custom element at the top of the page, right after the first script async. This is essential for all pages.
A good way to make sure you're importing all plugins is to check the head of the pages we've provided and see if there is a script there except the default ones. If there is one, be sure to include it in your page in order for all your elements to work.
The structure of our page is very simple and as follows
The header is comprised by a header logo that you can find in the css by searching for header-logo and a contact icon. The other icon that activates the menus is explained in the Navigation chapter.
AMP is an evergrowing platform, and at the moment, provides a few scripts that are absolutely awesome and work properly wiht our product on
1. Installing a Script
After you find a script you like and want to use, you'll have to import the provided JS file in the head of the item where the scripts are present, only then can you use the provided HTML structures. Not doing so will result in a failed validation
2. Using AMP-Features Pages
All the components we used can be found on ampbyexample.com and much more, with exact tutorials and examples. Be sure to check that page out and check out the modules we used.
Google AMP does have a new way of adding images, you can find them all over our item as <amp-img>. We could explain them ourselves, but you can find a brilliantly easy and example filed solution over Google AMP's page
A secondary class is a class that gets added to an element to give it more flexibility.
Why are these important?
Google AMP is all about reusing elements and using as little style as possible to allow us to keep the size small .Therefore, secondary classes for background colors, margins and borders makes the style as small as possible, while not enlarging the style either
Available Secondary Classes
Every page in the product is comprised of simple, copy paste block elements. Open them up and look inside them, if there is anything you are having trouble creating we will gladly assist, but most of our code is beautifully easy to read and it's 100% copy paste-able.
The contact form is 100% tested, and fully valid. Therefore, if you're experiencing any issue with it's related to the following
1. Be sure your page is AMP Valid! If it's not valid the contact form will not send messages
2. Be sure to contact your hosting provider and REQUEST that they set your PHP settings to this
<IfModule mod_security.c> SecFilterEngine Off SecFilterScanPOST Off </IfModule>
Without these settings the contact form WILL NOT send messages
Configurating contact form.
The form has a attribute action-xhr="//ENTER_PARAMETER.php" you must replace the ENTER_PARAMETER with the exact location of your contact form php file. ( the one from the PHP folder ) therefore the ENTER_PAREMTER will be something like this
Configuring PHP/Contact.php file
Inside the pack you'll find a PHP folder and in it there is a contact.php file. Open that item and replace the domain name on line 4 with the domain where the site will be hosted. Do the same thing on line 8.
After doing so, replace the email address on line 22 with your email address and you are good to go!