Share buttons or profile links with social icons. This guide covers the settings exposed by the current LunaSites block, the Style Panel areas that can be customized, and the checks that keep the result dependable across breakpoints.

Add a Social Media

1. Open Add block and choose Social Media from the Interactive category.

2. Start with the content or data source and confirm that the block communicates one clear role.

3. Configure layout and behavior before applying local visual overrides.

4. Use the Style Panel only for intentional block-specific differences; reuse a preset when the same treatment appears repeatedly.

5. Preview the real result at desktop, tablet, and mobile widths, including hover, focus, active, empty, and error states when relevant.

Configure the Social Media

Behavior

Mode Options include Share, Check Profile. Share Text The default is Check this out. Open profile in new tab The default is true.

Networks

Networks The default is a ready starting value.

Profile Links

Networks The default is a ready starting value.

Layout

Responsive Layout Options include Left, Center, Right, Spread, Stack. Responsive Grid Alignment Options include Left, Center, Right, Spread.

Additional settings

Facebook The default is true. X (Twitter) The default is true. LinkedIn The default is true. WhatsApp The default is true. Telegram The default is true. Pinterest The default is true. Reddit The default is true. Instagram The default is true. YouTube The default is true. TikTok The default is true. GitHub The default is true. Discord The default is true.

Style Panel

The available styling areas are Icon, Container. Complete the default state first, then add hover or active differences only where the target supports them. Keep text, borders, controls, and bounded surfaces readable against the effective page background.

Responsive behavior

Social Media can be used directly in inline content and inside a section grid. In a grid it follows the content-driven sizing model and starts at 8 columns by 2 rows. Keep the frame compact and let real content determine the final height.

Tips & tricks

1. Give the interaction one clear purpose and test every state before adding motion.

2. Use labels that describe the result, not generic instructions.

3. Verify keyboard focus, touch targets, loading, success, and error feedback.

4. Test the shortest, longest, empty, and most complex realistic content before considering the design finished.

Accessibility checklist

• Give every meaningful control, image, region, or data value an understandable name or text alternative.

• Preserve keyboard access, visible focus, logical reading order, and sufficient contrast.

• Do not rely on color, motion, shape, or position alone to communicate meaning.

• Check reduced-motion preferences and mobile touch targets whenever the block is interactive.

Common mistakes

• Styling before the content, source, and behavior are correct.

• Oversized frames, accidental empty space, weak contrast, or missing responsive checks.

• Adding decorative or interactive complexity without a clear visitor benefit.

Quick recipe

Add one Social Media, use the documented defaults as a starting point, replace them with real content, refine only the necessary settings, then verify the rendered block at all three responsive breakpoints.