The Meetups page on de.wordpress.org automatically displays the next six meetups from wpmeetups.de. To implement this, I needed to find a solution for embedding a regular PHP page on a WordPress page. The solution was the oEmbed functionality of WordPress, introduced in 4.4.
Problem
You cannot use iFrames on de.wordpress.org (and the other Rosetta sites) — you can only use the various oEmbed providers to embed content on a page. To get an embed, which harmonizes with the WordPress.org design (and because of the overview from wpmeetups.de is not oEmbed ready), I needed to create a custom page showing the next meetups. This page has to be modified, so de.wordpress.org thinks it is a WordPress page that can be embedded via pasting the URL into the editor.
The page cannot be created from the wpmeetups.de feeds because they do not deliver the town from the line above the headline.
Solution
I used the Yahoo Query Language to create the meetups overview, and phpFasCache to cache the result.
To make the page oEmbed ready, you just have to look what is inserted on a normal WordPress page to make it embeddable. There are those two link elements inside the head:
<link rel="alternate" type="application/json+oembed" href="https://example.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fexample.com%2F2083%2Fslug-des-beitrags%2F" />
<link rel="alternate" type="text/xml+oembed" href="https://example.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fexample.com%2F2083%2Fslug-des-beitrags%2F&format=xml" />Code language: HTML, XML (xml)We have to copy these inside the head of the page we want to make an oEmbed page. After that, we create the files oembed.json and oembed.xml, and modify the URLs of the link elements to match them. As files’ content, just use the output from the original files from the WordPress page and replace all occurrences of the WordPress page URL with the URL of your custom page.
To make the iFrame behave responsively, we use the JavaScript from an embed view from a WordPress post or page. To view this embed page, just add /embed to the URL. After inserting the JavaScript, you can embed the custom page.