Social Sharing for Email in Drag and Drop editor

SOLVE
ShariM
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
amwilie
Solution
Key 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!

border

Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

4 Replies 4
PamCotton
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

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
amwilie
Solution
Key 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!

border

Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

HGriffiths
Contributor

Hi Alyssa,

I'm struggling to build this in Hubspot - I'm not super familiar with the custom module builder. I'm not sure from your instructions where I'm inserting the URLs to be shared, nor how these will become visualized in my Hub.

Any help you can provide would be greatly appreciated.

Thanks,

Harry

0 Upvotes
MatthewShepherd
HubSpot Employee

Thanks, @amwilie for this great solution.

@HGriffiths to create this custom module:

 

  1. In Marketing->Files and Templates->Design Tools. Find your Custom Modules folder in the left sidebar.
  2. In the left sidebar select File->New file in "custom modules"
  3. From the "What would you like to build today" dropdown select Module then Next.
  4. On the next screen, "where would you like to use this module", select Emails
  5. Select local module (global modules are intended to be used where changes to module contents should update all instances of the module across all emails)
  6. Give the module a file name. e.g. email social share
  7. Paste the code below (which I tweaked slightly)  in the code pane.
    <div class="social-share">
      {% for social in module.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 platform == "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>
    
    ​
  8. Now on the right side of the design manager window, we need to create a group of repeating fields to match the field variables we are using in our code. These fields are what will allow you to enter social image and text values when creating your email and using the social share module:

    Field Group (Click Group - when creating this group make sure to toggle 'Repeater Options' on )
    social_item (make sure the label value is exactly this to match the code above)

    Fields (now we have our group click add field and the following fields making sure the label are exactly these values to match our code above)
    platform
    image
    text


  9. Now publish the module and in your email editor content sidebar add the new module (under + more in the drag and drop editor.)
  10. When you click on this module it should now say Social Item and display an +Add link, click this link to start populating platform, image, and test values.

Note: This module creates sharing links using the email's web version link, so you have to enable web version under the email's settings. If you wanted to share some other link you could hardcode it by replacing " + view_as_page_url + " with an actual URL in the code above, or create a new link field in your module to allow you to choose the link to share when adding module options e.g create a link field in our field group called link (with a label value of link) and in the code above replace " + view_as_page_url + "   with   " + social.link.url.href + "


email-social-share-2.pngemail-social-share-3.png

 email-social-share.png

 

 


Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional