Riddle supports Accelerated Mobile Pages (AMP).
Want to embed your Riddle quiz into an AMP page? Riddle offers full AMP support – you’ll just need to copy 2 pieces of code into your page.
How to get the AMP embed code for your quiz
- Create your own quiz, list, or other Riddle content.
- Then go to our ‘Publish’ step and press publish to push your quiz live.
- Next up, go to the AMP section to find your embed codes.
Back on your site – you’ll need to:
1) Add the Riddle AMP Script to the <head> section of your page
<script async custom-element="amp-riddle-quiz" src="//cdn.ampproject.org/v0/amp-riddle-quiz-0.1.js"> </script>
2) Put the <amp-riddle-quiz> tag in the body of your page where you want to display the Riddle
<amp-riddle-quiz layout="responsive" width="600" height="400" data-riddle-id="140298"> </amp-riddle-quiz>
Please note that our AMP support will require you to set the height manually for your quiz embed code. Just enter the desired height into the code where it says height=”400″ in our example above. It might take a bit of trial and error to find the correct height, as that depends on the lengths of the questions and the size of your images in your Riddle.
3) Change the Riddle ID (140298 in the example above) to the ID of the Riddle you want to display.
To find your Riddle ID to the “My Riddles” screen and click on the riddle you want to use. The riddle will open in a new window. In the URL of that new window you will see a URL like this:
https://www.riddle.com/showcase/140298/personality
Just copy the number right after /showcase/ – that is your Riddle ID (in our example – it’s 140298).
AMP support with WordPress
Planning to put an AMP-enabled Riddle into your WordPress blog?
It involves an extra step for AMP support – you’ll need to install an AMP Plugin first, then configure it to serve the header script.
Our preferred AMP plug-in?
We recommend to install AMP for WP from Ahmed and Mohammed Kaludi.
[While there is an official AMP plugin from Automattic (the company behind WordPress), the plugin lacks the ability to add a header script for AMP pages – which makes it completely unusable for Riddle.]
- After installing the AMP plugin, follow the instructions and run through the installation wizzard.
- Then go to the plugin settings -> Advanced Settings
- Copy the script from 1) above into the head section (see screenshot):
- Next go to a post or page where you want to add content for AMP.
- Start the AMP Builder and scroll down to enable the Custom AMP Editor.
- Paste the Riddle code as outlined above into the custom AMP editor – but make sure to use “Text” mode and not the “Visual” editor.
- See screenshot below for an example:
Here’s a live example on our sample site Pastafun: http://pastafun.com/riddle-for-amp/amp/
And of course – if we can help with any questions about our AMP support options, just give us a shout at hello@riddle.com or on Riddle’s support chat.
******
Not a Riddle user yet? Try a free trial – no card needed.