# シェアボタン SNS ソーシャルリンクの作り方

ソーシャルリンクやシェアリンクの重要性

  1. トラフィック増加:ソーシャルリンクやシェアリンクを設置することで、ソーシャルメディア上でのウェブサイトの露出が増え、多くのユーザーにウェブサイトを知ってもらえます。その結果、ウェブサイトへのトラフィックが増加することが期待できます。
  2. ソーシャルシグナルの獲得:ソーシャルリンクやシェアリンクをクリックしてウェブサイトに訪問するユーザーは、ソーシャルメディア上でのシェアやいいねの数などの「ソーシャルシグナル」を生み出します。これらのシグナルは、検索エンジンのランキングに影響を与える重要な指標となります。
  3. バックリンクの獲得:ソーシャルリンクやシェアリンクは、他のウェブサイトからのリンクを生み出すことができます。これらのリンクは、検索エンジンのランキングに大きな影響を与えます。
  4. ブランドの認知度向上:ソーシャルリンクやシェアリンクは、ウェブサイトのマーケティングにおいて非常に有効な手段です。ユーザーがソーシャルメディア上でウェブサイトをシェアすることで、ブランドの認知度を高めることができます。

ソーシャルリンクやシェアリンクは、トラフィック増加、ソーシャルシグナルの獲得、バックリンクの獲得、ブランドの認知度向上など、多くのメリットがあります。

# Twitter


https://www.twitter.com/

Twitter Colors

Hex color #1DA1F2

HTML

<a
  href="https://twitter.com/intent/tweet?url=[商品ページのURL]&text=[投稿するテキスト]"
>
  <span data-link="#share-twitter">
    <i
      title="Twitter"
      class="fab fa-twitter mx-1"
      style="color: #1DA1F2"
      aria-hidden="true"
    ></i>
    <span class="sr-only">Twitter</span></span
  >
</a>

# Facebook


https://www.facebook.com/

Facebook Colors

Hex color #4267B2

HTML

<a href="https://www.facebook.com/sharer.php?u=[商品ページのURL]">
  <span data-link="#share-facebook">
    <i
      title="Facebook"
      class="fab fa-facebook mx-1"
      style="color: #4267B2"
      aria-hidden="true"
    ></i>
    <span class="sr-only">Facebook</span></span
  >
</a>

# Line


https://www.line.com/

Line Colors

Hex color #06C755

HTML

<a
  href="http://line.me/R/msg/text/?[商品ページのURL]%0a[投稿するテキスト]"
  target="_blank"
  rel="nofollow noopener"
>
  <span data-link="#share-line">
    <i
      title="Line"
      class="fab fa-line mx-1"
      style="color: #06C755"
      aria-hidden="true"
    >
    </i>
    <span class="sr-only">Line</span></span
  >
</a>

# Pinterest


https://www.pinterest.com/

Pinterest Colors

Hex color #E60023

HTML

<a
  href="https://www.pinterest.com/pin/create/button/?url=[商品ページのURL]&media=[商品ページの画像のURL]&description=[投稿するテキスト]"
>
  <span data-link="#share-pinterest">
    <i
      title="Pinterest"
      class="fab fa-pinterest mx-1"
      style="color: #E60023"
      aria-hidden="true"
    >
    </i>
    <span class="sr-only">Pinterest</span></span
  >
</a>

# LinkedIn


https://www.linkedin.com/

LinkedIn Color

Hex color #0a66c2

HTML

<a href="https://www.linkedin.com/sharing/share-offsite/?url=[商品ページのURL]">
  <span data-link="#share-linkedin">
    <i
      title="LinkedIn"
      class="fab fa-linkedin mx-1"
      style="color: #0a66c2"
      aria-hidden="true"
    >
    </i>
    <span class="sr-only">LinkedIn</span></span
  >
</a>

# Reddit


https://www.reddit.com/

Reddit Color

Hex color #FF4500

HTML

<a
  href="https://www.reddit.com/submit?url=[商品ページのURL]&title=[投稿するテキスト]"
>
  <span data-link="#share-reddit">
    <i
      title="Reddit"
      class="fab fa-reddit mx-1"
      style="color: #FF4500"
      aria-hidden="true"
    >
    </i>
    <span class="sr-only">Reddit</span></span
  >
</a>

# Instagram


https://www.instagram.com/

Instagram では、直接投稿することはできませんが、Instagram ストーリーで商品ページの URL を共有することができます。

  1. Instagram アプリにログインして、ストーリー投稿画面に移動します。
  2. ストーリーに貼り付けたい画像を選択します。
  3. テキストやスタンプなど、必要に応じて編集します。
  4. 「リンク」アイコンをタップし、「ウェブサイトを追加」を選択します。
  5. 商品ページの URL を貼り付けて、「完了」をタップします。
  6. ストーリーを投稿する準備ができたら、「ストーリー投稿」をタップします。

# EC-CUBE 商品ページにシェアリンク実装

{# ソーシャルリンク #}
<div class="social-link my-2">
    {# Twitter #}
    <a href="https://twitter.com/share?url={{ url('product_detail', {'id': Product.id}) }}&via=TYXkG70hN5svxkR&related=TYXkG70hN5svxkR&hashtags={% for Tag in Product.Tags %}{{ Tag }}{{ loop.last == false ? ',' : '' }}{% endfor %}&text={{Product.name}}"
        rel="nofollow"
        target="_blank"
    >
        <span data-link="#share-twitter"
        ><i title="Twitter" class="fab fa-twitter mx-1" style="color: #1DA1F2" aria-hidden="true"></i
        ><span class="sr-only">Twitter</span></span
        >
    </a>
    {# Facebook #}
    <a href="http://www.facebook.com/share.php?u={{ url('product_detail', {'id': Product.id}) }}" rel="nofollow noopener" target="_blank">
        <span data-link="#share-facebook"
        ><i title="Facebook" class="fab fa-facebook mx-1" style="color: #4267B2" aria-hidden="true"></i
        ><span class="sr-only">Facebook</span></span
        >
    </a>
    {# Line #}
    <a href="http://line.me/R/msg/text/?{{ url('product_detail', {'id': Product.id}) }}%0a{{Product.name}}" target="_blank" rel="nofollow noopener">
    <span data-link="#share-line"
    ><i title="Line" class="fab fa-line mx-1" style="color: #06C755" aria-hidden="true"></i
    ><span class="sr-only">Line</span></span
    >
    </a>
</div>
2023-04-26
  • css

関連記事

Tailwindcss でローディングコンポーネント作成
Nuxt Fontawesome アイコン使う
CSS ::-webkit-scrollbar スクロールバーをカスタマイズ
sass-loader エラー
CSS background と conic-gradient で bookmark のブックマーク作る
HTML 特殊文字エンティティ参照
html5 新タグ要素と廃止タグ要素
safari でボタンタップしたら影が残る怪奇現象
css 学習 タイピング風アニメーションを css だけでやってみる
google color palette
フルスクリーン背景画像の 100%表示と iPhone 対応方法
css フルースクリンの背景画像と透けるログイン画面
placeholder text-align プレースホルダーの左寄せ・右寄せ
margin 上下効かない原因
CSS :before & :after pseudo-elements 疑似要素で画像を重ねる