mjml-social

```xml <mjml> <mj-body> <mj-container> <mj-section> <mj-column> <mj-social mode="vertical" display="google facebook" google-icon-color="#424242" facebook-icon-color="#424242"

2.0.3-beta.1
Source
npm

Version published: 8 years ago

Maintainers: 1

Created: 9 years ago

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

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-social
            mode="vertical"
            display="google facebook"
            google-icon-color="#424242"
            facebook-icon-color="#424242"
            facebook-href="My facebook page"
            google-href="My google+ page" />
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Displays calls-to-action for various social networks with their associated logo. You can activate/deactivate any icon, with display property.

Note that you can disable default sharing option by adding :url on any social network. Example: <mj-social display="facebook" /> will render https://www.facebook.com/sharer/sharer.php?u=[[facebook-href]] url, and <mj-social display="facebook:url" /> will render [[facebook-href]] url If you want to add an unsupported network on mj-social you have to write :


    <mj-social display="facebook awesome-network"
    awesome-network-content="Share on a awesome network"
    awesome-network-href="http://awesome-network.com/my-company"
    awesome-network-icon-color="#FF00FF"
    awesome-network-icon="http://myicon.png" />

Note that content is mandatory if text-mode is set to true

desktop

attribute	unit	description	default value
facebook-content	string	button text content	Share
facebook-href	url	button redirection url	[[SHORT_PERMALINK]]
facebook-icon-color	color	icon color	#3b5998
font-family	string	font name	Ubuntu, Helvetica, Arial, sans-serif
font-size	px/em	font size	13px
google-content	string	button text content	+1
google-href	url	button redirection url	[[SHORT_PERMALINK]]
google-icon-color	color	icon color	#dc4e41
icon-size	percent/px	icon size	20px
instagram-content	string	button text content	Share
instagram-href	url	button redirection url	[[SHORT_PERMALINK]]
instagram-icon-color	color	icon color	#3f729b
line-height	percent/px	space between lines	22px
linkedin-content	string	button text content	Share
linkedin-href	url	button redirection url	[[SHORT_PERMALINK]]
linkedin-icon-color	color	icon color	#0077b5
mode	string	vertical/horizontal	horizontal
pinterest-content	string	button text content	Pin it
pinterest-href	url	button redirection url	[[SHORT_PERMALINK]]
pinterest-icon-color	color	icon color	#bd081c
text-decoration	string	underline/overline/none	none
text-mode	string	display social network name	true
twitter-content	string	button text content	Tweet
twitter-href	url	button redirection url	[[SHORT_PERMALINK]]
twitter-icon-color	color	icon color	#55acee
align	string	left/right/center	center
color	color	text color	#333333
base-url	string	icon base url	https://www.mailjet.com/images/theme/v1/icons/ico-social/
display	string	List of social icons to display separated by a space,	facebook twitter google

                        |             | available values: `facebook google instagram pinterest linkedin twitter` |

FAQs

What is mjml-social?

Is mjml-social well maintained?

Package last updated on 23 May 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install