【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）

シェアしましょうー

はーい

1. オリジナルで作るといいことあるの？

とってもあります。
ワードプレスで便利なシェアボタンプラグインはいっぱいあるのですが、少々重くなってしまうのです。
（サーバーによってはかなり重くなるらしいです。。）

いいこと（メリット）

• 軽くなる！（ページの読み込み速度が速くなる）
• 好きなデザインで作れる！
• 細かい設定（カスタマイズ）ができる！

2. シェアボタンの実装サンプル

See the Pen
【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編） by 125naroom (@125naroom)
on CodePen.

<div class="share">
  <ul>
    <li class="twitter">
      <a href="https://twitter.com/share?url=https://125naroom.com/web/3327&text=【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）%20%40125naroom%20%23125naroom" target="_blank" rel="nofollow">
        <i class="fab fa-twitter"></i><span>tweet</span>
      </a>
    </li>
    <li class="facebook">
      <a href="https://www.facebook.com/sharer.php?u=https://125naroom.com/web/3327&t=【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）" target="_blank" rel="nofollow">
        <i class="fab fa-facebook"></i><span>facebook</span>
      </a>
    </li>
    <li class="pinterest">
      <a href="https://pinterest.com/pin/create/button/?url=https://125naroom.com/web/3257&media=https://125naroom.com/wp/wp-content/uploads/2019/11/web_w_006.png&description=【WordPress】TwitterなどのSNSシェアボタンの設置方法（オリジナル編）" target="_blank" rel="nofollow">
        <i class="fab fa-pinterest-square"></i><span>Pinterest</span>
      </a>
    </li>
    <li class="hatena">
      <a href="https://b.hatena.ne.jp/add?mode=confirm&url=https://125naroom.com/web/3327" target="_blank" rel="nofollow">
        <i class="fab fa-hatena"></i><span>はてな</span>
      </a>
    </li>
    <li class="pocket">
      <a href="https://getpocket.com/edit?url=https://125naroom.com/web/3327" target="_blank" rel="nofollow">
        <i class="fab fa-get-pocket"></i><span>Pocket</span>
      </a>
    </li>
    <li class="feedly">
      <a href="https:/feedly.com/i/subscription/feed/https://125naroom.com/feed" target="_blank" rel="nofollow">
        <i class="fas fa-rss"></i><span>Feedly</span>
      </a>
    </li>
  </ul>
</div>

.share {
  margin: 50px 0;
}
.share ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.share ul li {
  width: 15.666%;
  margin: 0 1.2% 0 0;
}
.share ul li:last-child {
  margin: 0;
}
.share ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
  height: 45px;
  border: none;
  text-decoration: none;
  transition-property: all;
  transition-duration: 0.3s;
}
.share ul li a:hover {
  font-size: 24px;
}
.share ul li a i {
  font-style: normal;
}
.share ul li.twitter a {
  background-color: #55acee;
}
.share ul li.facebook a {
  background-color: #35629a;
}
.share ul li.pinterest a {
  background-color: #d4121c;
}
.share ul li.feedly a {
  background-color: #2bb24c;
}
.share ul li.pocket a {
  background-color: #ee4056;
}
.share ul li.hatena a {
  background-color: #2c6ebd;
}
.share ul li.hatena a .fa-hatena:before {
  content: 'B!';
  font-weight: bold;
}
.share ul li a span {
  display: none;
}

3. Twitter

基本形

<a href="https://twiter.com/share?url={ページのURL}" target="_blank" rel="nofollow">Twitter</a>

パラメータを設定する

<a href="https://twitter.com/share?url={ページのURL}&via={TwitterのID}&related={TwitterのID}&hashtags=今日,晴れ&text={ページのタイトル}" target="_blank" rel="nofollow">Twitter</a>

パラメータを使わずにこんな感じでもOK

<a href="https://twitter.com/share?url={ページのURL}&text={ページのタイトル}%20%40designnokoto%20%23webdesign" target="_blank" rel="nofollow">Twitter</a>

※ コンフィグにURL文字列を設定するとき、URLに使用不可とされる文字を含めるには、URLエンコードした文字に置き換える必要がある。

WordPressの場合（投稿のループ内に入れること）

<a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow">Twitter</a>

4. Facebook

基本形

<a href="https://www.facebook.com/share.php?u={ページのURL}&t={ページのタイトル}" target="_blank" rel="nofollow">Facebook</a>

WordPressの場合（投稿のループ内に入れること）

<a href="https://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow">Facebook</a>

5. Pinterest

基本形

<a href="https://pinterest.com/pin/create/button/?url={ページのURL}&media={画像のURL}&description={ページのタイトル}" target="_blank" rel="nofollow">Pinterest</a>

WordPressの場合（投稿のループ内に入れること）

<a href="https://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); echo $thumb['0']; ?>&description=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow">Pinterest</a>

6. はてなブックマーク

基本形

<a href="https://b.hatena.ne.jp/add?mode=confirm&url={ページのURL}" target="_blank" rel="nofollow">はてなブックマーク</a>

WordPressの場合（投稿のループ内に入れること）

<a href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">はてなブックマーク</a>

7. Pocket

基本形

<a href="https://getpocket.com/edit?url={ページのURL}" target="_blank" rel="nofollow">Pocket</a>

WordPressの場合（投稿のループ内に入れること）

<a href="https://getpocket.com/edit?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">Pocket</a>

8. Feedly

基本形

<a href="https://feedly.com/i/subscription/feed/{フィードのURL}" target="_blank" rel="nofollow">Feedly</a>

WordPressの場合（投稿のループ内に入れること）

<a href="https://feedly.com/i/subscription/feed/<?php echo urlencode(bloginfo('rss2_url')); ?>" target="_blank" rel="nofollow">Feedly</a>

9. LINE

基本形

<a href="https://timeline.line.me/social-plugin/share?url={ページのURL}" target="_blank" rel="nofollow">LINE</a>

WordPressの場合（投稿のループ内に入れること）

<a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink(); ?>" target="_blank" rel="nofollow">LINE</a>

アイコンフォントはどこで？

個人的には、Font Awesome、IoniconsのWebアイコンフォントがおすすめです。無料で揃いますよー。

Font Awesome

Ionicons

さいごに

チーズパンも食べたくなってきましたー

私もですー