Mjml: Feature for mj-social href atribute

[milos5593]

I need a way to make links in mj-social to be just regular URL links and not shareable links.

Reproduction Steps:

When I enter the code as bellow:

<mj-social-element name="facebook" href="https://www.facebook.com/Ariel.Property.Advisors" background-color="#343b3f">

Expected behavior:

<a  href="https://www.facebook.com/Ariel.Property.Advisors" target="_blank">

Observed behavior:

<a  href="https://www.facebook.com/sharer/sharer.php?u=https://www.facebook.com/Ariel.Property.Advisors" target="_blank">

MJML version:

4.0.3

[kmcb777]

Hi @milos5593 i'll see with the others if we implement an option, it can be useful indeed
For now you could define your own mj-social-element, using src and color from the default social networks values (their default values can be found at the top of this file : https://github.com/mjmlio/mjml/blob/master/packages/mjml-social/src/SocialElement.js)

i.e. a twitter social-element with a custom link would be like this :

<mj-social-element src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" href="https://my-unchanged-url" background-color="#55acee">
  Twitter
</mj-social-element>

[milos5593]

@kmcb777 This works as a workaround. Thanks

[maherelaridi]

UPDATED: if I export footer.mjml as html, it works just fine.

@kmcb777 It's not working for me.

<mj-social font-size="15px" icon-size="40px" mode="horizontal"> <mj-social-element src="https://bit.ly/2Hbm8FY" href="https://www.facebook.com/" background-color="white"></mj-social-element> <mj-social-element src="https://bit.ly/2HaqDRl" href="https://twitter.com/" background-color="white"></mj-social-element> <mj-social-element src="https://bit.ly/2JSomI5" href="https://www.linkedin.com/" background-color="white"></mj-social-element> <mj-social-element src="https://bit.ly/2qIHT55" href="https://www.youtube.com/" background-color="white"></mj-social-element> </mj-social>

Although, the custome icons show up in the footer template, it shows the default icons when I get back to the main page.

Footer.mjml

Main-template.mjml

MJMLApp v2.8.0
MJML v^4.0.0

Thanks!

[ngarnier]

From what I can see, you're using the v4 syntax (mj-social-element) in your footer while you're using the v3 sytnax (mj-container) in your main-template. Can you try to remove the mj-container tags in your main-template?

[maherelaridi]

Thanks @ngarnier! Works like a charm now by removing the mj-container

[splitt3r]

The following code:

<mj-social>
    <mj-social-element src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" href="https://facebook.com/">Facebook</mj-social-element>
    <mj-social-element src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png" href="https://twitter.com/">Twitter</mj-social-element>
</mj-social>

Throws: TypeError: Cannot read property 'icon-height' of undefined in version 4.0.4. But it works in 4.0.1.

[kmcb777]

@splitt3r Hi, thanks for reporting this. A bug was indeed introduced in 4.0.4, the fix is already done and we will release a 4.0.5 very soon to fix this

[splitt3r]

4.0.5 did the job 👍

[yrammos]

This site is relevant to the discussion: http://www.socicon.com/generator.php (disclaimer: I'm entirely unaffiliated with it).

[kmcb777]

Hi @milos5593 in the new release mjml4.2-beta you can now use name="[network-name]-noshare" to avoid the url from being inserted in the share url , you can check it with npm install mjml

[yrammos]

Excellent! Many thanks.

On Sep 13, 2018, at 16:32, Cedric Cavrois [e-mail] wrote:

Hi @milos5593 in the new release mjml4.2-beta you can now use name="[network-name]-noshare" to avoid the url from being inserted in the share url , you can check it with npm install mjml

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.