Guides

AMP Live Blogs

This page will provide you a guide and example for the implementation of Live Blogs within your AMP pages.

Suggest Edits

Step 1: Host an HTTPS Page that Serves the Widget

To integrate Viafoura Live blog, you must host a non-AMP https page that serves the Live blog widget. The page must be on a different domain than the one that you will serve your AMP pages on. You will need to have this domain allowlisted with Viafoura, please contact us and ask for the domain to be allowlisted, along with the domain alias you wish to use for your AMP pages.

📘

Note

We recommend that you host this page on your regular domain and host your AMP pages on https://amp.[domain].com

Example AMP Viafoura Live blog page with tray:
https://amp.[domain].com/viafoura-amp-liveblog.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div class="viafoura">
            <vf-live-blog amp-widget></vf-live-blog>
        </div>
        <div class="viafoura">
            <vf-tray class="vf-amp-tray"></vf-tray>
        </div>
        <script>
            function getQueryStringParam(key) {
                const queryString = window.location.search.substring(1);
                return decodeURIComponent((queryString.match(new RegExp(key + "=([^&]*)")) || [])[1] || "");
            }

            function createMetaTag(property, content) {
                const metaTag = document.createElement("meta");
                metaTag.setAttribute("property", property);
                metaTag.setAttribute("content", content);
                document.head.appendChild(metaTag);
            }

            const containerId = getQueryStringParam("containerId");
            if (containerId) {
                createMetaTag("vf:container_id", containerId);
            }

            const path = getQueryStringParam("path");
            if (path) {
                createMetaTag("og:url", path);
            }

            function setViafouraJS() {
                const vfjs = document.createElement("script");
                vfjs.setAttribute("async", true);
                vfjs.setAttribute("src", "//cdn.viafoura.net/vf-v2.js");
                document.head.appendChild(vfjs);
            }
            setViafouraJS();

            window.vfQ = window.vfQ || [];
            window.vfQ.push(function() {
                var locked = false;
                vf.$subscribe("liveblog", "resized", function() {
                    if (!locked) {
                        locked = true;
                        setTimeout(function() {
                            locked = false;
                            const conversationsHeight = document.querySelector(".vf3-comments").clientHeight;
                            const loadMoreCommentsHeight = 100;
                            const parentIframeHeight = conversationsHeight + loadMoreCommentsHeight;
                            window.parent.postMessage({
                                sentinel: "amp",
                                type: "embed-size",
                                height: parentIframeHeight
                            }, "*");
                        }, 50);
                    }
                });
            });
        </script>
    </body>
</html>

🚧

The page that serves the widget must include the user authentication workflow

In order for users to be able to engage with Viafoura's widget, they will be required to be authenticated. Therefore the HTML page that is loading the widget must have all the necessary items to allow users to login or signup. Make sure to review the authentication integration details and enable authentication in your page.

🚧

The page that serves the widget must include the corresponding page metatags

To ensure consistency across page analytics, moderation settings, and tools that retrieve and display page details (like the Trending Articles widget), the https page that serves the conversations widget for the AMP page must also include the Viafoura required metatags, displaying the same value of the corresponding article page.

Step 2: Create an AMP page that points to the page created in Step 1

Place the amp-iframe on the page pointing to the AMP Live blog page above. The Viafoura AMP Live blog widget will parse the query string of the url to load the posts from that page.

Example AMP-iFrame:
Replace [yourContainerId] with the containerId of the page you would like to display the thread for.

<!DOCTYPE html>
<html amp lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
        <style amp-boilerplate>
            body {
                -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
                -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
                -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
                animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            }
            @-webkit-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-moz-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-ms-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @-o-keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
            @keyframes -amp-start {
                from {
                    visibility: hidden;
                }
                to {
                    visibility: visible;
                }
            }
        </style>
        <noscript>
            <style amp-boilerplate>
                body {
                    -webkit-animation: none;
                    -moz-animation: none;
                    -ms-animation: none;
                    animation: none;
                }
            </style>
        </noscript>
    </head>
    <body>
        <amp-iframe
            width="600" 
            height="400" 
            layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" 
            resizable
            src="https://amp.[domain].com/viafoura-amp-liveblog.html?containerId=[yourContainerId]&isAmpPage=true"
        >
            <div overflow placeholder></div>
        </amp-iframe>
    </body>
</html>

Next up, we shall look at an example of Community Chat integration with AMP:

Updated over 1 year ago

What’s Next