【Shopify】SNSの共有リンクのカスタマイズ

こんにちは。大野です。

商品ページに表示することができるSNSの共有リンクですが、商品ごとに共有内容を変えられたら素敵です。キャンペーン対象の商品の告知などに使えそうです。

今回は無料テーマの「Debut」の場合のメモです。

どうやって表示しているか？

まず、どのようなディレクトリ構造で該当の箇所を呼び出しているかというところの説明です。

該当の表示箇所は以下です。

Facebook と Twitter と Pinterest のボタンが並んでいるのがデフォルトです。

表示は以下のフォルダを使用しています。

Sections
　┗ product-template.liquid
snippets
　┗ social-sharing.liquid

実際にそれぞれの共有リンクを書いているファイルは「social-sharing.liquid」、それを「product-template.liquid」から呼び出している感じです。

具体的には「product-template.liquid」277行目辺り

{% if section.settings.show_share_buttons %}
    {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}

ここで「social-sharing.liquid」を呼び出しています。
テーマのカスタマイズで
「ソーシャルメディアでの共有ボタンを表示する」
にチェックが入っていれば表示　という意味です。

実際にカスタマイズしてみる

追加するのは「social-sharing.liquid」のファイルにしていきます。

今回は弊社が Shopify の動作確認などをする意味合いで運営している アプロ総研 EC のサイトの Lee坊シールのページにデフォルトとは別の内容を追加したいと思います。

1. まずは Pinterest は必要ないのでコメントアウト
ホントは削除でも良かったんですが、かわいそうなので残しておきます。
コメントアウトしたい箇所を {% comment %} {% endcomment %} で囲います。

2. Lee坊シールのページの場合だけ別のものを表示したいので条件分岐を足す

{% if settings.share_facebook %}
 	{% if product.handle == "lee" %}
        ここにLee坊シールのページで共有させたい内容を入れる
 	{% else %}
   <li>
     <a target="_blank" href="//www.facebook.com/sharer.php?u={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-facebook">
       {% include 'icon-facebook' %}
       <span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>
       <span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>
     </a>
   </li>
 	{% endif %}
 {% endif %}

という感じです。（ Twitter 部分も同じように）

番外： Facebook , Twitter シェアのための豆知識

テキストや改行などつまづいたのでメモ。

＜ Facebook の場合＞

<a target="_blank" href="//www.facebook.com/sharer.php?quote=アプロ総研のマスコットキャラ%0aLee坊がついに登場！&u={{ shop.url | append: share_permalink }}" class="btn btn--small btn--share share-facebook">
    {% include 'icon-facebook' %}
    <span class="share-title" aria-hidden="true">{{ 'general.social.share_on_facebook' | t }}</span>
    <span class="visually-hidden">{{ 'general.social.alt_text.share_on_facebook' | t }}</span>
</a>

こんな感じにしました。

quote でテキストを表示
u でURLの表示

＜ Twitter の場合＞

<a target="_blank" href="//twitter.com/share?text=アプロ総研のマスコットキャラ%0aLee坊がついに登場！%0a&url={{ shop.url | append: share_permalink }}%0a%0a&hashtags=アプロ総研,lee坊" class="btn btn--small btn--share share-twitter">
    {% include 'icon-twitter' %}
    <span class="share-title" aria-hidden="true">{{ 'general.social.share_on_twitter' | t }}</span>
    <span class="visually-hidden">{{ 'general.social.alt_text.share_on_twitter' | t }}</span>
</a>

こんな感じにしました。

text でテキスト表示
url でURL表示
hashtags でハッシュタグ表示（複数の場合カンマで区切る）

そして地味に便利なのが %0a という改行の存在！！

見た目の美しさ、可読性を高めるのも大事ですね。

個人的には単体のページにも表示させたい気持ちなのでまたまとめます。

以下、参考にさせていただきました！（ありがとうございます）

Facebookのシェア用URLでテキストを入れる方法 - Qiita

twitterのツイートボタンを作るためのリンクshareとintent/tweet - Qiita

最後に

アプロ総研では『はじめてEC』というサービスを運営しています。
EC初心者に向けて、初期構築を弊社が行いすぐに販売可能なサイトをお作りいたします。月々のサポートやウェビナーも開催されますのでEC初心者にも安心してご利用いただけます。

ご契約やサービス内容を詳しく知りたい場合は以下のお問合せページよりご連絡をお待ちしております！

はじめてECの説明ページ