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

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

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

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

# 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 を共有することができます。

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

# 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>