1. top
2. blog
3. 2013
4. 01

X (旧Twitter) と Facebook のシェアボタンを a タグだけで作る

2013-01-11(初版) → 2025-11-09(改訂)

• Blanktar.jp

MacRat

X (旧Twitter) や Facebook のシェアボタンを設置してみました。 自前のデザインで作りたかったので、公式のコードやJavaScriptは利用せずに、aタグだけで実装しています。

実装は非常に簡単で、以下のようなURLにリンクを張るだけでできました。

X (旧Twitter)

URL形式: https://x.com/share?url={URL}&text={TEXT}&via={USERNAME}

{URL}, {TEXT}, {USERNAME} の部分は、それぞれ以下のようなもので置き換えてください。

• {URL} : シェアしてほしいページのURL。
• {TEXT} : ポストに含めたいテキスト。ページタイトルなど。
• {USERNAME} : ポストに含めたいXのユーザー名。@は不要。

たとえばhttps://x.com/share?url=https://blanktar.jp&url=https%3A%2F%2Fblanktar.jp&text=ここに記事タイトル&via=macrat_jpのようにすると、 「ここに記事タイトル https://blanktar.jp @macrat_jpより 」 という内容でポストする画面にリンクできます。

Facebook

URL形式: http://www.facebook.com/share.php?u={URL}

{URL} の部分は、シェアしてほしいページのURLで置き換えてください。

たとえばhttp://www.facebook.com/share.php?u=https://blanktar.jpのようにすると、 https://blanktar.jp へのリンク付きの投稿を書く画面にリンクできます。