Display Pinterest embed code front-end /ACF

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 ?

Hi David

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

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?

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

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

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

Hi Martijn,

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

Hi Fernando,

I've added the link to the page below,

Regards,
Martijn

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' );

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

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.

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

We're very happy to read your reply :)

It's our pleasure!

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.