シェア

Web

SNSシェアボタンをWordPressで自作実装する

WordPressでシェアボタンを実装するよう依頼されていたのに、すっかり忘れ、急いで調べたので、メモ。自作の方がスピードが早いそうなので、下記を参考に実装しました。日本のサービスだとアイコンがないものもあるので、FontAwesomeとIcoMoonを使ったやり方がポピュラーなんですね。

各種SNSのシェアボタン設置用URLまとめ！サンプルコードも | Web Design Trends
Facebook、TwitterなどのSNSに記事をシェアしてもらうのに必要なのが「シェアボタン」です。サービスごとにU…
Web Design Trends

FontAwesomeを設定する

上記参考サイトと同様に、6つのサービスのうち、Line・Facebook・X・Pocketの4つがあるFontAwesomeからピックアップ。設定は下記サイトを参考に行いました。特に難しいところはなく、うまい具合にできます。

Font Awesome(v6)の使い方 | Web-saku
Font Awesomeの中でも無料で利用できるFree版の使い方やアレンジの方法について、初めてFont Awesom…
Web-saku

IcoMoonを設定する

はてなブックマークとFeedlyの残り2つのサービスは、IcoMoonにあるので、こちらも下記サイトを参考に設定。こちらも簡単にできました。

IcoMoonの使い方 | BLOG｜ホームページ制作 Brick Plan【ブリックプラン】
IcoMoonはフォントファイルとCSSをダウンロードして使用するタイプのアイコンフォントです。Font Awesome…

WordPressタグを埋め込む

あとは、雛形にWordPressタグを埋め込むだけ。ページのURLとタイトルタグの内容を抜き出したかったので、下記のようにしました。うん、すごい簡単。昔も同じようなことした記憶があるけど、もっと苦労した気がします。

<ul class="sns">
  <li class="sns__item line">
    <a href="https://social-plugins.line.me/lineit/share?url=<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" target="_blank" rel="nofollow noopener" aria-label="LINEで共有">
      <i class="fab fa-line"></i>
    </a>
  </li>
  <li class="sns__item facebook">
    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" rel="nofollow noopener" target="_blank" aria-label="FACEBOOKで共有">
      <i class="fab fa-facebook-f"></i>
    </a>
  </li>
  <li class="sns__item x">
    <a href="https://twitter.com/intent/tweet?url=<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>&text=<?php $title = wp_get_document_title(); echo $title; ?>" rel="nofollow noopener" target="_blank" aria-label="Xで共有">
      <i class="fa-brands fa-x-twitter"></i>
    </a>
  </li>
  <li class="sns__item hatebu">
    <a href="https://b.hatena.ne.jp/add?mode=confirm?url=<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>&title=<?php $title = wp_get_document_title(); echo $title; ?>" rel="nofollow noopener" target="_blank" aria-label="はてなブックマークする">
      <span class="icon-hatenabookmark"></span>
    </a>
  </li>
  <li class="sns__item pocket">
    <a href="https://getpocket.com/edit?url=<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>&title=<?php $title = wp_get_document_title(); echo $title; ?>" rel="nofollow" rel="nofollow" target="_blank" aria-label="POCKETで共有">
      <i class="fab fa-get-pocket"></i>
    </a>
  </li>
  <li class="sns__item feedly">
    <a href="https://feedly.com/i/subscription/feed/<?php echo("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>" target="blank" rel="nofollow noopener" aria-label="Feedlyに追加">
      <span class="icon-feedly"></span>
    </a>
  </li>
</ul>

GSAPでアニメーションをPCとスマホで切り分ける

続いて、PCとスマホで配置する位置が異なるので、GSAPのアニメーションをどうしようか検討することに。調べると、matchMediaというのがあります。下記サイトを参考に設定していることに。これは便利ですね。

【GSAP】matchMedia()を使ったレスポンシブ対応の方法を紹介
GSAPでアニメーションを作るとき、そのサイトがレスポンシブ対応していればアニメーションもレスポンシブ対応をしたくなるも…
エニシダウェブ

これにより、PCは横。スマホは下に位置しながらも、別々な動きを実現できました。

const sns = document.querySelector('.sns')

const shareBtns = () => {
  let mm = gsap.matchMedia()
  mm.add("(min-width: 768px)", () => {
    gsap.set(sns, {
      x: '100%',
      y: '0%',
      opacity: 1,
    })
    gsap.to(sns, {
      x: '0%',
      duration: 0.6,
      ease: 'power4.out',
      scrollTrigger: {
        trigger: sns,
        start: "top+=200",
        end: "top-=200",
        toggleActions: 'play none none reverse',
      },
    });
  })
  mm.add("(max-width: 767px)", () => {
    gsap.set(sns, {
      y: '100%',
      x: '0%',
      opacity: 1,
    })
    gsap.to(sns, {
      y: '0%',
      duration: 0.3,
      ease: 'power4.out',
      scrollTrigger: {
        trigger: sns,
        start: "top+=200",
        end: "top-=200",
        toggleActions: 'play none none reverse',
      },
    });
  })
}

shareBtns()
window.addEventListener('resize', () => {
  ScrollTrigger.refresh();
  shareBtns();
});

ここまで作りましたが、結局設置しないことに。さて、きちんと機能するのかな。残念ながら未確認です。

コメント