mjml-social

What is mjml-social?

The mjml-social npm package is a part of the MJML framework, which is designed to simplify the creation of responsive email templates. The mjml-social component specifically allows you to easily add social media icons and links to your email templates, ensuring they are both visually appealing and functional across different email clients.

What are mjml-social's main functionalities?

Basic Social Icons

This feature allows you to add basic social media icons to your email template. The code sample demonstrates how to include Facebook and Twitter icons with links to your respective social media pages.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-social>
          <mj-social-element name="facebook" href="https://facebook.com/yourpage" />
          <mj-social-element name="twitter" href="https://twitter.com/yourpage" />
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Custom Social Icons

This feature allows you to use custom icons for your social media links. The code sample shows how to replace the default Facebook and Twitter icons with custom images.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-social>
          <mj-social-element name="facebook" href="https://facebook.com/yourpage" src="https://path-to-your-custom-icon/facebook.png" />
          <mj-social-element name="twitter" href="https://twitter.com/yourpage" src="https://path-to-your-custom-icon/twitter.png" />
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Social Icons with Custom Styles

This feature allows you to customize the style of your social media icons, including their size and layout. The code sample demonstrates how to set the icon size to 30px and arrange the icons horizontally with custom background colors.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-social icon-size="30px" mode="horizontal">
          <mj-social-element name="facebook" href="https://facebook.com/yourpage" background-color="#3b5998" />
          <mj-social-element name="twitter" href="https://twitter.com/yourpage" background-color="#1da1f2" />
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Other packages similar to mjml-social

react-social-icons

The react-social-icons package provides a set of customizable social media icons for React applications. Unlike mjml-social, which is specifically designed for email templates, react-social-icons is intended for use in web applications built with React. It offers a wide range of social media icons and allows for easy customization of their appearance.

social-media-icons

The social-media-icons package is a simple library for adding social media icons to web pages. It is not specifically designed for email templates like mjml-social, but it provides a straightforward way to include social media links on websites. The package includes a variety of icons and allows for basic customization.

font-awesome

Font Awesome is a popular icon library that includes a wide range of social media icons. While it is not specifically designed for email templates, it can be used to add social media icons to both web pages and emails. Font Awesome offers extensive customization options and a large collection of icons beyond just social media.

README

mjml-social

Displays calls-to-action for various social networks with their associated logo. You can add social networks with the mj-social-element tag.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-social font-size="15px" icon-size="30px" mode="horizontal">
          <mj-social-element name="facebook" href="https://mjml.io/" icon-color="#4d4d4d">
            Facebook
          </mj-social-element>
          <mj-social-element name="google" href="https://mjml.io/" icon-color="#4d4d4d">
            Google
          </mj-social-element>
          <mj-social-element  name="instagram" href="https://mjml.io/" icon-color="#4d4d4d">
            Instagram
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

You can add any unsupported network inside mj-social like this:

    <mj-social-element href="url" icon-color="#FF00FF" icon="path-to-your-icon">
      Optional label
    </mj-social-element>

attribute	unit	description	default value
border-radius	px	border radius	3px
font-family	string	font name	Ubuntu, Helvetica, Arial, sans-serif
font-size	px/em	font size	13px
icon-color	color	icon color	#dc4e41
icon-size	percent/px	icon size	20px
line-height	percent/px	space between lines	22px
mode	string	vertical/horizontal	horizontal
text-decoration	string	underline/overline/none	none
align	string	left/right/center	center
color	color	text color	#333333
inner-padding	px	social network surrounding padding	4px
padding	px	supports up to 4 parameters	10px 25px
padding-top	px	top offset	n/a
padding-bottom	px	bottom offset	n/a
padding-left	px	left offset	n/a
padding-right	px	right offset	n/a
container-background-color	color	inner element background color	n/a

mj-social-element

This component enables you to display a given social network inside mj-social.

attribute	unit	description	default value
border-radius	px	border radius	3px
href	url	button redirection url	[[SHORT_PERMALINK]]
icon-color	color	icon color	#3b5998
font-family	string	font name	Ubuntu, Helvetica, Arial, sans-serif
font-size	px/em	font size	13px
icon-size	percent/px	icon size	20px
line-height	percent/px	space between lines	22px
mode	string	vertical/horizontal	horizontal
text-decoration	string	underline/overline/none	none
text-mode	string	display social network name	true
align	string	left/right/center	center
color	color	text color	#333333
name	string	facebook google instagram pinterest linkedin twitter	N/A
inner-padding	px	social network surrounding padding	4px
padding	px	supports up to 4 parameters	10px 25px
padding-top	px	top offset	n/a
padding-bottom	px	bottom offset	n/a
padding-left	px	left offset	n/a
padding-right	px	right offset	n/a