AMP instagram embed code breaks the footer

  • Resolved vysyarajujayasree

    (@vysyarajujayasree)


    5 years, 6 months ago

    Hi,

    When i paste the below instagram embed code with blockquotes in wordpress editor, the amp post article footer was broken. Please let me know how to fix this or do let me know if there any solutions available for it.

    <div style=”padding:16px;”> <div style=” display: flex; flex-direction: row; align-items: center;”> <div style=”background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;”></div> <div style=”display: flex; flex-direction: column; flex-grow: 1; justify-content: center;”> <div style=” background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;”></div> <div style=” background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;”></div></div></div><div style=”padding: 19% 0;”></div> <div style=”display:block; height:50px; margin:0 auto 12px; width:50px;”><svg width=”50px” height=”50px” viewBox=”0 0 60 60″ version=”1.1″ xmlns=”https://www.w3.org/2000/svg&#8221; xmlns:xlink=”https://www.w3.org/1999/xlink”><g stroke=”none” stroke-width=”1″ fill=”none” fill-rule=”evenodd”><g transform=”translate(-511.000000, -20.000000)” fill=”#000000″><g><path d=”M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631″></path></g></g></g></svg></div><div style=”padding-top: 8px;”> <div style=” color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;”> View this post on Instagram</div></div><div style=”padding: 12.5% 0;”></div> <div style=”display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;”><div> <div style=”background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);”></div> <div style=”background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;”></div> <div style=”background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);”></div></div><div style=”margin-left: 8px;”> <div style=” background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;”></div> <div style=” width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)”></div></div><div style=”margin-left: auto;”> <div style=” width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);”></div> <div style=” background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);”></div> <div style=” width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);”></div></div></div> <div style=”display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;”> <div style=” background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;”></div> <div style=” background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;”></div></div><p style=” color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;”>A post shared by Galaxy Lollywood (@galaxylollywood) on <time style=” font-family:Arial,sans-serif; font-size:14px; line-height:17px;” datetime=”2020-10-19T16:11:06+00:00″>Oct 19, 2020 at 9:11am PDT</time></p></div>

    <script async src=”//www.instagram.com/embed.js”></script>

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support Milind More

    (@milindmore22)

    5 years, 6 months ago

    If you’d like to share the full embed code you used in doc file (permission anyone with the link ) From my testing I was able to get an Instagram feed working by navigating to that same post on Instagram, pressing the share button and copying the embed code. See here a description.

    I pasted that embed code into a customHTML block and it renders on both AMP and non AMP URLs from my testing. Can you try the same steps and share whether the same issue arises?

    Thread Starter vysyarajujayasree

    (@vysyarajujayasree)

    5 years, 6 months ago

    Hi,

    I copied embed code from instagram and pasted in wordpress classic editor but it breaks the footer of amp articles Please let me know how to fix this or do let me know if there any solutions available for it.

    I followed as mentioned above steps and copied embed code, Please check this link for copy sample embed code or download here once click on the link download the doc

    https://www.arre.co.in/pop-culture/money-heist-gets-a-pakistani-update-2020-we-cant-handle-more-surprises/amp/

    Plugin Support Milind More

    (@milindmore22)

    5 years, 6 months ago

    Hello @vysyarajujayasree,

    I tried this code on my local and on test site with AMP legacy reader mode and seems working fine.

    Also just to confirm it’s not conflicting with other embeds on the page, can you please create a post with just Instagram embed ( no need to publish just save as draft and check footer issue )

    please share your site health info along with debug log using this form so we can assist you better.

    Thread Starter vysyarajujayasree

    (@vysyarajujayasree)

    5 years, 6 months ago

    Hi,

    I created single embed code post article but the footer breaks in that article. Please check below link for instagram embed code in staging server.
    https://qa.arre.co.in/anthropology/test-single-instagram-embed-code/amp/

    Also i followed above steps and i filled the above form.

    Plugin Support Milind More

    (@milindmore22)

    5 years, 6 months ago

    Hello @vysyarajujayasree,

    Thanks for the info, As the Error log suggest it may be related to an Instant article for WP plugin, Please deactivate and check it once.

    you can try to check whether the same issue arises when you activate plugins one by one following the steps below:

    • Install and activate the Health Check & Troubleshooting plugin.
    • Navigate to Tools > Site Health > Troubleshooting.
    • Enable trouble shooting mode
    • Visit plugin -> installed plugins and activate them one by one and check which plugin is causing issue

    You can exit troubleshooting mode afterward.

    Thread Starter vysyarajujayasree

    (@vysyarajujayasree)

    5 years, 6 months ago

    Hi,
    I deactivated and checked the plugin same thing is happened.
    i installed health check and troubleshooting plugin but i didnt get any errors and warnings.

    actually i got error for A tag on this page requires an AMP component ‘script’ tag, which is missing. in google search console.

    please check below url for A tag on this page requires an AMP component ‘script’ tag, which is missing. error in google search console
    in my website some amp pages are getting error like this, iam using same code for all pages

    https://www.arre.co.in/hi/sports/ipl-2020-its-the-rahul-tewatias-ishan-kishans-that-make-it-special/amp/

    Plugin Support Milind More

    (@milindmore22)

    5 years, 6 months ago

    Hello @vysyarajujayasree

    I deactivated and checked the plugin same thing is happened.
    i installed health check and troubleshooting plugin but i didnt get any errors and warnings.

    When you deactivated all other plugins did the Instagram embed worked? without breaking the footer?

    actually i got error for A tag on this page requires an AMP component ‘script’ tag, which is missing. in google search console.

    please check below url for A tag on this page requires an AMP component ‘script’ tag, which is missing. error in google search console
    in my website some amp pages are getting error like this, I am using same code for all page

    After inspecting your page we found out that amp-analytics for yandex is added manually or using other plugins but it’s missing amp-analytics script in <head>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

    You may want to add this using the analytics feature of plugins. just add type metrika and JSON config ( screenshot ) the plugin will add analytics script in head. you can add multiple vendors as type.

    It seems you are using the old version of plugin v1.5.5, there are many features that got added and updated in the latest version, feel free to update your QA site first, I will be happy to assist you if you got any issues.

    Thread Starter vysyarajujayasree

    (@vysyarajujayasree)

    5 years, 5 months ago

    hi,

    i added metrika type and json config in amp analytics but it is not added amp analytics script tag in head.

    Also i updated latest version of amp plugin in my qa site. but still continue same issue.

    Plugin Support Milind More

    (@milindmore22)

    5 years, 5 months ago

    @vysyarajujayasree

    i added metrika type and json config in amp analytics but it is not added amp analytics script tag in head.

    Can you please share an example URL? I am still don’t see analytics configurations in the source on the QA page you previously provided.

    Also i updated latest version of amp plugin in my qa site. but still continue same issue.

    Did you try choosing a different reader theme?

    Thread Starter vysyarajujayasree

    (@vysyarajujayasree)

    5 years, 5 months ago

    Hi,

    When i paste the above instagram embed code with blockquotes in wordpress editor, the amp post article footer was broken. As the foooter was broken the amp-analytics script is not included in the amp articles in header, because of which A tag on this page requires an AMP component ‘script’ tag, which is missing error in google search console for hindi language pages. Pages which are not having instagram embed code those pages automatically taken amp amp-analytics script tag in header. this not design or theme issue. Please let me know how to fix this or do let me know if there are any solutions available for it.

    Plugin Support Milind More

    (@milindmore22)

    5 years, 5 months ago

    Hello @vysyarajujayasree

    Yes, you are correct this not design or theme issue, as we suspect it might be another plugin ( not AMP plugin ) breaking the site.

    As previously mentioned using Health Check & Troubleshooting plugin you will be able to check which plugin is breaking the footer of your site.

    The error log suggested that fb-instant-articles plugin might be breaking it. since you have a QA site I will suggest deactivating all the plugins clear cache and check OR try to suppress FB instant articles and other plugins using AMP settings.

    On my test site using just the AMP plugin on reader mode using the legacy theme, I am not able to reproduce the issue using the same embed code.

    1) Desktop Page URL

    2) AMP Page URL

    You can check the above links the footer didn’t break also please check the analytics code for metrika by checking the source.

    Thread Starter vysyarajujayasree

    (@vysyarajujayasree)

    5 years, 5 months ago

    Hi,

    we checked all plugins are deactivated in QA, but still the issue is not resolved, Please check below screen shot
    when i removed instagram embed code the footer issue is resolved.
    Is there any solution or work around with instagram embed code

    Plugin Support Milind More

    (@milindmore22)

    5 years, 5 months ago

    Hi @vysyarajujayasree,

    As I mentioned previously we are unable to reproduce the issue with just the AMP plugin active on the legacy theme. ( Also added a demo URL ).

    you are using some custom plugins to which we don’t have access, so we are unable to debug the issue any further.

    Plugin Support Milind More

    (@milindmore22)

    5 years, 4 months ago

    As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘AMP instagram embed code breaks the footer’ is closed to new replies.