Hello, my gorgeous friends on the internet 👋, today we will be building a social media share button together, which you can include in your next project.

The share button allows users to quickly share content from your webpage with all of their followers, from news articles to movies or music links. Clicking the share button provides the user with either pre-populated content or a link to that webpage, which you can customize before sending.

Note: not all social media platform allows a pre-populated content to be shared, the user has to copy and paste the content before posting.

What we are building

At the end of this article, you will have an idea of how you can integrate the following social media share buttons into a project.

1. Twitter share button
2. LinkedIn share button
3. Facebook share button

Requirement

1. Your code editor
2. The content you want to share and
3. This article
4. That's really all honestly 🤭

So what are we waiting for? 🤷‍♂️ let's get started

1. Twitter share button

Twitter is one platform your client might want to share their content to; due to the potential broad audience their product or article can reach.

One nice thing that I like about adding the Twitter share button is that it comes with a custom style, which will save you few lines of CSS.

let's check it out

Twitter provides a script to include on your webpage for this custom style

i. Include the script below on your webpage 👇

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ii. Add the <a> anchor tag with the following attributes

<a
class="twitter-share-button"
target="_blank"
rel="noopener noreferrer"
data-size="large"
href="https://twitter.com/intent/tweet?text=I just published an article on how you can share content to Twitter from the client website"
>
Tweet
</a>

iii. Output 👇👇👇

The <a> tag defines a hyperlink, which is used to link from one page to another.

The <a> tag is made up of attributes which will be explained below 👇

Attribute Explanation

1. class="twitter-share-button" (compulsory)

This is a unique class name that Twitter uses to style the button and to add the bird icon, this is what saves you from writing your own button CSS styles, it is compulsory if you want your button to look exactly like the example above.

Disadvantage: You cannot change the button label from Tweet unless you remove the "twitter-share-button" class from the anchor tag and write your own CSS style as the Tweet label is automatically inserted by the script when you use the "twitter-share-button".

But Twitter is all about tweets, why use share? 🤔

2. target="_blank" (optional)

This is used to specify where the link should be opened, the reason is you might want your user to remain on your webpage while they share the content on Twitter, the value "_blank" opens the Twitter page to share the content on a new TAB, while your webpage is still opened.

You can read more about the HTML Target Attribute in this ARTICLE written by Bolaji Ayodeji.

3. rel="noopener noreferrer" *(depends on target attribute)

This attribute was used because we used the target="_blank" attribute, which can cause a security vulnerability on our website. Including the rel="noopener noreferrer" will prevent potential data theft or other phishing attacks.

You can read more about the Security Vulnerabilities of The target="_Blank" Attribute in this ARTICLE written by Bolaji Ayodeji.

4. data-size="large" (Optional)

This attribute is used to specify the size of the button, you can either set it to large or small.

The default data-size value is small.

5. href="https://twitter.com/intent/tweet?text="content" (Compulsory)

The most important attribute of the <a> element is the href attribute; which indicates the links' destination when clicked.

This is what enables a redirect to the Twitter page when the button is been click on, for the content to be shared.

To learn more about the href attribute visit 👉 w3school

Our main focus is the URL value we set our href attribute to below.

"twitter.com/intent/tweet?text=" your content goes here"``

let me break it down below.

👉 https://twitter.com

This is the official Twitter domain name, it will take you to the Twitter homepage when you clicked on it.

👉👉 https://twitter.com/intent

The difference here is the /intent , when you click on this, Twitter will treat the /intent as a username and return user not found 👇 provided there is no account with that username.

A Web Intent is a URL that allows users to quickly send a pre-formatted tweet.

To read more about a Twitter Web Intent visit their documentation HERE

👉👉👉 https://twitter.com/intent/tweet

I intend to tweet!!!

The difference here is the /tweet, in summary, we are telling Twitter that we are intending to post a new tweet, and once this URL is loaded, Twitter pops up the new tweet field like below 👇.

👉👉👉👉 https://twitter.com/intent/tweet?text=" Hello, World"

The only difference in the URL is ?text="Hello, World".

We are storing our content as value to the text variable, which is an argument for /tweet.

Below 👇 is the output when you click the link above 👆

Wow!!! we did it, you can proceed to play around with the Twitter share button since you now know what is compulsory and how things work.

2. LinkedIn share button

LinkedIn is a very broad community for professionals, your client might request a share button that links to LinkedIn in other for their content to reach more audience.

But LinkedIn does not support inserting our content into its URL 😨, so how do we share the right content to LinkedIn 🤷‍♀️?

The only thing LinkedIn URL allowed to be inserted into its URL is an external URL. 👉 https://www.linkedin.com/sharing/share-offsite/?url={external-url}

Similar to how the Twitter URL is been explained, the LinkedIn URL should match the format above to work as intended.

The external URL is the URL of the website where the content is been hosted, this is the link interested people will click to visit the site hosting the main content.

If we have the link below 👇

<a 
href="https://www.linkedin.com/sharing/share-offsite/?url=unclebigbay.hashnode.dev" 
target="_blank" 
rel="noopener noreferrer"
>
Share on LinkedIn
</a>

It will redirect the user to 👇 this page

Notice that we have two options

1. To share the content as a post 👇

1. To send the content as a message 👇

As you can see that the two options only display the preview of the external link we have provided (unclebigbay.hashnode.dev) with an empty text field.

This means that you have two options for your users

1. Users will compose their custom caption
2. Provide a caption for them to copy-paste

1. Users will compose their custom caption

If you have tried to share your article on LinkedIn from hashnode, you will realize that the share page on Linkedin is not prefilled like the tweet, then you either compose a new caption or copy what hashnode provides as a caption on Twitter.

2. Provide a caption for them to copy-paste

This idea pops up in my head while working on something similar for a client, so we're going to build that together.

you can provide a copy option for the users to paste when the LinkedIn share page has opened.

check the sample below 👇.

I have covered how you can build your own copy button in this 👉 ARTICLE (Bonus)

2. Facebook share button

We won't spend much time on this, as Mark does not allow inserting text in the URL just like Linkedin.

Below is the URL to share content on Facebook 👇.

<a
    href="https://www.facebook.com/sharer/sharer.php?u=https://unclebigbay.hashnode.dev" 
    target="_blank"
    rel="noopener noreferrer"
>
    Share on Facebook
</a>

Once you have a single copy feature you don't need another for Facebook 😉

Bonus

1. Instagram does not support sharing content from another site.

List of other platforms that do not support sharing (in case you want to try)

1. Youtube
2. Vimeo
3. Tik Tok

Final Thoughts

I hope you enjoyed building the copy to clipboard feature and also hope it will be useful someday in your project, if you found this helpful, I would like to connect on Twitter and if you would like to support my blog by contributing to buy it a custom domain name, feel free to click on the button below 👇.

This article was reviewed by Grace O..