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

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

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

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

いいこと(メリット)

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

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

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/intent/tweet?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;
}

Twitter

基本形

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

パラメータを設定する

<a href="https://twitter.com/intent/tweet?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/intent/tweet?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/intent/tweet?url=<?php the_permalink(); ?>&text=<?php echo get_the_title(); ?>" target="_blank" rel="nofollow">Twitter</a>

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>

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>

はてなブックマーク

基本形

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

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>

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>

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アイコンフォントがおすすめです。すべて無料で揃います。

さいごに

チーズパンも食べたくなってきましたー
同じくですー
Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

4

/

14

2024

Googleさんの
おすすめ

4

/

14

2024

デザインの記事

TALKING CITY|柏の葉イノベーションフェス2023
5年経った無印良品窓の家
【jQuery】 ローディング、実装サンプル集