CMS-General

カスタムのFollow Meモジュールを作成する方法

更新日時 July 24, 2018

対象製品

Marketing Hub: Basic, Pro, Enterprise

Follow Meモジュールを使用すると、訪問者がソーシャルメディアで皆さんの会社と連絡をとりやすくなります。カスタムのFollow Meモジュールを作成するには次のデータが必要です:

  • Follow Meモジュールに接続するソーシャルメディアアカウントのリスト
  • 各アカウントに関連付けられているURL
  • 各アカウントに使用したいアイコン
  • アイコンに使用したいレイアウト

ソーシャルメディアのアイコンについては、選択肢は無限にあります。PNG形式のファイルで作成されたアイコンセットを探し、接続したいすべてのソーシャルネットワークのアイコンがあることを確認することをお勧めします。

HubSpot(ハブスポット)のテンプレートに横型または縦型のFollow Meモジュールを追加する方法を下にまとめました。下の手順で解説されている以外のカスタムコードを導入される方は、ウェブサイトを変更する際にはプロのデザイナーの力を借りることをお勧めします

横型Follow Meモジュール

  • カスタムアイコンファイルをファイルマネージャーにアップロードします。
  • HubSpot Marketingのアカウントで、[Content(コンテンツ)] > [Design Manager(デザインマネージャー)]の順に選択します。
  • カスタムソーシャルアイコンを追加したいテンプレートの名前を探し、クリックしてください。
  • カスタムHTMLモジュールを追加します。ページまたはブログテンプレートで作業している場合はこのモジュールを完成後にグローバルにすると、サイトのあらゆる場所で再利用できるようになります。ただし、グローバルモジュールはグローバルグループに追加することができませんのでご注意ください。
  • カスタムHTMLモジュールのギアアイコンの横にある[Edit HTML(HTMLを編集)]ボタンをクリックします。 
  • 接続したい各ネットワークのカスタムHTMLモジュールに下記のコードをコピー&ペーストし、記載されている仮テキストの代わりに適切な情報を入力します。カスタムソーシャル画像のファイルURLをファイルマネージャーにアップロードする方法については、こちらの記事をご覧ください必ず引用符(" ")を残すようにしましょう
 画像が読み込まれない場合に表示される代替テキスト
  • メールテンプレートにソーシャルメディアのアイコンを追加し、画像がスマートフォンの画面の幅に合わせて伸びてしまった場合は、各imgタグにスタイリングを行う必要があるかもしれません。下の例を参考に最大幅と幅を設定してください。画像の幅はファイルマネージャーで画像を表示すると確認することができます。
 画像が読み込まれない場合に表示される代替テキスト
  • モジュールをグローバルにしたい場合はモジュールの右上にあるギアアイコンをクリックして[Make Global(グローバルにする)]を選択してください。メールテンプレート内からグローバルモジュールを作ることはできませんのでご注意ください。既存のグローバルモジュールをメールテンプレートに追加することは可能です。

縦型Follow Meモジュール

  • カスタムアイコンファイルをファイルマネージャーにアップロードします。
  • HubSpot Marketingのアカウントで、[Content(コンテンツ)] > [Design Manager(デザインマネージャー)]の順に選択します。
  • カスタムソーシャルアイコンを追加したいテンプレートの名前を探し、クリックしてください。 
  • 新しいカスタムHTMLモジュールを追加します。ページまたはブログテンプレートで作業している場合はこのモジュールを完成後にグローバルにすると、サイトのあらゆる場所で再利用できるようになります。ただ、グローバルモジュールはグローバルグループに追加することができませんので注意してください。
  • カスタムHTMLモジュールのギアアイコンをクリックし、[Edit Options(オプションを編集)]を選択します。
  • カスタムHTMLモジュールに下記コードをコピー&ペーストし、順序付けされていないリストを作成します。接続する各ネットワークに必要に応じてラインアイテムを追加し、記載されている仮テキストを適切な情報に置き換えて入力します。カスタムソーシャル画像のファイルURLをファイルマネージャーにアップロードする方法については、こちらの記事をご覧ください
     
  • 画像が読み込まれない場合に表示される代替テキスト
  •  
  • 画像が読み込まれない場合に表示される代替テキスト
  •  
  • 画像が読み込まれない場合に表示される代替テキスト
  •  
  • メールテンプレートにソーシャルメディアのアイコンを追加し、画像がスマートフォンの画面の幅に合わせて伸びてしまった場合は、各imgタグにスタイリングを行う必要があるかもしれません。下の例を参考に最大幅と幅を設定してください。画像の幅はファイルマネージャーで画像を表示すると確認することができます。
     
  • 画像が読み込まれない場合に表示される代替テキスト
  •  
  • 画像が読み込まれない場合に表示される代替テキスト>
  •  
  • 画像が読み込まれない場合に表示される代替テキスト>
  •  
  • アイコンは箇条書きで表示されます。箇条書きを解除するには、モジュールのCSSの宣言にFOLLOW-MEクラスを追加します。次に、テンプレートビルダーのCSSファイルに以下の命令文を追加します。
.follow-me ul{ list-style: none; }
  • モジュールをグローバルにしたい場合はモジュールの右上にあるギアアイコンをクリックして[Make Global(グローバルにする)]を選択してください。メールテンプレート内からグローバルモジュールを作ることはできませんので注意してください。既存のグローバルモジュールをメールテンプレートに追加することは可能です。