Facebook and Instagram first show up if consent is given

Resolved gudrun
(@gudrunpetz)

3 months, 1 week ago

Hello, I use the plugin.

I have now embedded a post from Instagram as a test.

It doesn’t show me a preview and only the message “view this post on Instagram”

My goal, however, is that the user sees the post on my page if they consent and doesn’t switch to another page.

How does it work that posts are shown on my Facebook and Instagram page AFTER consent?

Thank you in advance.

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

Plugin Author Matthias Kittsteiner
(@kittmedia)

3 months, 1 week ago
Hi @gudrunpetz,

I have a few questions to support you:
- Which editor are you using?
- How exactly do you embed the content?
- Can you share the URL/code of the shared content?
- Which plugins have you installed?
Best regards,
Matthias
Thread Starter gudrun
(@gudrunpetz)

3 months, 1 week ago
Hello Matthias,
Thanks for the answer.

To your questions:
- I use the Classic Editor.
- I embed the content using Facebook’s “embed” function.
- This link points to the post page: https://t1p.de/65qh5 and is available for 2 days.
- Lots of plugins 😀
Best regards
Gudrun
Thread Starter gudrun
(@gudrunpetz)

3 months, 1 week ago

Hello Matthias,
I use the plugin with a WP multisite. Is the plugin compatible with that?

Plugin Author Matthias Kittsteiner
(@kittmedia)

3 months, 1 week ago

Thank you, I’ll check that. Can you post the actual code you’ve added in your editor, please?

Embed Privacy is fully working within a multisite.
Thread Starter gudrun
(@gudrunpetz)

3 months, 1 week ago
Sieh dir diesen Beitrag auf Instagram an
```
<blockquote class="instagram-media" style="background: #FFF; border: 0; border-radius: 3px; box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width: 540px; min-width: 326px; padding: 0; width: calc(100% - 2px);" data-instgrm-captioned="" data-instgrm-permalink="https://www.instagram.com/p/DEzNAkItLcX/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14">
<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;"></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;">Sieh dir diesen Beitrag auf Instagram an</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>
&nbsp;
<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 style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none;" href="https://www.instagram.com/p/DEzNAkItLcX/?utm_source=ig_embed&amp;utm_campaign=loading" target="_blank" rel="noopener">Ein Beitrag geteilt von THERME EINS (@thermeeins)</a></p>

</div></blockquote>
<script async src="//www.instagram.com/embed.js"></script>
```
Thread Starter gudrun
(@gudrunpetz)

3 months ago

Hello Matthias,

I just wanted to ask if you have found the error yet?

Plugin Author Matthias Kittsteiner
(@kittmedia)

3 months ago

Hi Gudrun,

yes, I could. Sorry for not letting you know.

Since such code is no oEmbed, which are handled by default by Embed Privacy (as well as WordPress), this is no actual bug. I’m willing to add this kind of detection for these two implementations in a feature update. So I’ll add it to my list of new integrations.

Best regards,
Matthias

Thread Starter gudrun
(@gudrunpetz)

3 months ago

Hi Matthias,

Thanks for your answer.

If this code is not standard, how else should the code be inserted to make it work?

Plugin Author Matthias Kittsteiner
(@kittmedia)

3 months ago

Unfortunately, there’s not much you can do right now. WordPress itself can handle so called “oEmbed” providers. That is an open standard, where the service (e.g. YouTube) provides an API where you can send the URL of the embedded content and receive a proper embed code. This is done automatically in WordPress for a various amount of providers.

Instagram however stopped providing such an API, while Facebook never had one (as far as I know), so WordPress cannot handle this automatically (and thus Embed Privacy can’t). They use proprietary APIs for this, which need to be handled manually. There are plugins allowing embedding this type of content automatically without requiring to add raw HTML code, but since they all do something slightly different, I would need to handle them manually in Embed Privacy as well.

Embed Privacy can handle oEmbed providers as well as regular iframe, embed and object elements. Everything else must be implemented manually within Embed Privacy or a third-party plugin.

So basically, you don’t do anything wrong, here. It’s just an incompatibility.

For Facebook posts, there already is support in Embed Privacy when using Jetpack. However, I don’t recommend anyone using it – especially if you’re inside the European Union for privacy reasons.

Thread Starter gudrun
(@gudrunpetz)

3 months ago

Good morning Matthias,
thank you for your detailed answer.

I have a quick question:
Does that mean that I currently CANNOT embed posts from Facebook and Instagram in compliance with GDPR?

thank you very much for your help.

Gudrun

Plugin Author Matthias Kittsteiner
(@kittmedia)

2 months, 4 weeks ago

It’s definitely tricky. I can’t say whether there is currently a solution via another plugin that can make use of this (or something like a consent management tool – some of them are able to block third-party content automatically), but I definitely will work on it.

Thread Starter gudrun
(@gudrunpetz)

2 months, 4 weeks ago

hello, that would be great if you could offer something in the future.

Wish you a successful week

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

You must be logged in to reply to this topic.