How to edit specific AMP post?

  • Resolved פרוטוקול Protocol – מאגר מידע

    (@protocolil)


    8 years, 2 months ago

    Hello, I want to edit specific AMP post to enter some amp code to the post. I explain here.

    I am using some embed items like Playbuzz in the post. But I am using also amp, so it is now shows on this version of the post.

    But, Playbuzz has AMP code and AMP version of the item.

    So, I need to add the regular item to regular post (canonical), and the AMP item to amp version of the post.

    So, how can I edit this amp post please?

    Thank you.

Viewing 10 replies - 1 through 10 (of 10 total)
  • fantigezer

    (@fantigezer)

    8 years, 2 months ago

    Hey,

    You can try to use a AMP plugin (there’s an official one, and another one that’s pretty popular), they’re supposed to be able to translate your document to AMP format automatically

    Plugin Author Weston Ruter

    (@westonruter)

    8 years, 2 months ago

    @protocolil For Playbuzz, when using the AMP plugin here all you need to do is add the Playbuzz markup and it will automatically convert it to AMP.

    For example, adding to your normal post content:

    <div class="pb_feed" data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" data-game="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right"></div>

    This gets converted to the following in AMP:

    <amp-playbuzz data-item="226dd4c0-ef13-4fee-850b-7be32bf6d121" src="https://www.playbuzz.com/jessiemills10/donald-trump-hits-out-at-rachel-maddow-and-accuses-nbc-of-being-fake-news-is-he-right" height="500"></amp-playbuzz>

    As can be seen in the unit test: https://github.com/Automattic/amp-wp/blob/89e4227edf41a8fe0408e8e855a6dcbbd4ccc13c/tests/test-amp-playbuzz-sanitizer.php#L29-L30

    • This reply was modified 8 years, 2 months ago by Weston Ruter.
    Thread Starter פרוטוקול Protocol – מאגר מידע

    (@protocolil)

    8 years, 2 months ago

    Hi @westonruter,

    Thank you, Now I see the item in amp page, but there is another problem.

    I cannot remove the data-show-share and data-show-info from the regular post.

    I tell you what I did.

    1. The script added to the post
    <script>(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src='https://embed.playbuzz.com/sdk.js';fjs.parentNode.insertBefore(js,fjs);}(document,'script','playbuzz-sdk'));</script>

    2. This div code added before – but the not showed on AMP
    <div class="playbuzz" data-id="517a5375-0800-4fcd-9cb1-586825a518af" data-show-share="false" data-show-info="false"></div>

    3. I changed this code as you said to this:
    <div class="pb_feed" data-item="517a5375-0800-4fcd-9cb1-586825a518af" data-show-share="false" data-show-info="false"></div>

    Now it is show on the AMP, but the info and share buttons not removed.

    Even if I changed to this –
    <div class="pb_feed" data-item="517a5375-0800-4fcd-9cb1-586825a518af" data-item-info="false" data-share-buttons="false" data-comments="false"></div>

    They still stayed.

    Can you help me please?

    Plugin Author Weston Ruter

    (@westonruter)

    8 years, 2 months ago

    I’m not sure. I’m not familiar with all the features and capabilities of Playbuzz, but you can see the logic for how the div element’s attributes are mapped over to amp-playbuzz element attributes here: https://github.com/Automattic/amp-wp/blob/23eced628815e169ca9831b2ccb460b49adc53c1/includes/sanitizers/class-amp-playbuzz-sanitizer.php#L82-L136

    Maybe there is some mapping logic is missing, and maybe you can identify what is missing.

    fantigezer

    (@fantigezer)

    8 years, 2 months ago

    You can look at the official documentation here. In order to omit the info and shares, your code should look like this:

    <div class="pb_feed" data-item="517a5375-0800-4fcd-9cb1-586825a518af" data-game-info="false" data-shares="false" data-comments="false"></div>

    and the resulting AMP:

    <amp-playbuzz
    data-item="517a5375-0800-4fcd-9cb1-586825a518af"
    height="500"
    data-item-info="false"
    data-share-buttons="false"
    data-comments="false">
</amp-playbuzz>
    Plugin Author Weston Ruter

    (@westonruter)

    8 years, 2 months ago

    This is the amp-playbuzz element that I see output when I add that div. Are you expecting to see something different?

    Thread Starter פרוטוקול Protocol – מאגר מידע

    (@protocolil)

    8 years, 2 months ago

    On the amp page it’s OK. but on the regular page, there is all share buttons, info and more.

    I thought to hide it via CSS – but this is the last option I want to do.

    I just want to show the item without share & info – on regular and on amp post.

    Here you can see the article (on Hebrew): https://www.protocol.co.il/insurance/pay-as-you-drive/

    Plugin Author Weston Ruter

    (@westonruter)

    8 years, 2 months ago

    I don’t have any better suggestion than CSS. I’m not a Playbuzz expert so I’m not familiar with the best practices they provide for customizing.

    fantigezer

    (@fantigezer)

    8 years, 2 months ago

    @protocoli, you’re using the wrong parameters in your embed code.
    To remove the shares, you should change data-share-buttons to data-show-share, and to remove the item’s info, you should change data-item-info to data-show-info

    Thread Starter פרוטוקול Protocol – מאגר מידע

    (@protocolil)

    8 years, 2 months ago

    Hi, Yes I know, I did it, but it isn’t help.
    You can see now, I changed, the info and the share was not removed, still there.

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

The topic ‘How to edit specific AMP post?’ is closed to new replies.