【HubSpot】SNS共有ボタンをカスタマイズしたい🐦

この記事の目的

HubSpotではページをSNSに共有するための ソーシャルシェアリング (Social Sharing) モジュール があります。

けど、これちょっとアイコンが古臭い？このブログの雰囲気とは少し合わないんですよね💀➿

なので今回はこの Social Sharing モジュールをカスタマイズして、自分好みの雰囲気に変えてみようと思います🔮💫

変更する内容

今回変更する内容は👇以下の２つ。

1. 対象のSNSにLINEを追加する
2. 共有ボタンのアイコンを変更する

まずはじめに

デフォルトの Social Sharing モジュール (/@hubspot/social_sharing.module) は、そのままでは編集ができないので複製しておく必要があります。

🖌️複製は［モジュールを複製］ボタンから、複製したモジュールは自分のテーマ or 任意のフォルダ (ルートフォルダなど) に置きます。

Social Sharing モジュールの構造

Social Sharing モジュールのフィールドの構成を見てくと、SNSごとに［Enabled?］と ［Link］２つのフィールドがあることがわかります🔍

動作はプレビューしてくとわかるのですが、

• Enabled ? ：該当のSNSアイコンを有効にするかどうか
• Link：SNS共有ページに遷移するためのリンク設定

といった構造になっています。

※ 補足
モジュールのHTML構造をみると、［Link］で指定されている値 (custom_link_format) が <a> タグのリンク先に指定されていることが確認できます🔗

LINE 共有を追加する

LINE 共有についてはLINE側のドキュメントに方法が掲載されていたので、そちらを使用します。また今回は好きな画像をアイコンにするので、「カスタムアイコンを使用」のセクションを参照します。

📖LINE Developers：「LINEで送る」ボタンを設置する > カスタムアイコンを使用

<設定方法>

1. 既存のSNSのフィールドグループを複製します
   
2. フィールドグループの名前をわかりやすいように「LINE」に変更します
3. ［Link］フィールドのデフォルト値を以下に変更します
   https://social-plugins.line.me/lineit/share?url=
   
4. また、LINEのアイコンが表示されるように下図の部分も追加します
   
   

SNS アイコンを変更する

SNS アイコンについては、モジュールに添付されている xxx - color.png 画像を参照しているようです。

※ Twitter については、twitter bird と X の二種類が用意されているので、if 文が組まれているようです💭（たぶん）

なので、👇のナレッジベースでも解説されているようにアイコンに使いたい画像を同じ命名規則に則って追加してあげればＯＫです。

📖ナレッジベース：コンテンツにカスタムソーシャルアイコンを使用 > 2. アイコンを置換する

今回は icon8.com にあるアイコンを使用しました🎨

おわりに

モジュールをプレビューすると、無事ラインが追加されててアイコンがかわいいのになりました💟

こんな感じでデフォルトのモジュールを活用することで、案外簡単にカスタムモジュールを作ることもできます🌟🔭
ぜひ自分のテーマにあったボタンにカスタマイズしていきましょう～