{"id":1781,"date":"2018-11-01T06:18:46","date_gmt":"2018-11-01T06:18:46","guid":{"rendered":"https:\/\/wpthemetestdata.wordpress.com\/?p=1738"},"modified":"2020-09-26T10:13:21","modified_gmt":"2020-09-26T14:13:21","slug":"blocks-embeds","status":"publish","type":"post","link":"https:\/\/blog.uvm.edu\/manual\/2018\/11\/01\/blocks-embeds\/","title":{"rendered":"Social Embeds"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p class=\"intro--left\">You can embed social media posts into your WordPress site. Embedding is really intuitive. Just select the Reusable Block for the social property you want to embed. WordPress will prompt you for a URL. Copy the URL that you want to embed, and paste it in when prompted.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" role=\"presentation\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Twitter<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Reusable Block Name:<\/strong> Twitter<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-twitter alignwide wp-block-embed is-type-rich is-provider-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"550\" data-dnt=\"true\"><p lang=\"en\" dir=\"ltr\">Once again, <a href=\"https:\/\/twitter.com\/hashtag\/UVM?src=hash&amp;ref_src=twsrc%5Etfw\">#UVM<\/a> ranks among the nation&#39;s best colleges, according to <a href=\"https:\/\/twitter.com\/ThePrincetonRev?ref_src=twsrc%5Etfw\">@ThePrincetonRev<\/a> <br><br>Read more: <a href=\"https:\/\/t.co\/pRhER441Bw\">https:\/\/t.co\/pRhER441Bw<\/a> <a href=\"https:\/\/t.co\/gnRWYSHIQt\">pic.twitter.com\/gnRWYSHIQt<\/a><\/p>&mdash; University of Vermont (@uvmvermont) <a href=\"https:\/\/twitter.com\/uvmvermont\/status\/1158769657555410944?ref_src=twsrc%5Etfw\">August 6, 2019<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><figcaption>Twitter,&nbsp; wide width<\/figcaption><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Notes about Twitter:<\/strong> Twitter supports live feed.<\/p>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>Be aware that oversized images can disrupt the visual display. In this case, the border disappears and a vertical scroll bar shows up.<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-embed-twitter alignwide wp-block-embed is-type-rich is-provider-twitter\"><div class=\"wp-block-embed__wrapper\">\n<a class=\"twitter-timeline\" data-width=\"640\" data-height=\"960\" data-dnt=\"true\" href=\"https:\/\/twitter.com\/uvmvermont?ref_src=twsrc%5Etfw\">Tweets by uvmvermont<\/a><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><figcaption>Twitter,&nbsp; wide width<\/figcaption><\/figure>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">You Tube<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Reusable Block Name:<\/strong> YouTube<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"The University of Vermont: Make it Yours\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/U0L1Dx1FBoo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption>YouTube<br \/><\/figcaption><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Tube notes:<\/strong> As for the right way to embed&nbsp;<strong>YouTube<\/strong>&nbsp;videos: When it comes to Gutenberg, there is a YouTube embed block, so I believe that will be the right way. However, if you chose to embed YouTube video with the iframe option that is available on YouTube, you have control over when to start playing the video, whether you wanted to display the controls or not, so in some cases, this will be the better way. To add the iframe, you have to select the&nbsp;<a href=\"https:\/\/gogutenberg.com\/blocks\/custom-html\/\">custom HTML block<\/a>&nbsp;rather than the YouTube embed block.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Vimeo<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Reusable Block Name:<\/strong> Vimeo<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-vimeo wp-block-embed is-type-video is-provider-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"University of Vermont Outing Club General Meeting, Spring 2015\" src=\"https:\/\/player.vimeo.com\/video\/118085486?dnt=1&amp;app_id=122963\" width=\"640\" height=\"360\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Facebook<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Reusable Block Name:<\/strong> Facebook<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-facebook wp-block-embed is-type-video is-provider-facebook\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.facebook.com\/UniversityofVermont\/videos\/365561537420556\/\n<\/div><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-facebook wp-block-embed is-type-rich is-provider-facebook\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.facebook.com\/UniversityofVermont\/photos\/pb.31152992636.-2207520000.1566849080.\/10156838790302637\/?type=3&#038;theater\n<\/div><\/figure>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Instagram<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Reusable Block Name:<\/strong> Instagram<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-embed-instagram wp-block-embed is-type-rich is-provider-instagram\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.instagram.com\/p\/B1m86SzpH1x\/?utm_source=ig_web_options_share_sheet\n<\/div><\/figure>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Instagram Notes: <\/strong>Instagram&nbsp;only allows you to embed individual posts, not the feed of a person.<\/p>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Social Sharing<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Reusable Block Name:<\/strong> Social__ Sharing Icons<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" role=\"presentation\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>To add social sharing icons to your site, click the [+] in either the upper left of the page you are editing and then search for &#8220;sharing&#8221;. Pick the one called <strong>c__sharing icons.<\/strong><\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"580\" height=\"528\" src=\"http:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/sharing_icons.png\" alt=\"\" class=\"wp-image-3258\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/sharing_icons.png 580w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/08\/sharing_icons-300x273.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">LinkedIn<\/h2>\n\n\n\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p><strong>Linkedin<\/strong>&nbsp;does not support embeds in other sites. There used to be a few WordPress plugins allowing you to embed LinkedIn content, but none of them has been supported for a while \u2013 and this is because LinkedIn removed the support for this feature. Even building a new Gutenberg block won\u2019t help to get around this issue, without LinkedIn&nbsp;<a href=\"https:\/\/www.howtogeek.com\/343877\/what-is-an-api\/\">API<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Other Embeds<\/h2>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<p>WordPress supports many other embeds. Here is a screen grab of the Reusable Blocks\/Embeds menu showing the different properties that you can embed from.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" role=\"presentation\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"363\" height=\"1024\" src=\"http:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/embeds-363x1024.jpg\" alt=\"\" class=\"wp-image-3888\" srcset=\"https:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/embeds-363x1024.jpg 363w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/embeds-106x300.jpg 106w, https:\/\/blog.uvm.edu\/manual\/files\/2019\/09\/embeds.jpg 376w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/figure>\n\n\n\n<div style=\"height:120px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>You can embed social media posts into your WordPress site. Embedding is really intuitive. Just select the Reusable Block for the social property you want to embed. WordPress will prompt you for a URL. Copy the URL that you want to embed, and paste it in when prompted. Twitter Reusable Block Name: Twitter Notes about &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.uvm.edu\/manual\/2018\/11\/01\/blocks-embeds\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Social Embeds&#8221;<\/span><\/a><\/p>\n","protected":false},"author":5625,"featured_media":3982,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[258709,246029,66159],"tags":[250700,141],"class_list":["post-1781","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-block","category-media-2","category-social","tag-embeds-2","tag-video","entry"],"featured_image_src":"https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg","featured_image_src_square":"https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg","author_info":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_featured_image_url":{"full":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",1500,1000,false],"landscape":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",1500,1000,false],"portraits":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",1500,1000,false],"thumbnail":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02-150x150.jpg",150,150,true],"medium":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02-300x200.jpg",300,200,true],"large":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02-1024x683.jpg",640,427,true],"1536x1536":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",1500,1000,false],"2048x2048":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",1500,1000,false],"ab-block-post-grid-landscape":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",600,400,false],"ab-block-post-grid-square":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",600,400,false],"post-thumbnail":["https:\/\/blog.uvm.edu\/manual\/files\/2018\/11\/social_embeds_1500x1000_02.jpg",1500,1000,false]},"rttpg_author":{"display_name":"smasonla","author_link":"https:\/\/blog.uvm.edu\/manual\/author\/smasonla\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/blog.uvm.edu\/manual\/category\/block\/\" rel=\"category tag\">Block<\/a> <a href=\"https:\/\/blog.uvm.edu\/manual\/category\/media-2\/\" rel=\"category tag\">Media<\/a> <a href=\"https:\/\/blog.uvm.edu\/manual\/category\/social\/\" rel=\"category tag\">Social<\/a>","rttpg_excerpt":"You can embed social media posts into your WordPress site. Embedding is really intuitive. Just select the Reusable Block for the social property you want to embed. WordPress will prompt you for a URL. Copy the URL that you want to embed, and paste it in when prompted. Twitter Reusable Block Name: Twitter Notes about&hellip;","_links":{"self":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/users\/5625"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/comments?post=1781"}],"version-history":[{"count":5,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1781\/revisions"}],"predecessor-version":[{"id":5383,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/posts\/1781\/revisions\/5383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media\/3982"}],"wp:attachment":[{"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/media?parent=1781"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/categories?post=1781"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.uvm.edu\/manual\/wp-json\/wp\/v2\/tags?post=1781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}