Favorite Button
Introduction
This sample demonstrates how to implement a favorite/like/bookmark button in AMP. Our implementation:
- shows the correct icon based on whether the user already liked an item or not. This works if the AMP is served from an AMP Cache or the original origin.
- shows a placeholder while the current state is loaded asynchronously.
- falls back to the original state and displays an error message if the request fails, for example when the user is offline.
Setup
We use the amp-list component to dynamically render the initial state of the favorite button.
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
The mustache component is required by amp-list.
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
We need amp-form to submit the favorite request.