やりたいこと

Astroで作ったブログの記事ページに、記事をSNSで共有するためのリンクボタンを設置したい。

はてなブックマーク編

これは簡単。はてなブックマーク公式の、はてなブックマークボタンの作成・設置についてを参照。 ここで好きな設定でボタンを作成し、生成されたコードをサイト内に埋め込むだけ。

ボタンの表示、押した時の挙動は、ここに埋め込んだはてなブックマークのライブラリがうまいことやってくれる。以上。

Twitter編

これはひと手間必要。

まずはリンクを作る処理をJSで実装。

import { SITE_TITLE } from "../consts";

const { title, description, pubDate, updatedDate, heroImage } = Astro.props;

const currentURL = new URL(Astro.request.url).href;
const pageTitle = `${title} - ${SITE_TITLE}`;
const tweetURL = `https://twitter.com/share?url=${encodeURIComponent(currentURL)}&text=${encodeURIComponent(pageTitle)}`;

これで表示中のページのタイトルとURLがツイートされるリンクの準備は完了。

続いてアイコンの調達。

Simple IconsからSVGのコードをもらってきましょう。

あとはさっき作ったリンクを含めたaタグを作り、その中にアイコンのSVGを入れていく。 そんでもってCSSで適当に装飾。

<a
  class="sns-share-button"
  href={tweetURL}
  target="_blank"
  rel="noopener noreferrer">
  <svg
    role="img"
    viewBox="0 0 24 24"
    xmlns="http://www.w3.org/2000/svg"
    width="24"
    height="24"
    fill="#ffffff"><title>X</title><path
      d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"></path>
  </svg>
</a>

ということで完成したものがこの記事の下に表示されています！！！以上！！！

---