{"id":24878,"date":"2015-10-08T21:01:10","date_gmt":"2015-10-08T13:01:10","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24878"},"modified":"2022-10-18T20:12:39","modified_gmt":"2022-10-18T12:12:39","slug":"embed-wordpress-posts","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/","title":{"rendered":"How to Allow Others to Embed Your WordPress Posts"},"content":{"rendered":"

Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and SoundCloud is downright easy, thanks to the oEmbed API. Simply add the link into the post content and, WordPress immediately parses the link and renders it into a presentable format.<\/p>\n

But, what do you think of the idea to embed a WordPress post, in a way similar to how we would embed a Tweet or a Youtube video? Allowing readers to embed your post would certainly increase your site engagement<\/strong> and viewership coming from other websites<\/strong>.<\/p>\n

This genuine idea is under discussion, in the WordPress development group, to be added into the WordPress Core functionality in the future. But as of now, we can apply it into our blog with the help of a plugin called oEmbed API<\/a>.<\/p>\n

Getting Started<\/h2>\n

First of all, this plugin requires at least WordPress 4.3<\/strong> so ensure that your website has been updated. Install the oEmbed API plugin<\/a>. The site must be accessible online, otherwise the embed could fail.<\/p>\n

Once the plugin is activated, you can copy a post permalink<\/em> URL<\/a> and paste it in the other website content or in a post within your own blog. Here is how the embedded content will look like:<\/p>\n

<\/figure>\n

The embedded content is nicely laid out. It shows the post title, the excerpt, the site name, the number of comments, and the Share button which will display the post permalink<\/em> for embedding the content. And that is essentially all you have to do.<\/p>\n

If you are fine with the default output you can stop here. But if you want more customization options, here are a couple of things you can do.<\/p>\n

Change the Icon<\/h2>\n

One of the reasons this plugin requires the latest WordPress version is the Favicon. The ability to add favicon natively through the dashboard has only been introduced in 4.3. but this also means that your embedded content will be displayed with the WordPress icon inline with your site name.<\/p>\n

For us, this seems irrelevant since the content comes from our site, not WordPress icon. We\u2019d like to see our site logo inline with our site name instead. To do this, we go to the Appearance > Customize > Site Identity<\/strong> tab.<\/p>\n

Upload the image icon here and save changes. You will then see the site icon you uploaded in the embedded content. Here\u2019s what ours look like:<\/p>\n

<\/figure>\n

Actions and Filters<\/h2>\n

Actions<\/a> and Filters<\/a> are two methods we use to customize outputs in WordPress<\/a>. At the current stage, however, the plugin does not come with specific actions or filters<\/strong> that can be hooked into the CSS or JavaScript.<\/p>\n

Yet, it provides a rest_oembed_output<\/code> action that we can leverage for adding new content as part of the final output, including an inline style. It isn\u2019t ideal, but at the very least, it lets you override the styles of the embedded content.<\/p>\n

The following is an example of a code that you could add into your theme functions.php<\/code> to turn the font to serif type.<\/p>\n

\r\nfunction hkdc_oembed_output() { ?>\r\n\t<style>\r\n\t\t.wp-embed {\r\n\t\t\tfont-family: serif !important;\r\n\t\t}\r\n\t<\/style>\r\n<?php }\r\nadd_action( 'rest_oembed_output', 'hkdc_oembed_output', 11 );\r\n<\/pre>\n
Another hook<\/em> we can use to customize output is the rest_oembed_output_excerpt_length<\/code> filter which allows us to set a word limit in the post excerpt<\/strong>. The default length is set to 35<\/code>. So, say we would like to shorten it to 28<\/code>, just add the following function:<\/p>\n
\r\nfunction hkdc_oembed_excerpt_length() {\r\n\treturn 28;\r\n}\r\nadd_filter( 'rest_oembed_output_excerpt_length', 'hkdc_oembed_excerpt_length', 9 );\r\n<\/pre>\n
Just change the return<\/code> number, as needed.<\/p>\n
Wrap Up<\/h2>\n
At the moment of this writing, oEmbed API<\/strong> is still undergoing development, which might be one reason it does not come with sufficient Hooks<\/a> for content modification yet. Hopefully, as the codes are ironed out, more Hooks are added<\/p>\n
You can follow the development progress in the Github issue tickets<\/a> as well as in the WordPress Dev thread<\/a>. All in all, this will be a great  addition for WordPress.<\/p>","protected":false},"excerpt":{"rendered":"
Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and SoundCloud is downright easy, thanks to the oEmbed API. Simply add the link into the post content and, WordPress immediately parses the link and renders it into a presentable format. But,…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[4663,1837,252],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nHow to Allow Others to Embed Your WordPress Posts - Hongkiat<\/title>\n<meta name=\"description\" content=\"Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Allow Others to Embed Your WordPress Posts\" \/>\n<meta property=\"og:description\" content=\"Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-08T13:01:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-18T12:12:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/embed-wordpress-posts\/wp-embed.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"How to Allow Others to Embed Your WordPress Posts\",\"datePublished\":\"2015-10-08T13:01:10+00:00\",\"dateModified\":\"2022-10-18T12:12:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/\"},\"wordCount\":637,\"commentCount\":11,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/embed-wordpress-posts\\\/wp-embed.jpg\",\"keywords\":[\"ad-divi\",\"wordpress post\",\"WordPress Tips\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/\",\"name\":\"How to Allow Others to Embed Your WordPress Posts - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/embed-wordpress-posts\\\/wp-embed.jpg\",\"datePublished\":\"2015-10-08T13:01:10+00:00\",\"dateModified\":\"2022-10-18T12:12:39+00:00\",\"description\":\"Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/embed-wordpress-posts\\\/wp-embed.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/embed-wordpress-posts\\\/wp-embed.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/embed-wordpress-posts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Allow Others to Embed Your WordPress Posts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Allow Others to Embed Your WordPress Posts - Hongkiat","description":"Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/","og_locale":"en_US","og_type":"article","og_title":"How to Allow Others to Embed Your WordPress Posts","og_description":"Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and","og_url":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-10-08T13:01:10+00:00","article_modified_time":"2022-10-18T12:12:39+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/embed-wordpress-posts\/wp-embed.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"How to Allow Others to Embed Your WordPress Posts","datePublished":"2015-10-08T13:01:10+00:00","dateModified":"2022-10-18T12:12:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/"},"wordCount":637,"commentCount":11,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/embed-wordpress-posts\/wp-embed.jpg","keywords":["ad-divi","wordpress post","WordPress Tips"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/","url":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/","name":"How to Allow Others to Embed Your WordPress Posts - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/embed-wordpress-posts\/wp-embed.jpg","datePublished":"2015-10-08T13:01:10+00:00","dateModified":"2022-10-18T12:12:39+00:00","description":"Embedding has now become the norm when it comes to sharing content on websites. In WordPress, embedding content from sites like Youtube, Twitter, and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/embed-wordpress-posts\/wp-embed.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/embed-wordpress-posts\/wp-embed.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/embed-wordpress-posts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Allow Others to Embed Your WordPress Posts"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6tg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24878","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24878"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24878\/revisions"}],"predecessor-version":[{"id":25919,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24878\/revisions\/25919"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24878"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24878"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24878"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24878"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}