なんにもない日の頭の中はこんなもんだったりする

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

【WordPress】TwitterなどのSNSシェアボタンの設置方法(オリジナル編)
きのこさん
シェアしましょうー
きのこさん
はーい

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

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

いいこと(メリット)

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

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

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

HTMLとCSSはこちら

HTML

<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>

CSS

.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>
パラメータ 説明
url ページのURL
via 「@◯◯さんから」という表示を追加したい場合
text ツイート本文(ページのタイトルが多いですね)
related 投稿後に指定したアカウントのプロフィールとフォローボタンを表示させたい場合
hashtags ハッシュタグを指定したい場合。カンマで複数指定できます

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

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

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

文字 コード
(スペース) %20
# %23
, %2C
@ %40

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

さいごに

きのこさん
チーズパンも食べたくなってきましたー
きのこさん
私もですー
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

AOI MIYAZAKI official website – 宮﨑あおい
naturalpermanent.com
12月10日
やんわりとした生活