Video sessions

Over 20 years of in person training experience now available on demand for you and your team.

resource downloads

Get access to reporting templates and material developed across dozens of global organizations.

COACHING

Get access to one on one coaching for you or your team. Let me help you unpack the topics in this course and strategically apply them to your context.

Social Media Feature

Everything you need to install, configure, and customize the Social Media Feature module. Includes setup steps, customization options, and Pro upgrade details.

Installation

After installing the Social Media Feature module from the HubSpot Marketplace, it will appear in your page editor's module panel. Search for "Social Media Feature" and drag it onto any page.

Choosing Your Platform

  1. Click the module on your page to open the editor panel
  2. Open the Platform dropdown and pick from 8 supported platforms:
    • Instagram
    • Facebook
    • YouTube
    • TikTok
    • X (Twitter)
    • LinkedIn
    • Threads
    • Pinterest
  3. The button icon and the phone placeholder update automatically based on your selection

Adding Your Content

Open the Content section to fill in:

  • Eyebrow  Small label above the heading (e.g. “Stay Connected”)
  • Heading  The main headline (e.g. “Follow us on social”)
  • Description  Supporting copy below the heading

Configuring the Call to Action

Under the Call to action section:

  • Button text  What the button reads (e.g. “Follow Us,” “Subscribe,” “Connect”)
  • Profile URL  The full URL to your social profile

Suggested button text by platform: “Follow” for Instagram, TikTok, X, and Threads. “Subscribe” for YouTube. “Connect” for LinkedIn. “Like” or “Follow” for Facebook.

Uploading a Profile Screenshot

  1. Open the Phone screenshot section
  2. Click Upload, Generate with AI, or Browse images
  3. Recommended size: 390 × 844px (iPhone aspect ratio) for the best fit
  4. Tall portrait shots work best. The module wraps it in a clean phone mockup with a soft accent glow
  5. Skip the upload and the platform icon shows as a graceful placeholder until you add one

Setting Your Brand Color

Under Colors, use the Accent color picker to set your accent. It applies to:

  • Eyebrow text
  • Button background
  • Glow behind the phone mockup
  • Hover effects

The default is Instagram pink (#E4405F). Change it to match your brand or your chosen platform.

Customizing Typography

The Typography section lets you set:

  • Heading font  Family, size, weight, color
  • Body font  Family, size, weight, color

Use any Google Font, system font, or your portal's brand fonts. Heading sizes scale responsively on smaller screens.

Full Color Control

The Colors section gives you separate controls for:

  • Background color
  • Heading color
  • Body text color
  • Accent color
  • Button text color

Spacing

Control top and bottom padding (0 to 200px) under the Spacing section to match the rhythm of the rest of your page. Default is 96px on each side.

Secondary Platform Icons Row

Want to highlight more than one channel? Pro adds a Secondary platforms repeating group where you can add additional platform links. They display as a clean row of circular icons below the main button.

  • Platform  Pick the platform
  • URL  The full profile URL for that platform

You can add, remove, or reorder up to 8 secondary platforms. Use the Secondary platforms label field to set the heading text (e.g. “Find us on”) or leave it blank to hide the label.

Secondary Icon Color

Pro adds a Secondary icon color picker so the small platform icons can be a different color than your main accent. Useful when your accent is bold but you want the secondary row to stay understated.

Phone Position

Pro adds a Phone position dropdown to flip the layout:

  • Right (default)  Content on the left, phone on the right
  • Left  Phone on the left, content on the right

Useful for breaking up rhythm when you have multiple sections on a page.

Tips Tip

  • The button icon automatically matches your platform selection. No need to upload icons.
  • Use a tall portrait screenshot of your profile (around 390 × 844px) for the cleanest phone mockup result.
  • If your accent color is bold (Instagram pink, YouTube red), consider lightening the background for contrast.
  • The module is fully responsive. On tablet and mobile it stacks the content above the phone mockup.
  • You can place the module on any page type: website pages, landing pages, blog listings, and blog posts.
  • The button only renders when Button text is filled in. To hide the button, clear the field.