[Plug-in completely unused] Install SNS share button only with HTML and CSS [WordPress]

2019/7/302019/8/3

table of contents

1. Trigger
2. Features of the share button by this code
3. Share button code and installation method
4. HTML
5. CSS
6. Display example

Trigger

Until now, the SNS share button has been "WordPress Share Buttons Plugin – AddThisI relied on a plug-in called ".

This plugin is

You can add Hatena bookmarks as well as major overseas SNS such as Facebook, Twitter, Line, pocket, and Pinterest.
There is a slender, small share button design on the side.

I liked it in that respect, but it was a fairly heavy plug-in.

If you search for "no plugin, share button", you will find a method using PHP / CSS / HTML / social icon plugins.

This time, I tried to install the SNS share button only with CSS and HTML without using PHP and social icons.

Features of the share button by this code

Created with HTML and CSS only
Don't use PHP, social icons
Execute javascript in tag
Automatically get the URL and page title of the page to share
Faster than plugins (up to 10 points higher than AddThis)
The number of shares cannot be counted
Horizontal simple design

Share button code and installation method

HTML

Where to write:
"Appearance"-> "Customize"-> "Widget"-> Where you want to place the share button-> Add widget-> "Custom HTML"

Share this article

CSS

Place to write: "Appearance"-> "Customize"-> "Additional CSS"

/ * --- SNS share button --- * / / * Characters on the button * / .fa-twitter: before, .fa-hatena: before, .fa-line: before, .fa-pocket: before {font -family: helvetica neue, helvetica, arial, sans-serif; font-weight: bold; font-size: 14px} .fa-facebook: before {content: "f"; font-family: Verdana; font-weight: bold } .fa-twitter: before {content: "twitter";} .fa-hatena: before {content: "B!"; font-family: Verdana;} .fa-line: before {content: "Line";} .fa-pocket: before {content: "pocket";} / * Adjust button display position * / .button-area {text-align: center; margin-top: 15px;} / * Title display settings * /. button-area-title {text-align: center; padding: .7em;} / * Button block design * / .button-area li a {padding: 2px; display: block; text-align: center; text-decoration : none; color: #fff; border-radius: 4px;} / * Background color for each SNS * / .twitter a {background-color: # 55acee;} .facebook a {background-color: # 3b5998;} .hatena a {background-color: # 008fde;} .line a {background-color: # 1dcd00;} .pocket a {background-color: # ea5a6c;} / * Delete list "・" * / .button-area ul {margin: 0; padding: 0; list-style: none;} / * Button width and margin settings * / .button-area li {float: left; width: 19%; margin: 0%;}. button-area ul: after {display: block; clear: both;} / * Display settings when the cursor is placed on the button * / .button-area li a: hover {-ms-transform: translateY (-3px); -webkit-transform: translateY (-2px); transform: translateY (-2px);}