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


シェアしましょうー

はーい
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/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; }
3. 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>
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アイコンフォントがおすすめです。無料で揃いますよー。
さいごに

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

私もですー
おすすめ
かんれん
- web / 2018.8.30
- 【CSS】line-heightの単位は必要ない
- web / 2019.5.30
- 【CSS】ホバー(マウスオーバー)実装サンプル集(画像の明度を上げる編)
- web / 2018.8.29
- 【CSS】px(ピクセル)とem(エム)
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.12.08New
- 信州アップルパイ研究所_Q
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.11.30
- 【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える
- 指定した場所で出したいのですよー そして指定した場所で消したいのですねー もくじ 実…
- 125naroom / デザインするところ(会社)です。