[Resolved] Display Pinterest embed code front-end /ACF

[martijn]

Hi there,

I’m rebuilding an elementor website/blog into GP.
The site contains many blog articles with a Pinterest pin at the end of the article.

The posts are enriched with several ACF fields, for example, a Pinterest embed code (pinterest_iframe_url).

Pinterest embed codes have been added in the posts in this field for example:
(https://assets.pinterest.com/ext/embed.html?id=84625458624935670)

I also added a Hook with Pinterest javascript to wp-head, display entire site ( <script async defer src=”//assets.pinterest.com/js/pinit.js”></script> )

Now I want to show these pins on the front end via a content template.
But I did not succeed yet. Any idea how to display the (dynamic) pins with embed code on the blog page?

Kind regards,

Martin

[David]

Hi there,

if those are outputting embeds then it will probably need a shortcode or other method to add the necessary HTML.

Is it possible to see the current site with the pinterest content so i can see what it is exactly ?

[martijn]

Hi David

Thanks for your fast reply and support.
I’ve added some examples of the original website.

[Ying]

It looks like it’s been added via a shortcode to your elementor site.
https://www.screencast.com/t/Vi77zXJOB

Can you get the shortcode from the site?

[martijn]

Hi Ying, David,

Correct. The pin is shown by using a shortcode,
where the embed code is added, per blog, by using ACF.

screenshots attached

[David]

You can try creating your own iFrame shortcode with this PHP Snippet:

function pinterest_embed_shortcode() {
    $html = '';
    // Get Pinterest URL from ACF field
    $url = get_field( 'your_acf_field_with_pinterest' );
    if ( $url ) {
        $html = '<a data-pin-do="embedPin" href="'.$url.'" data-pin-width="large" ></a>';
    }
    return $html;
}
add_shortcode( 'pinterest_embed', 'pinterest_embed_shortcode' );

Update the ACF field name. and then you can use [pinterest_embed] shortcode

[martijn]

Hi David,

Thank you for the PHP snippet, but unfortunately,
it doesn’t visually show or embed the pin yet.

I’ve updated the ACF field; ‘your_acf_field_with_pinterest’ which becomes ‘pinterest_iframe_url’
and added a shortcode to the template with [pinterest_embed].
In the code, it only shows the link.

Am I missing something?

Kind regards,
Martijn

[Fernando]

Hi Martijn,

Can you share the link to the page where you have this added?

[martijn]

Hi Fernando,

I’ve added the link to the page below,

Regards,
Martijn

[Ying]

Can you try this PHP code for the shortcode instead?

function pinterest_embed_shortcode() {
    $html = '';
    // Get Pinterest URL from ACF field
    $url = get_field( 'pinterest_iframe_url' );
    if ( $url ) {
        $html = '<iframe src="' . esc_url( $url ) . '" height="552" width="345" frameborder="0" scrolling="no" ></iframe>';
    }
    return $html;
}
add_shortcode( 'pinterest_embed', 'pinterest_embed_shortcode' );

[martijn]

Thank you Ying,

Yes! Almost there. It only shows a part of the pin (see link).
But I hope that can be solved by tweaking the PHP ?

Regards,
Martijn

[Ying]

I updated the code:
https://generatepress.com/forums/topic/display-pinterest-embed-code-front-end-acf/#post-2589296

I added the width and height attributes in the PHP code, give it another try.

You might need to remove the GB container’s height.

[martijn]

YES! PERFECT!!!

Ying, and offcourse also David & Fernando,
thank you so much for your outstanding support!!!

The combination of a perfect product and incredible personal support makes GP stands out.
Forever grateful,

Martijn

[Ying]

We’re very happy to read your reply 🙂

It’s our pleasure!

[martijn]

Sorry to bother you again.
Unfortunately, the iframe, with the Pinterest pin is not loading on iOS. On all other devices, Safari desktop, chrome desktop, and mobile, there’s no problem.

Any idea how to tackle this?

Kind regards,
Martijn

BTW: In Safari (desktop) I noticed a message:
“Refused to execute a script because its hash, its nonce, or ‘unsafe-inline’ does not appear in the script-src directive of the Content Security Policy.” Perhaps this is related to each other.

[Author]

Posts