Social Sharing for Email in Drag and Drop editor

SOLVE
Highlighted
Regular Contributor | Platinum Partner

Hello,

The original version of Hubspot Email had a module that would automtically insert the WEB version of an email into a social sharing module. (or you could insert a specific web page, such as the Sign up page for an event if sending a confirmation email or a blog post, which worked automatically). 

 

However, the Drag and Drop editor doesn't have this function. I've tried several workarounds to be able to insert a page using a standard Facebook/twitter/LinkedIn share code, but it doesn't work well for inserting a WEB view of the email itself, and requires a lot of steps. 

 

Does anyone know of a module that does this? 

And WHY hasn't HUBSPOT built this into the new email platform yet...after more than a year??

social share buttons in old emailsocial share buttons in old emailButton shares the actual email or in this case the blog postButton shares the actual email or in this case the blog post

 

I also tried converting a traditional email template with the SOCIAL SHARE module to drag and drop hoping that would work, but it converts the Social share to SOCIAL FOLLOW instead. 

 

Social share module in old email:

Social share module in old emailSocial share module in old email

 

Gets converted to social follow in drag and drop email

gets converted to social follow instead of sharegets converted to social follow instead of share

 

 

Has anyone seen a solution for this? 

Does anyone want to contact me about building this?

1 Accepted solution

Accepted Solutions
Highlighted
Solution
Advisor | Elite Partner

@ShariM Yea, I'm not seeing any default module or even anything in the marketplace with this functionality. You could always submit this to the Ideas forum if it's something you want Hubspot to add back in. You could certainly build your own module to use though. 

1. Create a new module with a text field for adding a description when sharing and a repeater to choose which platforms and icons to show.

social-share-01.png

2. Add the following code (with any styling edits you'd like)

 

 

<div class="social-share">
  {% for social in module.social.social_item %}
    {% set platform = social.platform %}
    {% set image = "<img src='"~social.image.src~"' alt='" + social.image.alt + "' />" %}
    {% if platform == "facebook" %}
      {% set url = "https://www.facebook.com/sharer/sharer.php?u=" + view_as_page_url %}
    {% elif platform == "twitter" %}
      {% set url = "https://twitter.com/intent/tweet?url=" + view_as_page_url + "&text" + social_text %}
    {% elif platform == "linkedin" %}
      {% set url = "http://www.linkedin.com/shareArticle?mini=true&url=" + view_as_page_url + "&title=" + social.text %}
    {% elif platfomr == "pinterest" %}
      {% set url = "http://pinterest.com/pin/create/button/?url=" + view_as_page_url + "&description=" + social.text %}
    {% endif %}
  
    <a href="{{ url }}">{{ image }}</a>
  {% endfor %}
</div>

 


 3. Add the module to your drag and drop email, set a web link, and when you hover over an icon you'll see the share link is filled out with the web link and description.

social-share-02.jpg

 

Hope this helps!

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

View solution in original post

2 Replies 2
Highlighted
Community Manager

Hello @ShariM 

 

I will be tagging some top experts to get this conversation started.

@HenryCipolla@DanielSanchez@lynton would you suggest a workaround for @ShariM question?

 

Thank you,

Pam


We are excited to announce that the Community will be launching a weekly newsletter on November 2, 2020!
Sign up today!


Reply
0 Upvotes
Highlighted
Solution
Advisor | Elite Partner

@ShariM Yea, I'm not seeing any default module or even anything in the marketplace with this functionality. You could always submit this to the Ideas forum if it's something you want Hubspot to add back in. You could certainly build your own module to use though. 

1. Create a new module with a text field for adding a description when sharing and a repeater to choose which platforms and icons to show.

social-share-01.png

2. Add the following code (with any styling edits you'd like)

 

 

<div class="social-share">
  {% for social in module.social.social_item %}
    {% set platform = social.platform %}
    {% set image = "<img src='"~social.image.src~"' alt='" + social.image.alt + "' />" %}
    {% if platform == "facebook" %}
      {% set url = "https://www.facebook.com/sharer/sharer.php?u=" + view_as_page_url %}
    {% elif platform == "twitter" %}
      {% set url = "https://twitter.com/intent/tweet?url=" + view_as_page_url + "&text" + social_text %}
    {% elif platform == "linkedin" %}
      {% set url = "http://www.linkedin.com/shareArticle?mini=true&url=" + view_as_page_url + "&title=" + social.text %}
    {% elif platfomr == "pinterest" %}
      {% set url = "http://pinterest.com/pin/create/button/?url=" + view_as_page_url + "&description=" + social.text %}
    {% endif %}
  
    <a href="{{ url }}">{{ image }}</a>
  {% endfor %}
</div>

 


 3. Add the module to your drag and drop email, set a web link, and when you hover over an icon you'll see the share link is filled out with the web link and description.

social-share-02.jpg

 

Hope this helps!

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

View solution in original post