Mjml: Request: Support social links without share dialog url

[MissFerrety]

I would find it far more useful to be able to link users to the corresponding pages on social network sites, not trigger a share dialog box for them to post my page to their own feed. Could we have something like a [network]-profile-link or [network]-profile-id (with built-in default bases), or even something like a share="false" setting so we can repurpose the [network]-href setting?

[iRyusa]

Hi @MissFerrety

I believe this is already implemented : https://mjml.io/documentation/#mjml-social

Note that you can disable default sharing option by adding :url on any social network. Example: will render https://www.facebook.com/sharer/sharer.php?u=[[facebook-href]] url, and will render [[facebook-href]] url

So you can use display="facebook:url" to disable default sharing.

Note that mj-social will be more user friendly in MJML 4 because we're reworking it.

You can reopen if it's not what you want

[MissFerrety]

How do I keep missing things that are in documentation?? >< Giving myself such a bad name here! I'm hoping that maybe that says something about the documentation? And/or the settings?

@iRyusa BTW speaking of bad documentation, the npm page for mjml-social is slightly broken.

[themightychris]

@iRyusa what's the way to accomplish this under MJML 4? There doesn't seem to be anything documented now and <mj-social-element name="twitter:url" href="http://wwww.twitter.com/myprofile" /> doesn't seem to work

[iRyusa]

Just create your custom network with your icon / background color and
you're ready to go :)

On Sat, Apr 7, 2018 at 12:29 AM, Chris Alfano [e-mail]
wrote:

@iRyusa https://github.com/iRyusa what's the way to accomplish this
under MJML 4? There doesn't seem to be anything documented now and name="twitter:url" href="http://wwww.twitter.com/myprofile" /> doesn't
seem to work

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/704#issuecomment-379401412, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzRD8ZhfVYUazzgzy5pFl5U5l7gaPks5tl-wygaJpZM4Nxuxr
.

--
Cordialement,
Maxime BRAZEILLES

[themightychris]

@iRyusa there's value in being able to use the built-in icons but link to a profile instead of provide a share URL, that's not possible currently?

[MichielDeMey]

I have to agree with @themightychris, the :url solution was nice and clean in MJML3, a similar option in MJML4 would be very useful.

Looking at the code, we currently have no option: https://github.com/mjmlio/mjml/blob/master/packages/mjml-social/src/SocialElement.js#L126

I also don't see a way to extend defaultSocialNetworks to include a custom social network without a share-url, which would solve the issue.

I guess the only way forward here is to copy the SocialElement.js code and create a custom element just to get rid of the share url?

Not sure if you guys would be open to a PR restoring the :url option?

[kmcb777]

@MichielDeMey Hi, this will be re-implemented in 4.1 version.
You'll be able to keep you href untouched by appending -noshare to the network's name, ie name="twitter-noshare"
(opened issue about this : https://github.com/mjmlio/mjml/issues/1130)

[MichielDeMey]

Nice, didn't know about the open issue. Thanks. 👍

[yrammos]

@kmcb777 am I mistaken, or is the -noshare option unavailable indeed under v4.1.1? Thanks.

[kmcb777]

@yrammos actually this hasn't been merged yet, it will be included in the v4.2

[lupas]

@kmcb777
Updated to v4.2.0 and tried with name="facebook-noshare", name="twitter-noshare" and name="google-noshare", none of them are working.

Is it included in v4.2 already? Cannot get it to work :(

[iRyusa]

It should be fine on 4.2.0, can you try to reinstall it totally ? Might be
a loca/global deps issue

On Tue, Oct 9, 2018 at 9:01 PM Pascal [e-mail] wrote:

@kmcb777 https://github.com/kmcb777
Updated to v4.2.0 and tried with name="facebook-noshare",
name="twitter-noshare" and name="google-noshare", none of them are working.

Is it included in v4.2 already? Cannot get it to work :(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/704#issuecomment-428311348, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzT4S9rY4XlJYOB2rdj5_f18SccK_ks5ujPKKgaJpZM4Nxuxr
.

--
Cordialement,
Maxime BRAZEILLES

[lupas]

@iRyusa
Thanks for your fast response. Reinstall did not help, I have and had 4.2.0 installed. I should have checked the html before posting though, it is indeed something happening.

That's what I have in my .mjml code:

<mj-social>
  <mj-social-element name="facebook-noshare" href="https://www.facebook.com/FOO" />
  <mj-social-element name="twitter" href="https://twitter.com/FOO" />
 </mj-social>

That's what I get in html:

<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" ><tr><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
  <tr>
    <td style="padding:4px;">
      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-radius:3px;width:20px;">
        <tr>
          <td style="font-size:0;height:20px;vertical-align:middle;width:20px;"><a href="https://www.facebook.com/FOO"
              target="_blank" style="color: #17773f; font-weight: 600; text-decoration: none;"><img
                height="20" style="border-radius:3px;" width="20"></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!--[if mso | IE]></td><td><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:none;display:inline-table;">
  <tr>
    <td style="padding:4px;">
      <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#55acee;border-radius:3px;width:20px;">
        <tr>
          <td style="font-size:0;height:20px;vertical-align:middle;width:20px;"><a href="https://twitter.com/home?status=https://twitter.com/FOO"
              target="_blank" style="color: #17773f; font-weight: 600; text-decoration: none;"><img
                height="20" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/twitter.png"
                style="border-radius:3px;" width="20"></a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

So on the -noshare version src for the img and style="background: foo;" are missing.
The url however is without share - yeii 😄

Am I supposed to link my own image & define the background when using -noshare?

[iRyusa]

Well that's the expected behavior, named mj-social-element aren't
customizable, they're just here to backup of previous MJML 3 social. You
should do a standard mj-social-element without a name

On Tue, Oct 9, 2018 at 11:55 PM Pascal [e-mail] wrote:

@iRyusa https://github.com/iRyusa
Thanks for your fast response. Reinstall did not help, I have and had
4.2.0 installed. I should have checked the html before posting though, it
is indeed something happening.

That's what I have in my .mjml code:

That's what I get in html:

So on the -noshare version src for the img and style="background: foo;"
are missing.
The url however is without share - yeii 😄

Am I supposed to link my own image & define the background when using
-noshare?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/704#issuecomment-428366688, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzegEqbZLYVeyx-ZUwP3FQYqzrFSCks5ujRtfgaJpZM4Nxuxr
.

--
Cordialement,
Maxime BRAZEILLES

[lupas]

Somehow I am completely lost now.

@kmcb777 mentioned above that -noshare will be added to the name attribute with v4.2, now how would I do that without a name?

I was looking at documentation here and that's exactly how it is documented there.

Anyhow, instead of doing

<mj-social-element name="facebook-noshare" href="https://www.facebook.com/foo" />

I am now doing this:

<mj-social-element href="https://www.facebook.com/foo" background-color="#3b5998" src="https://www.mailjet.com/images/theme/v1/icons/ico-social/facebook.png" />

That works and that's what I wanted.

[ngarnier]

Just tried <mj-social-element name="facebook-noshare" href="https://www.facebook.com/foo" /> with v4.2.0 and it does work (clicking on the link opens the Facebook profile https://www.facebook.com/foo instead of trying to share that page on Facebook). If the -noshare option doesn't transform the sharer into a normal href, you probably have an issue with your install, please try to install v4.2.0 in another folder.

However, the -noshare only enables you to transform a default network into a normal link instead of a sharer. If you also want to customize the network (like the icon or the background-color), you need to create your own custom social network like @iRyusa pointed out.

[lupas]

@ngarnier
Thanks. Yes, I do not need to change color or icon, so I was expecting for it to work with -noshare.

Found the mistake now, which is quite silly.

I am using the MJML VSCode extension by Attila Buti v1.5.1 and I did only expect that extension to handle live preview, linting and such things. I expected that when I do "Export HTML" it would actually do that with the MJML package I installed with NPM, but apparently the VSCode extension comes with its own MJML package that is still on v4.1.2 .

Worked now when I did it with ./node_modules/.bin/mjml foo.mjml -o foo.html

Thanks for your help!

[cr0wg4n]

@MichielDeMey Hi, this will be re-implemented in 4.1 version.
You'll be able to keep you href untouched by appending -noshare to the network's name, ie name="twitter-noshare"
(opened issue about this : #1130)

nice!