[実は楽勝?]プラグインを使わずにSNS連携ボタンを実装する方法
公開:2019.10.25 更新:2019.10.26

こんにちは~最近はアニメ記事にどっぷりな木彫り猫です~。

今回は久しぶりに技術系です。きっかけは突然に……!

うそ…….!?私の速度遅すぎ…….?

それもこれもプラグインのせい

だ!と決めつけることにして、今回はプラグインに頼らないSNS連携ボタンの実装です。

これ↓

もともとこのサイトのSNSボタンは[seed social]というプラグインで実装したものです。ショートコードだったりのらくらく作業で簡単にSNS共有ボタンが実装できる奴ですね。

しかしまあプラグインに頼りすぎるとサイトが滅亡するので、さっそく脱プラグインの方法を模索していきます。

すると、意外も意外にほぼ<a>アンカータグだけで実装できるらしいw

今まで何をやっていたんだ……。参考記事は下から↓

外部記事サムネ

プラグインなしでSNSシェアボタンを自作するための基本知識と実装コード、アナリティクス解析方法

参照記事

要約すると、連携ボタンで飛ぶ各SNSサービスの共有ページ文は<a>アンカータグのURLにいろんな値(プロパティっていうらしい)を与えてあげれば簡単に作れるよ!という感じ。例↓

<div class="twitter">
 <a href="//twitter.com/share?text=<?=$share_title?>&url=<?=$share_url?>" title="Twitterでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">
     <i class="fab fa-twitter"></i>
      <span class="s-text">Twitter</span>
      <span class="count"></span>
  </a>
</div>

あとはスタイルを整えて、ボタンのどこかにfont-awesomeからアイコン持ってきて…….って感じで終了です!

実装後見たい人は下にスクロールすればあるよ↓ ^^) _旦~~↓

なお脱プラグイン後………

変わってねえ…….( ゚Д゚)~~~

当サイトのコード(コピペ用

以下当サイトのSNS連携ボタンの全コード。

HTML

<!-- socialarea --> 
       <div class="social-area">
         <?php
          $share_url   = get_permalink();
          $share_title = get_the_title();
         ?>
         <div class="facebook">
           <a href="//www.facebook.com/sharer.php?src=bm&u=<?=$share_url?>&t=<?=$share_title?>" title="Facebookでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=600');return false;">
             <i class="fab fa-facebook-f"></i>
             <span class="s-text">Facebook</span>
             <span class="count"></span>
           </a>
         </div>
         <div class="twitter">
           <a href="//twitter.com/share?text=<?=$share_title?>&url=<?=$share_url?>" title="Twitterでシェア" onclick="javascript:window.open(this.href, '_blank', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;">
             <i class="fab fa-twitter"></i>
             <span class="s-text">Twitter</span>
             <span class="count"></span>
           </a>
         </div>
         <div class="line">
           <a href="//line.me/R/msg/text/?<?=$share_title.'%0A'.$share_url?>" target="_blank" title="LINEに送る">
             <i class="fab fa-line"></i>
             <span class="s-text">Line</span>
             <span class="count"></span>
           </a>
         </div>
       </div>
<!-- socialarea 終わり -->

CSS

/* social */
.social-area {
  color: #fff;
  clear: both;
  padding-bottom: 30px;
  padding-top: 50px;
  font-family: sans-serif;
  font-size: 12px;
  line-height: 20px;
  margin: 1.5em 0;
  text-align: left;
}
.social-area div {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  vertical-align: top;
}
.social-area a {
  border-radius: 3px;
  padding: 6px 13px 6px 9px;
  display: inline-block;
  font-size: 13px;
}
.social-area .facebook a {
  background-color: #3b5998;
  float: left;
}
.social-area .twitter a {
  background-color: #55acee;
}
.social-area .line a {
  background-color: #00c300;
}
.social-area i {
  font-size: 20px;
  vertical-align: -3px;
  color: #fff;
  padding: 0 3px;
}
.social-area .s-text {
  margin-left: 4px;
  display: inline-block;
}
.social-area span {
  color: #fff;
}
/* social */

以上です!気に入ったら適当に使っちゃって大丈夫です~

おすすめ商品

[基本を学ぶにはこれ]
参考にしているWordpress教本

[テーマ作成のお供に!]
WordPressデザインレシピ集

コメント

内容をご確認の上、送信してください。