CODEWITHSUNDEEP
jqueryfacebookiframe
arnoa69
arnoa69

Reputation: 23

open graph in website and iframe - make twitter, fb read only the one from iframe

I got clients, which have an iframe on theirs website, where my products are shown. Each product has its individual og:image and twitter:image meta tag and a twitter/fb share button.

Unfortunately twitter and facebook just read the meta tags of the clients website and not the once in the iframe, so the picuters and descriptions posted are wrong. Also there is a case where one customer has his own og and twitter meta tags, in this case twitter/fb are reading the customers og meta tags.

The solution I am searching, is that if someone clicks the share button, which is in the iframe, twitter and fb get the open graph meta tags informations from the iframe.

Is this possible and with what kind of technology, can I say to twitter/fb to fetch my og meta tags from the iframe and not the ones from the top site. I have seen examples how to read the meta tags in the iframe using jquery, but how to hand it over to twitter and fb? So that on a page with containing my iframe, the metatags inside the iframe are read athorwise from the main website.

Thank you for reading my question and hopefully someone has a good idea.

Upvotes: 2

Views: 1274

Answers (1)

derabbink
derabbink

Reputation: 2429

Like @CBroe mentions in their comment: OpenGraph <meta> tags need to be added to the document by the web server that serves it, and not by javascript.

If your website is a single document on the outside, but all navigational activity happens inside an iframe, you are probably upsetting most of your users, and you make it nearly impossible for anyone to link to specific content.

That being said, that is orthogonal to how you can make the share button work properly, when you place it on the pages inside the iframe. You can configure the share button for each inner document's URL, i.e. for the URL shown of what's currently shown in the iframe. That document could contain all the required OpenGraph <meta> data.
But this also means that people clicking on the shared link resulting from this will be directed to the inner document, without the iframe wrapped around it.

You can resolve this by using javascript to redirect anyone back to your index document (which renders the iframe with the actual content), and hope that can also cause that index document to subsequently load the right content in the iframe. This idea is arguably not great, because it will trigger a bunch of redirects and it depends on Javascript to work.

A different approach would be to start using a fragment beginning with #!. Inside the fragment you could encode what content is currently show inside the index document's iframe. If you add JavaScript to the index document that recognizes the current fragment and then loads the corresponding content into the iframe, you would be serving the right content to your users without redirects. Additionally, using URLs with such a fragment works with the Facebook scraper, as it will follow the _escaped_fragment_ specification.

Upvotes: 1

Related Questions