WordPressにSNSシェアボタン(Twitter / Facebook / Line / はてなブックマーク / Pocket)を設置する【プラグイン無し】

WordPressにSNSシェアボタン(Twitter / Facebook / Line / はてなブックマーク / Pocket)を設置する【プラグイン無し】

まずはプレーンなソースコード

single.phpやpage.php等のSNSボタンを設置したい箇所に記述

<?php
    $share_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
    $share_title = get_the_title().'|'.get_bloginfo('name');
?>
<ul>                    
    <li><a href="http://twitter.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer">Twitter</a></li>
    <li><a href="https://www.facebook.com/share.php?u=<?php echo $share_url; ?>&t=<?php echo $share_title; ?>"  target="_blank" rel="noopener noreferrer">Facebook</a></li>
    <li><a href="https://line.me/R/msg/text/?<?php echo $share_title; ?>%0D%0A<?php echo $share_url; ?>"  target="_blank" rel="noopener noreferrer">Line</a></li>
    <li><a href="http://b.hatena.ne.jp/entry/<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer">B!</a></li>
    <li><a href="http://getpocket.com/edit?url=<?php echo $share_url; ?>&title=<?php echo $share_title; ?>" target="_blank" rel="noopener noreferrer">Pocket</a></li>
</ul>

シェアの際に“ページタイトル | サイトのタイトル”が表示されるようにしてます。
single.php等のSNSボタンを設置したい箇所に記述してください。
ページのURLはWordPressの機能は使用せず、単にPHPでURLを取得しています。

Font Awesomeを使用してボタンを作成する

本サイトで使用しているSNSボタンのソースコードです。(このページの下の方に設置しています)
「はてなブックマーク」はFont Awesomeにフォントが無いので、CSSで見栄えを調整します。

Font Awesomeのソースコードを<head>タグ内に設置

CDNを使用します。ソースの設置場所は迷ったら</head>(閉じタグ)前にでも…

header.php内の<head>タグ内

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

SNSボタンのソースを設置したい場所へ記述

single.phpやpage.php等のSNSボタンを設置したい箇所に記述

<?php
    $share_url = (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
    $share_title = get_the_title().'|'.get_bloginfo('name');
?>
<div class="sns">
    <p class="sns-text">この記事をシェア</p>
    <ul class="sns-list">                    
        <li class="sns-item twitter"><a href="http://twitter.com/intent/tweet?text=<?php echo $share_title; ?>&url=<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter-square"></i></a></li>
        <li class="sns-item facebook"><a href="https://www.facebook.com/share.php?u=<?php echo $share_url; ?>&t=<?php echo $share_title; ?>"  target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-square"></i></a></li>
        <li class="sns-item line"><a href="https://line.me/R/msg/text/?<?php echo $share_title; ?>%0D%0A<?php echo $share_url; ?>"  target="_blank" rel="noopener noreferrer"><i class="fab fa-line"></i></a></li>
        <li class="sns-item hatebu"><a href="http://b.hatena.ne.jp/entry/<?php echo $share_url; ?>" target="_blank" rel="noopener noreferrer">B!</a></li>
        <li class="sns-item pocket"><a href="http://getpocket.com/edit?url=<?php echo $share_url; ?>&title=<?php echo $share_title; ?>" target="_blank" rel="noopener noreferrer"><i class="fab fa-get-pocket"></i></a></li>
    </ul>
</div>

CSSで見た目を整える

style.css

.sns {
    margin-top: 50px;
    color: #666;
    text-align: center;
    background-color: #f5f5f5;
    padding: 20px 10px;
}

.sns-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.sns-text::before,
.sns-text::after {
    width: 20px;
    height: 2px;
    border-radius: 3px;
    background-color: #666;
    content: "";
}

.sns-text::before {
    transform: rotate(50deg);
    margin-right: 10px;
}

.sns-text::after {
    transform: rotate(-50deg);
    margin-right: 10px;
}

.sns-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.sns-item {
    margin: 0 10px;
    width: 60px;
    height: 60px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
    line-height: 1;
}

.sns-item i {
    font-size: 40px;
    line-height: 1;
}

.sns-item:hover {
    transform: scale(1.05);
}

.sns-item.twitter a {
    color: #1DA1F2;
}

.sns-item.facebook a {
    color: #3C5A99;
}

.sns-item.line a {
    color: #00B900;
}

.sns-item.pocket a {
    color: #ee4056;
}

.sns-item.hatebu a {
    display: flex; 
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF;
    background-color: #00A4DE;
    width: 36px;
    height: 36px;
    font-size: 23px;
    border-radius: 6px;
    font-weight: bold;
}

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ