【HubSpot】SNS共有ボタンをカスタマイズしたい🐦
【HubSpot】SNS共有ボタンをカスタマイズしたい🐦
2025-03-09 · Reina
この記事の目的
HubSpotではページをSNSに共有するための ソーシャルシェアリング (Social Sharing) モジュール があります。
けど、これちょっとアイコンが古臭い？このブログの雰囲気とは少し合わないんですよね💀➿
なので今回はこの Social Sharing モジュールをカスタマイズして、自分好みの雰囲気に変えてみようと思います🔮💫
変更する内容
今回変更する内容は👇以下の２つ。
- 対象のSNSにLINEを追加する
- 共有ボタンのアイコンを変更する
まずはじめに
デフォルトの/@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側のドキュメントに方法が掲載されていたので、そちらを使用します。また今回は好きな画像をアイコンにするので、「カスタムアイコンを使用」のセクションを参照します。
＜設定方法＞
- 既存SNSフィールドグループを複製
- 名前を「LINE」に変更
- Linkフィールドを以下に変更：
https://social-plugins.line.me/lineit/share?url={{ social_link_url|urlencode }}
- アイコンを表示するため以下を追加：
{{ render_social_icon('line') }}
SNSアイコンを変更する
SNS アイコンについては、モジュールに添付されている xxx - color.png 画像を参照しているようです。
※ Twitter については、twitter bird と X の二種類が用意されているので、if 文が組まれているようです💭（たぶん）
なので、👇のナレッジベースでも解説されているようにアイコンに使いたい画像を同じ命名規則に則って追加してあげればＯＫです。
今回は icon8.com にあるアイコンを使用しました🎨
おわりに
モジュールをプレビューすると、無事ラインが追加されててアイコンがかわいいのになりました💟
こんな感じでデフォルトのモジュールを活用することで、案外簡単にカスタムモジュールを作ることもできます🌟🔭
ぜひ自分のテーマにあったボタンにカスタマイズしていきましょう～
Discussion