{"id":3906,"date":"2023-01-29T12:08:25","date_gmt":"2023-01-29T12:08:25","guid":{"rendered":"https:\/\/devclouds.io\/blog\/?p=3906"},"modified":"2023-01-29T12:12:33","modified_gmt":"2023-01-29T12:12:33","slug":"how-to-add-social-share-buttons-on-wordpress","status":"publish","type":"post","link":"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/","title":{"rendered":"How to Add Social Share Buttons on WordPress"},"content":{"rendered":"\n

Hi guys Today we\u2019re going to see how to add social share buttons on WordPress website. Now let\u2019s say you have a website or a blog, and you want your visitors to share your content, on their social media platforms.<\/p>\n\n\n\n

You can do that easily by adding social sharing buttons to your website. So after reading this article, you\u2019ll be able to add sharing buttons like these. And if your visitors click here, they\u2019ll be able to share your content, on their social networks.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"social<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Let\u2019s add social sharing buttons to our website First, We will go to our website. Now this is the site, where we\u2019re going to add the social sharing buttons. So to add the buttons we\u2019re going to do 3 steps.<\/p>\n\n\n\n

Install a plugin on your WordPress site – to Add Social Share Buttons<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"installing<\/figure>\n\n\n\n
<\/div>\n\n\n\n

The first step is to \u2018Install a plugin on our wordpress site.\u2019 So to install the plugin let\u2019s go here Now go to plugins and click \u2018add new\u2019 Now Search for a plugin called \u2018social share\u2019. And you\u2019ll get this plugin. This is the plugin which is going to help us add the social sharing buttons on our website. So to install the plugin, Let\u2019s Click install and then click \u2018activate\u2019. So now we have successfully installed the plugin.<\/p>\n\n\n\n

Once you\u2019ve installed the plugin. we can now go to step 2 which is to \u2018choose the social networks, you want to add to your site\u2019. So to choose the social networks.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"sassy<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Let\u2019s click here And it will take you to this page.<\/p>\n\n\n\n

Choose the social networks you want to add to your site<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"Standard<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now click \u2018standard interface\u2019 And here you can see a list of social networks, which you can add to your site. Now select the networks which you want to add. I\u2019m going to select these.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"selected<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And now you can see that, the networks we selected are shown here.<\/p>\n\n\n\n

Choose where you want to display your sharing buttons<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"where<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Once you\u2019ve selected the social networks we can go to step 3 which is to \u2018choose, where you want to display your sharing buttons\u2019. So to choose the place, Let\u2019s scroll down. And here you can see, all the places where you can add your sharing buttons. Let\u2019s say you want to display the sharing buttons on your blog post like this. Then, you need to enable this option. Now once you\u2019ve selected the location, Next, you need to choose the position where you want to display your buttons. Now if you want to display the buttons above your content like this. Then enable \u2018top\u2019 here And if you want to add the buttons below your content, enable this. Once you\u2019ve selected these options, Click \u2018Save changes\u2019. And As soon as you click \u2018save changes\u2019 Your sharing buttons will be added to your website.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"social<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So now if we go to our \u2018blog post\u2019 And click refresh. You can see that, we now have the sharing buttons. Now if a visitor likes this blog post, And wants to share it all they have to do is. Just click here, And now they will be able to share your post on Facebook. Okay this is how your visitors can share your content on their social network. Now you know how you can add sharing buttons, to your website.<\/p>\n\n\n\n

Change the design of social buttons – to Add Social Share Buttons on WordPress<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"Social<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now once you\u2019ve added the buttons, what if you want to change the design of these buttons. So Next, let\u2019s see how you can change the design of these buttons. So to change the design, Let\u2019s go to wordpress Now go to \u2018theme selection\u2019. And here you can see that, we have different shapes for our buttons. Now choose the shape you want I\u2019m going to choose this-one and here you can see the preview of how the button will look like. Once you\u2019ve selected the design, Just click \u2018Save changes\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"new<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now if we go to our website and click \u2018refresh\u2019. You can see that, our button design has been changed. So this is how you can change the design of your buttons.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"mobile<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Okay! So now, let\u2019s see how your sharing buttons will appear, on our mobile. so lets open our blog on mobile. And as you can see this is how the sharing buttons will appear on your mobile.<\/p>\n\n\n\n

Floating share buttons – to Add Social Share Buttons on WordPress<\/h3>\n\n\n\n

Okay So next, let\u2019s go to part 2 of this tutorial where we see \u2019how you can add a sharing button, which floats on your screen. So to add the floating share buttons, Let\u2019s go to our wordpress dashboard, And then click \u2018floating interface\u2019. First, we need to choose the social networks we want to add.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"floating<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So I am going to select these And Next let\u2019s scroll down.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"where<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And now you need to choose the place where you want to display your floating buttons. I\u2019m going to choose \u2018homepage\u2019 And then click \u2018save changes\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"floating<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now if we go to our homepage and click \u2018refresh\u2019. You can see that, we now have our floating buttons Next, let\u2019s see how these buttons will look on our mobile.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"floating<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Let\u2019s go to our website on our phone And as you can see, this is how your floating buttons will appear, on mobile phones.<\/p>\n\n\n\n

Okay Next, let\u2019s see how you can show the number of shares, next to your share buttons. So to show the number of shares Let\u2019s go back to our wordpress dashboard.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"total<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now go to \u2018standard interface\u2019 And then Scroll down And here, you\u2019ll have an option called \u2018show total shares\u2019. Just enable this option. Now if we click \u2018save changes\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Display<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And then go to our website, and click refresh you can see that, it now shows the share counts. so now we’ve successfully added the share counts but if we click here And share this post on Facebook. You can see that, the share count does not increase Now in order to get the share count to work, We need to connect our website, with Facebook.<\/p>\n\n\n\n

Connect our website with Facebook<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"Misc<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to do that, let\u2019s go to our dashboard, and then go to this tab Now to connect your website with Facebook. You need to get these 2 details from Facebook, and then paste it here. So to get these details let’s open a new tab and then go to \u2018developers.facebook.com<\/a>\u2019. Now click ‘login’ and then login to your Facebook account.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"create<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now to get the details, let’s click “Get Started” and then click \u2018next\u2019 Now select \u2018other\u2019 And then click ‘create app’ now enter \u2018social share\u2019 And then click ‘create app id’.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"developer<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And it will take you to this page.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"app<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Now to get the details, Click ‘settings’ and then click \u2018basic\u2019. And here you\u2019ll get the details which you need to enter on your website. Now to get the share counts working, all you need to do is, just copy these details & paste it on your website.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"pasted<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So let’s copy this and then paste it here. Then let’s copy this and paste it. So once you\u2019ve entered the details Let\u2019s Scroll down and click \u2018save changes\u2019. As soon as you click \u2018save changes’ your share counts will now be working So to check it.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"facebook<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Let\u2019s go to our website Now if we share this post on Facebook.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"count<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And then click \u2018refresh\u2019. You can see that, the share count has increased. Now you know how to add share counts to your sharing buttons. Next, let\u2019s add share counts to our floating buttons.<\/p>\n\n\n\n

Adding share counts to our floating buttons<\/h3>\n\n\n\n
<\/div>\n\n\n\n
\"total<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to add the counts to the floating buttons, Let\u2019s go back to our wordpress dashboard And now go to \u2018floating interface\u2019 and then scroll down and enable the \u2018total shares\u2019 option. Once you\u2019ve enabled this, Now if we click \u2018save changes\u2019 And then go to our homepage and And click refresh.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"count<\/figure>\n\n\n\n
<\/div>\n\n\n\n

You can see that, we have now got the share counts. So this is how you can show the share counts to your visitors.<\/p>\n\n\n\n

Adding social media button on product page<\/h3>\n\n\n\n

next let\u2019s go to the Bonus part of this tutorial, where we see, how you can add social sharing buttons, to your eCommerce website. Once you add these buttons your visitors will be able to share your product, on their social networks.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"to<\/figure>\n\n\n\n
<\/div>\n\n\n\n

So to add our buttons on our product page, Let\u2019s go to our wordpress dashboard. Go to \u2018social share\u2019 and then click \u2018standard interface\u2019 Now Make sure you select the networks you want And then scroll down Now choose the place where you want to display your sharing buttons. As we want to display the buttons on our product page Let\u2019s select \u2018woocommerce product page\u2019. And Click \u2018save changes\u2019.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"social<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And now the share buttons will be added to your e-commerce products. Now if we go to the product page and click \u2018refresh\u2019 You can see that, we now have the sharing buttons on our product.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"share<\/figure>\n\n\n\n
<\/div>\n\n\n\n

And now if you click any of these buttons, you can share this product on that platform. Okay That\u2019s it, guys. This is how you can add social sharing buttons to your wordpress website.<\/p>\n\n\n\n

Now if you want to learn more about wordpress, visit our blog page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

You want your visitors to share your content, on their social media platforms.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3906","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"\nHow to Add Social Share Buttons on WordPress<\/title>\n<meta name=\"description\" content=\"How to Add Social Share Buttons on WordPress | Design of social buttons | Floating Share Buttons | Connect our website with Facebook\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Social Share Buttons on WordPress\" \/>\n<meta property=\"og:description\" content=\"How to Add Social Share Buttons on WordPress | Design of social buttons | Floating Share Buttons | Connect our website with Facebook\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"The Official DevClouds Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-29T12:08:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-29T12:12:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_1-48-1024x475.jpg\" \/>\n<meta name=\"author\" content=\"hammad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hammad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/\",\"url\":\"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/\",\"name\":\"How to Add Social Share Buttons on WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#website\"},\"datePublished\":\"2023-01-29T12:08:25+00:00\",\"dateModified\":\"2023-01-29T12:12:33+00:00\",\"author\":{\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\"},\"description\":\"How to Add Social Share Buttons on WordPress | Design of social buttons | Floating Share Buttons | Connect our website with Facebook\",\"breadcrumb\":{\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devclouds.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add Social Share Buttons on WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devclouds.io\/blog\/#website\",\"url\":\"https:\/\/devclouds.io\/blog\/\",\"name\":\"The Official DevClouds Blogs\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devclouds.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d\",\"name\":\"hammad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g\",\"caption\":\"hammad\"},\"url\":\"https:\/\/devclouds.io\/blog\/author\/hammad\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Social Share Buttons on WordPress","description":"How to Add Social Share Buttons on WordPress | Design of social buttons | Floating Share Buttons | Connect our website with Facebook","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:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Add Social Share Buttons on WordPress","og_description":"How to Add Social Share Buttons on WordPress | Design of social buttons | Floating Share Buttons | Connect our website with Facebook","og_url":"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/","og_site_name":"The Official DevClouds Blogs","article_published_time":"2023-01-29T12:08:25+00:00","article_modified_time":"2023-01-29T12:12:33+00:00","og_image":[{"url":"https:\/\/devclouds.io\/blog\/wp-content\/uploads\/2023\/01\/Screenshot_1-48-1024x475.jpg"}],"author":"hammad","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hammad","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/","url":"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/","name":"How to Add Social Share Buttons on WordPress","isPartOf":{"@id":"https:\/\/devclouds.io\/blog\/#website"},"datePublished":"2023-01-29T12:08:25+00:00","dateModified":"2023-01-29T12:12:33+00:00","author":{"@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d"},"description":"How to Add Social Share Buttons on WordPress | Design of social buttons | Floating Share Buttons | Connect our website with Facebook","breadcrumb":{"@id":"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devclouds.io\/blog\/how-to-add-social-share-buttons-on-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devclouds.io\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add Social Share Buttons on WordPress"}]},{"@type":"WebSite","@id":"https:\/\/devclouds.io\/blog\/#website","url":"https:\/\/devclouds.io\/blog\/","name":"The Official DevClouds Blogs","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devclouds.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/29fe135874604a656a492f57fb43211d","name":"hammad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devclouds.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/19d1520a5ed46e5c53b8333bc3a9bddb9f28e057d9722fbb8e979edd11e22faf?s=96&d=mm&r=g","caption":"hammad"},"url":"https:\/\/devclouds.io\/blog\/author\/hammad\/"}]}},"_links":{"self":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/comments?post=3906"}],"version-history":[{"count":2,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3906\/revisions"}],"predecessor-version":[{"id":3937,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/posts\/3906\/revisions\/3937"}],"wp:attachment":[{"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/media?parent=3906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/categories?post=3906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devclouds.io\/blog\/wp-json\/wp\/v2\/tags?post=3906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}