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

mj-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/">
            Facebook
          </mj-social-element>
          <mj-social-element name="google" href="https://mjml.io/">
            Google
          </mj-social-element>
          <mj-social-element  name="twitter" href="https://mjml.io/">
            Twitter
          </mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

`mj-social-element` is an "ending tag", which means it can contain HTML code which will be left as it is, so it can contain HTML tags with attributes, but it cannot contain other MJML components. More information about ending tags in this section.

attribute	unit	description	default value
align	string	left/right/center	center
border-radius	px	border radius	3px
color	color	text color	#333333
css-class	string	class name, added to the root HTML element created	n/a
container-background-color	color	inner element background color	n/a
font-family	string	font name	Ubuntu, Helvetica, Arial, sans-serif
font-size	px/em	font size	13px
font-style	string	font style	normal
font-weight	string	font weight	normal
icon-height	percent/px	icon height, overrides icon-size	icon-size
icon-size	percent/px	icon size (width and height)	20px
inner-padding	px	social network surrounding padding	4px
line-height	percent/px	space between lines	22px
mode	string	vertical/horizontal	horizontal
padding	px	supports up to 4 parameters	10px 25px
padding-bottom	px	bottom offset	n/a
padding-left	px	left offset	n/a
padding-right	px	right offset	n/a
padding-top	px	top offset	n/a
icon-padding	px	padding around the icons	0px
text-padding	px	padding around the texts	4px 4px 4px 0
text-decoration	string	underline/overline/none	none

mj-social-element

This component enables you to display a given social network inside mj-social. Note that default icons are transparent, which allows background-color to actually be the icon color.

attribute	unit	description	default value
align	string	left/right/center	center
alt	string	image alt attribute	none
background-color	color	icon color	Each social name has its own default
border-radius	px	border radius	3px
color	color	text color	#333333
css-class	string	class name, added to the root HTML element created	n/a
font-family	string	font name	Ubuntu, Helvetica, Arial, sans-serif
font-size	px/em	font size	13px
font-style	string	font style	normal
font-weight	string	font weight	normal
href	url	button redirection url	none
icon-height	percent/px	icon height, overrides icon-size	icon-size
icon-size	percent/px	icon size (width and height)	20px
line-height	percent/px	space between lines	22px
name	string	social network name, see supported list below	N/A
padding	px	supports up to 4 parameters	4px
padding-bottom	px	bottom offset	n/a
padding-left	px	left offset	n/a
padding-right	px	right offset	n/a
padding-top	px	top offset	n/a
icon-padding	px	padding around the icon	0px
text-padding	px	padding around the text	4px 4px 4px 0
sizes	media query & width	set icon width based on query	n/a
src	url	image source	Each social name has its own default
srcset	url & width	set a different image source based on the viewport	n/a
rel	string	specify the rel attribute for the link	n/a
target	string	link target	_blank
title	string	img title attribute	none
text-decoration	string	underline/overline/none	none
vertical-align	string	top/middle/bottom	middle

Supported networks with a share url:

• facebook
• twitter
• google
• pinterest
• linkedin
• tumblr
• xing

Without a share url:

• github
• instagram
• web
• snapchat
• youtube
• vimeo
• medium
• soundcloud
• dribbble

When using a network with share url, the href attribute will be inserted in the share url (i.e. https://www.facebook.com/sharer/sharer.php?u=[[URL]]). To keep your href unchanged, add -noshare to the network name. Example :

<mj-social-element name="twitter-noshare" href="my-unchanged-url">Twitter</mj-social-element>

Custom Social Element

You can add any unsupported network like this:

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

You can also use mj-social this way with no href attribute to make a simple list of inlined images-texts.