任意のテキストや画像にSNSのシェアリンクをつける方法【初心者向け解説】

TAGU｜17work

本記事では、「任意のテキストや画像にSNS（X、LINEなど）のシェアリンクを埋め込みたい」という方向けに、具体的な設定方法と注意点を解説します。
WordPressなどのCMSを使ってホームページ運営をしているけれど、HTMLやコードの知識はあまりない…という初心者の方でもわかりやすいよう、できるだけ噛み砕いて説明していきますので、ぜひ参考にしてみてください！

1. 今回のTIPSで取り上げる内容

  • 「画像やテキスト」にSNSのシェアリンクをつけるとはどういうこと？

  • X (Twitter)・LINE・Facebook でシェアするための基本URLと使い方

  • Instagram でのシェアリンクは可能か？

  • WordPressのテーマやプラグインで既存のシェアボタンがある場合との違い

  • シェア時に任意のテキスト（日本語含む）を埋め込みたいときの注意点

「既存のシェアボタンはあるけど、テキストや画像そのものにリンクを張ってシェアさせたい」「シェアする際に特定の文章を含めたい」と考えている方に役立つ情報をまとめました。

2. なぜテキストや画像にシェアリンクをつけたいの？

2-1. クリック率アップやデザイン性の向上

一般的に、WordPressや他のCMSには「シェアボタン」が標準搭載されているテーマやプラグインが多数存在します。しかし、これらはあらかじめ決まったボタン（アイコン）デザインの場合が多く、

  • 「もっと自由なレイアウトにしたい」

  • 「記事内の画像をそのままシェアボタンにしたい」
    といった要望が出てくることがあります。

2-2. カスタムテキストやハッシュタグを含めたい

たとえばX（旧Twitter）でシェアするとき、「#キャンペーン」「この記事オススメ！」などのハッシュタグや文章を、シェアリンクをクリックした段階で入力済みにしておきたい場合があります。
このような場合は、シェアリンクURLにあらかじめテキストを埋め込んでおくことで対応できます。

3. SNSごとのシェアリンク設定方法

3-1. X (旧Twitter)

  • シェアURLの基本形

https://twitter.com/share?text=●

  • 使い方

    1. ● にシェアしたいメッセージやURLを入れる

    2. あらかじめ記事タイトルやハッシュタグを含めてもOK

例：
https://x.com/share?text=【ブログ更新】新商品リリースのお知らせ！%20詳細はこちら→https://example.com

※スペースや日本語などを含む場合は、URLエンコード（%20など）を行わないと正しく表示されません。
WordPressのエディターでリンクを設定するときは、自動的にエンコードされることも多いですが、うまくいかない場合は手動でエンコードしましょう。

3-2. LINE

  • シェアURLの基本形

https://line.me/R/msg/text/?●

  • 使い方

    1. ● にシェアしたいテキストやURLを入れる

    2. X同様、文章の間にスペースや改行を入れたい場合はURLエンコードが必要

例：
https://line.me/R/msg/text/?新商品のご案内%0A%0A詳細はこちら→https://example.com

※%0A は改行コード、%20 はスペース（空白）として利用されます。

3-3. Facebook

  • シェアURLの基本形

https://www.facebook.com/share.php?u=●

  • 使い方

    • 基本的にシェアしたいURLを●の部分に入れればOKです。

    • 注意点：Facebookでは「URL」のみを直接指定することが一般的で、テキスト（コメント）を事前入力する仕組みは原則用意されていません。

    • シェアボタンをクリックするとFacebook上でコメント入力画面が出てきますが、事前に文章をセットする機能は公式には提供されていない と思っておいてください。

例：
https://www.facebook.com/share.php?u=https://example.com

万が一、将来APIや仕様が変わってテキストを付けられるようになった場合は、Facebook公式ドキュメントを参照しましょう。

3-4. Instagram

Instagramに関しては、リンクをクリックしただけで「Instagramの投稿画面を直接開く」という仕組みは基本的にありません。

  • Instagramは「アプリ上で写真や動画を共有する」SNSであり、ウェブ経由のシェアリンク（URLクリックで投稿画面へ直行）は公式でサポートしていません。

  • そのため、任意のテキストや画像をInstagramにシェアリンクで直接誘導するのは現状難しい というのが結論です。

  • 「インスタへのシェア」ボタンを設置するプラグイン等もあるようですが、実質的にはアプリの立ち上げや、ログインを促すだけで完了できるわけではないケースが多いです。

4. WordPressでの設置方法と注意点

4-1. 既存のシェアボタンプラグインとの違い

WordPressのテーマやプラグインによっては、「Xにシェア」「Facebookにシェア」「LINEで送る」などのボタンを自動生成してくれるものがあります。
しかし、デザインや表示位置が固定だったり、特定のテキストやハッシュタグを埋め込めない場合があるため、カスタムテキストや画像を利用したい場合は手動でリンクを貼る方法が有効です。

4-2. 手動でテキストや画像をリンク化する手順例

  1. WordPressのエディターを開く
    固定ページや投稿ページなど、シェアリンクを設置したい場所を編集画面で開きます。

  2. テキストや画像を選択

    • シェアボタン代わりにしたいテキスト、または画像をブロックで挿入

    • 画像の代わりにアイコン素材を使うと、オリジナリティを演出可能

  3. 「リンクの挿入」機能で、SNSのシェアURLを設定

    • 先ほど紹介したURLに、任意のテキストやURLを埋め込み、文字化けしないようにエンコードする

    • 設置が終わったら「プレビュー」で確認し、正常にシェア画面が立ち上がるかチェック

  4. 投稿を更新・公開

    • 公開後、実際に自分でもクリックして確かめてみましょう。

4-3. 日本語やスペースを含むURLを設定するときの注意点

  • 日本語や全角文字（例：#キャンペーン）をそのままURLに入れると、リンクが正常に動作しないことがあります。

  • WordPressのエディターに貼り付けた場合、自動でエンコードされることも多いですが、もし動かないときは手動でURLエンコードしましょう。

    • 例：スペース → %20

    • 例：改行 → %0A

    • 例：日本語 → URLエンコード変換ツールなどで変換

5. 実際の手順（初心者向け例）

  1. まずはテキストや画像を用意

    • 記事内でシェアボタン代わりにしたいテキスト（「記事をシェアする」など）や画像（SNS風アイコンやバナー）を準備

  2. WordPressの投稿編集画面でブロックを追加

    • 「画像ブロック」を追加し、画像をアップロードする

    • テキストの場合は「段落ブロック」にそのまま入力

  3. リンクを設定する

    • 画像やテキストを選択した状態で「リンクの挿入」をクリックし、先ほどのシェアURLを貼り付け

    • Xなら https://x.com/share?text=〜 のように、任意のテキストとURLを含めておく

  4. URLエンコードに気をつける
    例）「キャンペーン詳細はこちら」をXのシェアテキストに入れたい場合：
    https://x.com/share?text=キャンペーン詳細はこちら→https://example.com

    → もし文字化けする場合は、下記のようにエンコードする
    https://x.com/share?text=%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3%E8%A9%B3%E7%B4%B0%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%E2%86%92https://example.com
    （エンコード変換ツールなどを使って「キャンペーン詳細はこちら→」を変換して差し替え）

  5. プレビューで動作確認し、公開

    • 実際にシェアボタン（テキスト or 画像）をクリックし、Xの投稿画面やLINEの送信画面などが正常に立ち上がるかチェックして完了です。

6. まとめ

  • XやLINE のシェアリンクはテキスト埋め込みが可能

    • URLエンコードに注意

  • Facebook は基本的に「URLのみ」をシェア

    • 事前にテキストを仕込む機能はない（仕様により変わる可能性はある）

  • Instagram はリンククリックだけで投稿画面を呼び出す機能はなく、事実上シェアリンク設置は困難

  • WordPressに既存のシェアボタンがある場合 でも、自作で「テキスト＋URL」を入れたシェアボタンを作成したいなら、上記のシェアURLを手動で設定しよう

  • 日本語テキストを含むシェアリンク はURLエンコードを意識すること

「シェアボタンはあるけど自分の好きなテキストや画像を使ってみたい！」という方は、ぜひこの方法を活用してみてください。少しHTMLの知識が必要かと思われがちですが、WordPressのエディター機能を使えば、初心者でも比較的簡単に設定できます。

あとがき

SNSへのシェアは、サイト運営者にとって大切な拡散手段です。標準のシェアボタンが物足りない方や、よりクリエイティブな演出をしたい方は、ぜひ「任意のテキストや画像」にシェアリンクを仕込む方法を試してみてください。
日本語の文章をそのままURLに含めるとエラーになることがあるなど、最初は戸惑う部分もあるかもしれませんが、慣れてしまえば難しくありません。しっかりプレビューやテストを行い、サイトの魅力をたくさんの人に広めましょう！

以上、「任意のテキストや画像にSNSのシェアリンクをつける方法」のTIPSでした。これからWebで仕事をしたい方や、駆け出しの初心者さんも、この機会にカスタマイズを楽しみながらシェアリンク設置にトライしてみてくださいね。

いいなと思ったら応援しよう！