https://wplabo.idea-hack.com/blog/code/html-css/how-to-make-an-original-share-button/
How to make an original share button

How to make an original share button

To share articles on SNS such as Facebook and Twitter, we need a “Share button.”
Since the URL and parameters are different for each service, you have to set each one if you want to create the share button in the original.
This time, we will introduce the URL for setting the share button for each SNS and how to fix it.

Advantages of installing original share button

You can use the official site’s generators and plugins to create share buttons, but what are the benefits of creating share buttons in the original?

Can be made with the design you want

Many things can be installed Share button by WordPress plugin.

But surprisingly, there are few variations of the design, and you can not find what you want.

Pages load faster

Using official share buttons and external services often require JavaScript to be loaded, which can slow down the page display speed.

Since you can create an original button and complete it with just HTML, there is the advantage that there is no need to load an extra script.

And this will not affect the loading speed.

Little customization is possible

You can customize the content to be shared by setting parameters such as Twitter.

However, such customization may not be possible when using an external service or plugin.

If you use an external service, there is a possibility that not all the SNS buttons that you want to install are prepared.

In that respect, you can customize the content to be shared freely if you create in the original.

There is a merit that you can decide the type of SNS to install the button yourself.

Setting method for each share button

Now let’s introduce the share button URL and the content to be set for each service.

Facebook

The URL set for the Facebook share button is as follows.

You can make it a button by setting an icon such as Font Awesome where the text is stored.

html
<a href="http://www.facebook.com/share.php?u={URL}" rel="nofollow" target="_blank"> Link text </a>

The behavior when the button is pressed can be confirmed here.

Twitter

The basic form of the URL set to the Twitter share button is as follows.

html
<a href="https://twiter.com/share?url=https://wplabo.idea-hack.com/blog/code/html-css/how-to-make-an-original-share-button/"> link text </a>

Also, you can add various information to the post by setting parameters to the URL for sharing on Twitter.

The following is a list of parameters that can be set.

ParameterDescription
textSet the text to be stored by default when you tweet. It is a good idea to have a page title included.
urlSet the URL when you want to put the page information in the tweet. Let’s place in the URL of each page.
hashtagsThis item is set when you want to add a hashtag to a tweet. You can set multiple items separated by commas.
viaThis item is set when you want to add the display “From @ ◯◯” to the tweets. If you have an official account, set its id.
relatedhis item is set when there is an account that you want to encourage you to follow after you tweet. If you have an official account here, you should set it up.

If all the above parameters are set, it will be as follows.

html
<a href = "https://twitter.com/share?
   url = {URL of page} &
   via = {Twitter ID} &
   related = {Twitter ID} &
   hashtags = hashtag, hashtag2 &
   text = link text
   rel = "nofollow"
   target = "_ blank"> Link text </a>

If you are using WordPress, you can change the text or URL dynamically using get_the_title () or get_the_permalink ().

html
<a href="https://twitter.com/share?
  url=<?php echo get_the_permalink(); ?>&
  via={Twitter ID}&
  related={Twitter ID}&
  hashtags=web,webdesign&
  text=<?php echo get_the_title(); ?>" 
  rel="nofollow" 
  target="_blank">Tweet</a>

The behavior when the button is pressed can be confirmed here.

Pocket

Pocket is a service that allows you to organize pages you want to read later.

There are many users, so be sure to install the button.

The setting of URL is as follows.

html
<a href="http://getpocket.com/edit?url={URL}&title={Page Title}" rel="nofollow" rel="nofollow" target="_blank"> Link Text </a>

The behavior when the button is pressed can be confirmed here.

Feedly

Feedly is a popular RSS reader service. It is not precisely a share button, but it is better to add it because it is installed at many sites.

The settings for the URL are as follows: Note that in the case of Feedly, {URL} must specify the feed’s URL.

html
<a href='https://feedly.com/i/subscription/feed/{URL}' target='blank' rel="nofollow"> Link text </a>

The behavior when the button is pressed can be confirmed here.

Summary

Since the effect of SNS spreading is so significant, you should always set up blogs and media that do not have SNS share buttons.

Once you have created the button design, you can easily set the button by merely placing the link destination.

Let’s make an original share button.