{"id":3372,"date":"2016-01-21T17:26:27","date_gmt":"2016-01-21T16:26:27","guid":{"rendered":"https:\/\/en.florianbrinkmann.de\/?p=3372"},"modified":"2020-02-09T11:00:01","modified_gmt":"2020-02-09T10:00:01","slug":"making-a-normal-php-page-oembed-ready-for-wordpress","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/making-a-normal-php-page-oembed-ready-for-wordpress-3372\/","title":{"rendered":"Making a normal PHP page oEmbed ready for WordPress"},"content":{"rendered":"\n<p><a href=\"https:\/\/de.wordpress.org\/meetups\/\">The Meetups page on de.wordpress.org automatically displays the next six meetups from wpmeetups.de<\/a>. 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.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Problem<\/h2>\n\n\n\n<p>You cannot use iFrames on de.wordpress.org (and the other Rosetta sites) \u2014 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 <a href=\"http:\/\/wpmeetups.de\/termine\/\">the overview from wpmeetups.de<\/a> 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.<\/p>\n\n\n\n<p>The page cannot be created from the wpmeetups.de feeds because they do not deliver the town from the line above the headline.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution<\/h2>\n\n\n\n<p>I used the <em><a href=\"https:\/\/developer.yahoo.com\/yql\/\">Yahoo Query Language<\/a><\/em> to create the meetups overview, and <a href=\"http:\/\/www.phpfastcache.com\/\">phpFasCache<\/a> to cache the result.<\/p>\n\n\n\n<p>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 <code class=\"lang-markup\">link<\/code> elements inside the <code class=\"lang-markup\">head<\/code>:<\/p>\n\n\n<pre class=\"wp-block-code lang-markup\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><div><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"alternate\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"application\/json+oembed\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/example.com\/wp-json\/oembed\/1.0\/embed?url=https%3A%2F%2Fexample.com%2F2083%2Fslug-des-beitrags%2F\"<\/span> \/&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">link<\/span> <span class=\"hljs-attr\">rel<\/span>=<span class=\"hljs-string\">\"alternate\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/xml+oembed\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"https:\/\/example.com\/wp-json\/oembed\/1.0\/embed?url=https%3A%2F%2Fexample.com%2F2083%2Fslug-des-beitrags%2F&amp;format=xml\"<\/span> \/&gt;<\/span><\/code><\/div><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>We have to copy these inside the <code class=\"lang-markup\">head<\/code> of the page we want to make an oEmbed page. After that, we create the files <code class=\"lang-markup\">oembed.json<\/code> and <code class=\"lang-markup\">oembed.xml<\/code>, and modify the URLs of the <code class=\"lang-markup\">link<\/code> elements to match them. As files\u2019 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.<\/p>\n\n\n\n<p>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 <code class=\"lang-markup\">\/embed<\/code> to the URL. After inserting the JavaScript, you can embed the custom page.<\/p>\n\n\n\n<p><a href=\"https:\/\/wpmeetups.de\/embed\/\">Here you find the final page for de.wordpress.org<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","lazy_load_responsive_images_disabled":false},"categories":[6],"tags":[],"wp-worthy-pixel":{"ignored":false,"public":"d6980e652efe4be2b54a2b1c94f272ef","server":"vg01.met.vgwort.de","url":"https:\/\/vg01.met.vgwort.de\/na\/d6980e652efe4be2b54a2b1c94f272ef"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3372"}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3372"}],"version-history":[{"count":5,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3372\/revisions"}],"predecessor-version":[{"id":5942,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3372\/revisions\/5942"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}