{"id":304360,"date":"2021-07-21T12:00:52","date_gmt":"2021-07-21T09:00:52","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-add-social-media-embeds-to-articles-in-wordpress-cloudsavvy-it\/"},"modified":"2021-07-21T12:00:52","modified_gmt":"2021-07-21T09:00:52","slug":"how-to-add-social-media-embeds-to-articles-in-wordpress-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-articles-in-wordpress-cloudsavvy-it\/","title":{"rendered":"#How to Add Social Media Embeds To Articles In WordPress \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a39caae379ba\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a39caae379ba\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-articles-in-wordpress-cloudsavvy-it\/#What_Are_Open_Graph_Meta_Tags\" >What Are Open Graph Meta Tags?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-articles-in-wordpress-cloudsavvy-it\/#Manually_Adding_Tags_to_PHP\" >Manually Adding Tags to PHP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-add-social-media-embeds-to-articles-in-wordpress-cloudsavvy-it\/#Using_a_Plugin\" >Using a Plugin<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#How to Add <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/social-mediaa\/\" data-internallinksmanager029f6b8e52c=\"1\" title=\"Social Media\" target=\"_blank\" rel=\"noopener\">Social Media<\/a> Embeds To Articles In WordPress \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage alignnone size-full wp-image-4044\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2017\/08\/94f2fdd6-e1583348245450.png?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2017\/08\/94f2fdd6-e1583348245450.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2017\/08\/94f2fdd6-e1583348245450.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"WordPress Logo Dark Mode\" width=\"1000\" height=\"465\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>If you\u2019ve sent a link to your WordPress article, and it didn\u2019t expand to show the image, title, and de<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">script<\/a>ion, that\u2019s because you haven\u2019t set up your Open Graph Meta Tags in WordPress. We\u2019ll show you how to configure them to improve your social media presence.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Are_Open_Graph_Meta_Tags\"><\/span>What Are Open Graph Meta Tags?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The configuration for social media embeds is done through a standard format, originally created at Facebook, called \u201c<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/ogp.me\/\">the Open Graph Protocol.<\/a>\u201d<\/p>\n<p>Basically, they look like the following\u00a0<code>&lt;meta&gt;<\/code>\u00a0HTML tags, usually in the header of your site:<\/p>\n<pre>&lt;meta property=\"og:image\" content=\"https:\/\/i.imgur.com\/imagelink.jpg\"&gt; &#13;\n&lt;meta property=\"og:title\" content=\"Website Title\" \/&gt; &#13;\n&lt;meta property=\"og:description\" content=\"Website Description\" \/&gt; &#13;\n&lt;meta property=\"og:type\" content=\"article\" \/&gt; &#13;\n&lt;meta property=\"og:url\" content=\"https:\/\/example.com\/\" \/&gt;<\/pre>\n<p>However, while this would work for a regular website, you can\u2019t just paste this into your WordPress HTML. This is because WordPress is a content management system (CMS) and it needs to fill in the title, description, and image depending on the article you linked.<\/p>\n<p>There are two main ways to do this \u2014 manually, with some edits to your PHP files, or automatically with a plugin. Less plugin dependencies is always better, so we recommend adding it manually if you\u2019re tech-savvy.<\/p>\n<p>But, if you aren\u2019t, or are using shared hosting and don\u2019t have access to your system files, there\u2019s nothing wrong with configuring it with a plugin.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Manually_Adding_Tags_to_PHP\"><\/span>Manually Adding Tags to PHP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>PHP is used to generate the HTML file automatically when a user requests it. The PHP code used to generate the header depends on which theme you\u2019re using. It\u2019s technically located in <code>header.php<\/code>, but this calls a function called <code>wp_head()<\/code>, so it\u2019s better to add a new action to that in <code>functions.php<\/code>, located here:<\/p>\n<pre>wordpress\/wp-content\/themes\/theme\/functions.php<\/pre>\n<p>If you\u2019re not comfortable with text editors, you can install a plugin called <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/header-footer\/\">Head, Footer, and Post Injections<\/a> which will let you add code through the plugin settings, though you should probably just use the plugin below if you\u2019re adding plugins anyway.<\/p>\n<p>Otherwise, you can use a command line editor like <code>nano<\/code>\u00a0or <code>micro<\/code>, or you can transfer this file to your desktop to edit it. Either way, open this up in your text editor of choice, and scroll to the bottom:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12830\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/7ab9d9b5-1.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"203\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Then, paste in the following function:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"php\">\n<pre class=\"de1\">function fb_opengraph() {\n    global $post;\n\u00a0\n    if(is_single()) {\n        if(has_post_thumbnail($post-&gt;ID)) {\n            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post-&gt;ID ), 'medium');\n        } else {\n            $img_src = get_stylesheet_directory_uri() . '\/img\/opengraph_image.jpg';\n        }\n        if($excerpt = $post-&gt;post_excerpt) {\n            $excerpt = s<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/trip-and-travel\/\" data-internallinksmanager029f6b8e52c=\"10\" title=\"Trip &amp; Travel\" target=\"_blank\" rel=\"noopener\">trip<\/a>_tags($post-&gt;post_excerpt);\n            $excerpt = str_replace(\"\", \"'\", $excerpt);\n        } else {\n            $excerpt = get_bloginfo('description');\n        }\n        ?&gt;\n\u00a0\n    &lt;meta property=\"og:title\" content=\"<span class=\"kw2\">&lt;?php<\/span> <span class=\"kw1\">echo<\/span> the_title<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span> <span class=\"sy1\">?&gt;<\/span>\"\/&gt;\n    &lt;meta property=\"og:description\" content=\"<span class=\"kw2\">&lt;?php<\/span> <span class=\"kw1\">echo<\/span> <span class=\"re0\">$excerpt<\/span><span class=\"sy0\">;<\/span> <span class=\"sy1\">?&gt;<\/span>\"\/&gt;\n    &lt;meta property=\"og:type\" content=\"article\"\/&gt;\n    &lt;meta property=\"og:url\" content=\"<span class=\"kw2\">&lt;?php<\/span> <span class=\"kw1\">echo<\/span> the_permalink<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span> <span class=\"sy1\">?&gt;<\/span>\"\/&gt;\n    &lt;meta property=\"og:site_name\" content=\"<span class=\"kw2\">&lt;?php<\/span> <span class=\"kw1\">echo<\/span> get_bloginfo<span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span> <span class=\"sy1\">?&gt;<\/span>\"\/&gt;\n    &lt;meta property=\"og:image\" content=\"<span class=\"kw2\">&lt;?php<\/span> <span class=\"kw1\">echo<\/span> <span class=\"re0\">$img_src<\/span><span class=\"sy0\">;<\/span> <span class=\"sy1\">?&gt;<\/span>\"\/&gt;\n\u00a0\n<span class=\"kw2\">&lt;?php<\/span>\n    <span class=\"br0\">}<\/span> <span class=\"kw1\">else<\/span> <span class=\"br0\">{<\/span>\n        <span class=\"kw1\">return<\/span><span class=\"sy0\">;<\/span>\n    <span class=\"br0\">}<\/span>\n<span class=\"br0\">}<\/span>\nadd_action<span class=\"br0\">(<\/span><span class=\"st_h\">'wp_head'<\/span><span class=\"sy0\">,<\/span> <span class=\"st_h\">'fb_opengraph'<\/span><span class=\"sy0\">,<\/span> <span class=\"nu0\">5<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Essentially, this checks if the page is a single post or a main page, and configures the description and image accordingly. Note that it uses <code>\/img\/opengraph_image.jpg<\/code>\u00a0for non-article pages, so you will need to put something there.<\/p>\n<p>Then, it adds all the OG meta tags, using whatever data the page is currently using. This should take effect immediately, though you may have to wait for caches to refresh.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Using_a_Plugin\"><\/span>Using a Plugin<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Configuring this with a plugin is simpler. You\u2019ll want to search for \u201cOpen Graph and Twitter Card Tags,\u201d and install it:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12832\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/9a06c988.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"373\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Activate it and head to the settings:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12833\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/66704a24.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"328\" height=\"135\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>There\u2019s not much to configure here, as it\u2019s all set up automatically, but you can specify custom text for the homepage and default descriptions, and upload a default image for non-post pages.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-12834\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/07\/20539ae5.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"700\" height=\"572\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>You should see the changes working immediately after you hit apply.<\/p>\n<p>Some other bigger plugins, like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/yoast.com\/wordpress\/plugins\/seo\/\">YoastSEO<\/a>, will also configure meta tags, but this plugin does it simply without additional bulk.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/12507\/how-to-add-social-media-embeds-to-articles-in-wordpress\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#How to Add Social Media Embeds To Articles In WordPress \u2013 CloudSavvy IT&#8221; If you\u2019ve sent a link to your WordPress article, and it didn\u2019t expand to show the image, title, and description, that\u2019s because you haven\u2019t set up your Open Graph Meta Tags in WordPress. We\u2019ll show you how to configure them to improve&#8230;<\/p>\n","protected":false},"author":1,"featured_media":304361,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2017\/08\/94f2fdd6-e1583348245450.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-304360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/304360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=304360"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/304360\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/304361"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=304360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=304360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=304360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}