Blog > Story > Updated: 2023-Nov-12

Boosting visibility, social signals, and brand authority

Website share buttons, those interactive elements on a webpage allowing users to share content on various social media platforms, play a crucial role in boosting online visibility, social signals, and brand authority. These buttons, adorned with icons representing popular platforms like Facebook, Twitter, LinkedIn, and more, are not just decorative features but strategic tools for enhancing your digital presence.

These buttons, adorned with icons representing popular platforms like Facebook, Twitter, LinkedIn, and more, are not just decorative features but strategic tools for enhancing your digital presence.

Implementing share buttons on a website is a great way to encourage users to share your content across various social platforms. When users click on these buttons, they can quickly share the web page's content, such as articles, images, or videos, with their network. (click on share buttons above to see how they work.)

SEO & share buttons

The link between website share buttons and SEO (Search Engine Optimization) may not be immediately evident, but its impact can be substantial. Let's explore several ways in which the inclusion of share buttons on a website can play a meaningful role in influencing and enhancing SEO outcomes:

1. Increased visibility and traffic

Social media platforms have vast user bases, and content shared on these platforms can quickly reach a large audience.
When users share your content, it appears in their social media feeds, exposing it to their followers and connections.
The increased visibility can lead to more clicks and visits to your website, contributing to higher traffic.

2. Social signals

While the direct impact of social signals on search rankings is not explicitly confirmed by search engines like Google, there is a correlation between social activity and search performance.
Content that receives a significant number of shares, likes, and comments may be seen as more valuable and relevant by search engines.
Social signals can also enhance your brand's online presence and influence.

3. Backlinks

Content that is widely shared is more likely to attract links from other websites, blogs, and forums.
Backlinks from reputable sources are a key factor in search engine algorithms. They indicate to search engines that your content is authoritative and worth referencing.
The natural link-building that can result from social sharing can positively impact your site's backlink profile.

4. User engagement

When users engage with your content on social media, it can contribute to positive user engagement signals.
High engagement metrics, such as longer time spent on your site and lower bounce rates, suggest that visitors find your content valuable and relevant.
Search engines may interpret these signals as an indication that your content satisfies user intent.

5. Brand authority

Consistent sharing of high-quality content on social media platforms helps establish your brand as an authority in your industry or niche.
Brands with a strong online presence and positive associations are more likely to be considered reliable sources of information by search engines.
Over time, brand authority can contribute to improved search engine rankings.

The code - without a share button provider

To get these share buttons to work on your website, you will need the following HTML, CSS, and Javascript codes. Note that if you wish to add more buttons, you will have to go to the respective social media websites to seek out the appropriate call. Don't forget to replace URLs with URLs that are applicable to your website.

HTML


<div style=" width: 220px; margin: 40px auto 40px; display: block;">
<div class="share-buttons">
<button id="linkedinButton" onclick="shareOnLinkedIn()" class="share-linkedin share-button"></button>
<button id="twitterButton" onclick="shareOnTwitter()" class="share-twitter share-button"></button>
<button id="pinterestButton" onclick="shareOnPinterest()" class="share-pinterest share-button"></button>
<button id="facebookButton" onclick="shareOnFacebook()" class="share-facebook share-button"></button>
<button id="instagramButton" onclick="shareOnInstagram()" class="share-instagram share-button"></button>
</div></div>

CSS


.share-buttons {display: flex; justify-content: space-between; margin-top: 5px;}
.share-button {padding: 10px 15px; background-color: #0077b5; width: 40px; height: 40px; color: #fff; border: none; border-radius: 5px; cursor: pointer; text-align: center;}
.share-button:hover {background-color: #005783;}
.share-facebook {background-color: #1877f2; background-image: url("https://www.ladybird-digital.com/images-blog/share-facebook.svg");}
.share-twitter {background-color: #1da1f2; background-image: url("https://www.ladybird-digital.com/images-blog/share-twitter.svg");}
.share-pinterest{background-color: #ffffff; background-image: url("https://www.ladybird-digital.com/images-blog/share-pinterest.svg");}
.share-instagram{background-color: #ffffff; background-image: url("https://www.ladybird-digital.com/images-blog/share-instagram.svg");}
.share-linkedin {background-color: #0077b5; background-image: url("https://www.ladybird-digital.com/images-blog/share-linkedin.svg");}
.code-container {max-width: 800px; margin: auto; width: 100%;}
.code-container h3{margin: 40px 0 40px 0 !important; color: black;}
.implementation h3{margin: 30px 0 30px 0 !important; color: black;}
.seo h3{margin: 30px 0 30px 0 !important; color: black;}
.code {display: block; padding: 0 20px 0 20px; background-color: #f7f7fb; border: solid .5px #e5e5ea; border-radius: 10px; overflow: auto;}

Javascript


function shareOnFacebook() {
  var url = encodeURIComponent(window.location.href);
  window.open('https://www.facebook.com/sharer/sharer.php?u=' + url, '_blank', 'width=600,height=400');
}

function shareOnTwitter() {
  var url = encodeURIComponent(window.location.href);
  var text = encodeURIComponent('Check out this awesome content!');
  window.open('https://twitter.com/intent/tweet?url=' + url + '&text=' + text, '_blank', 'width=600,height=400');
}

function shareOnLinkedIn() {
  var url = encodeURIComponent(window.location.href);
  var title = encodeURIComponent('Your Page Title');
  window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + url + '&title=' + title, '_blank', 'width=600,height=400');
}

function shareOnInstagram() {
  var url = encodeURIComponent(window.location.href);
  var title = encodeURIComponent('Your Page Title');
  window.open('https://www.instagram.com/sharer.php?u=' + url + '&title=' + title, '_blank', 'width=600,height=400');
}

function shareOnPinterest() {
  var url = encodeURIComponent(window.location.href);
  var title = encodeURIComponent('Your Page Title');
  window.open('https://pinterest.com/pin/create/button/?url=' + url + '&description=' + title, '_blank', 'width=600,height=400');
}

Implementation

Here's a general guide on how to add share buttons to a website:

1. Choose share buttons

Decide which social media platforms you want to include share buttons for. Common options include Facebook, Twitter, LinkedIn, Pinterest, WhatsApp, and others.

2. Select a share button provider

You can either use the official share buttons provided by each platform or use a third-party service that consolidates multiple buttons into one. Popular third-party providers include AddThis, ShareThis, and social media plugins for content management systems like WordPress.

3. Generate code

Official Buttons: If you choose official buttons, visit the developer sections of the respective social media platforms (e.g., Facebook Developer, Twitter Developer) to generate code snippets for share buttons.
Third-party Providers: If using a third-party provider, sign up, configure your share buttons, and generate the code. These services often provide customization options.

4. Add code to your website

HTML: Place the generated code where you want the share buttons to appear. This is typically in the HTML of your webpage, either within the body or in specific sections.
CMS (Content Management System): If you're using a CMS like WordPress, there are plugins available that simplify the process. Install the plugin, configure settings, and the buttons will be added to your content.

5. Customize appearance (optional)

CSS: If you want to customize the appearance of your share buttons, you can use CSS. This might include adjusting the size, color, or spacing of the buttons.

6. Test your share buttons

Before making the changes live, test the share buttons to ensure they are working correctly. Share buttons should open a pop-up or new window allowing users to share the content on the respective social platform.

7. Consider privacy and GDPR compliance

Be mindful of privacy concerns and comply with regulations like GDPR. Some share button providers offer privacy-friendly solutions that do not track user data until they actively interact with the buttons.

8. Monitor analytics (optional)

If your chosen provider offers analytics, consider monitoring them to understand how users are interacting with your share buttons and which platforms are most popular.

Summary

While website share buttons can significantly contribute to factors like increased visibility, social signals, and brand authority, it's important to note that they are just one element of a comprehensive SEO strategy. Quality content, relevant keywords, technical SEO aspects, and other factors also play crucial roles in determining search engine

Commenting is not available in this channel entry.