商品詳細ページでSNSシェアボタンを追加したい

[サトシ2024]

Senseというテーマでショップを準備しています。

それにあたり、商品詳細ページにて、

現在では上記のボタンを押すとURLをコピーできる項目が表示されますが、

これを

上記のように、Instagram・facebook・XでURLをシェアできるよう実装したく思います。

アプリで実装できればと探していますが、使えそうなアプリが見当たらずにいます。

https://note.com/tech_malin/n/na63b84d2f2c4

上記ページの有料記事で実装できそうにも見えますが、

確証が持てず購入に踏み切れません。

上記についてどうすれば実装できれば、恐れ入りますがご存知の方がいればご意見いただければ幸いです。

 

[株式会社フルバランス · Accepted solution]

質問拝見しました。

SNSアイコンを追加したいとのことでまずはアイコンを表示するファイルがsnippetsファイル内にあるsocial-icons.liquidというファイルになったのでこちらを探します。（画像添付）

セクション追加でカスタムliquidを選択してそちらに先ほどのsocial-icons.liquidの内容をコピペすれば表示することができます。（画像添付）

位置などの調整に関しては適宜カスタマイズやCSSで調整していただければと思います。

ご参考にしていただければと思います！

なにかご質問があれば、お気軽にご相談ください。
お悩み解決できましたら、ベストアンサー、いいねいただけると励みになります。
何卒よろしくお願いします。

株式会社フルバランス

[サトシ2024]

上記ご回答くださり、ありがとうございます。

上記のコードを流用することでSNSへのリンクは設置できたのですが、

この箇所でさらにその商品詳細ページのURLをシェアできるようにしたく思います。

GPTでも確認を取り、

<ul class="list-unstyled list-social{% if class %} {{ class}}{% endif %}" role="list">
{%- assign product_url = shop.url | append: product.url -%}

{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="https://www.instagram.com/?url={{ product_url | url_encode }}" class="link list-social__link list-social__link-comvita" target="_blank">
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}

{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ product_url | url_encode }}" class="link list-social__link list-social__link-comvita" target="_blank">
{%- render 'icon-facebook' -%}
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
</a>
</li>
{%- endif -%}

{%- if settings.social_twitter_link != blank -%}
<li class="list-social__item">
<a href="https://twitter.com/intent/tweet?url={{ product_url | url_encode }}&text={{ product.title | escape }}" class="link list-social__link list-social__link-comvita" target="_blank">
{%- render 'icon-twitter' -%}
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
</a>
</li>
{%- endif -%}

{%- if settings.social_pinterest_link != blank -%}
<li class="list-social__item">
<a href="https://pinterest.com/pin/create/button/?url={{ product_url | url_encode }}&media={{ product.featured_image | img_url: 'large' }}&description={{ product.title | escape }}" class="link list-social__link list-social__link-comvita" target="_blank">
{%- render 'icon-pinterest' -%}
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
</a>
</li>
{%- endif -%}
</ul>

上記のようにコードをリメイクしました。

facebookやxのものは成功した模様ですが、

instagramはシェア機能がないのか、自分のアカウントページに遷移するのみになります。

instagramについては上記が限界でしょうか？

[サトシ2024]

返信遅くなり申し訳ありません。

上記のご回答を参考にしつつ、無事実装に成功しました！

また相談事がありましたら、ぜひお力添えいただければ幸いです。