Social Sharing for Email in Drag and Drop editor

[ShariM]

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 emailButton 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 email

Gets converted to social follow in drag and drop email

gets converted to social follow instead of share

Has anyone seen a solution for this? 

Does anyone want to contact me about building this?

[alyssamwilie · Accepted solution]

@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.

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.

Hope this helps!

[SChaney]

I know this is a very late reply, but after switching from sneding emails through Constant Contact to HubSpot this month, I also ran into this issue. I found the custom module solutions found in this article difficult to implement, so I went through and created my own manual workaround. Full disclaimer: this solution involves adding new share links to your social share buttons for every email, but it does indeed work. Below are the steps needed:

1. When drafting your email, go to settings - then scroll down to Plain text and web version, under Web version, toggle on the option to create a shareable web version of your email 

2. Add a Page Title and content slug - notice the spot where it says Copy link - you will need to use this link later on

3. Go back to editing your email, and select the Social module in the content module options

4. This step will go into how to set up sharing options for Facebook, Linkedin, and Twitter. Click on the new social module you've added to your email and go to edit your links. Below is what you will add for each:

• Facebook: https://www.facebook.com/sharer/sharer.php?u=ADD EMAIL LINK FROM STEP 2 HERE
• Linkedin: https://www.linkedin.com/sharing/share-offsite/?url=ADD EMAIL LINK FROM STEP 2 HERE
• Twitter: https://twitter.com/intent/tweet?text=Add+any+text+you+want+to+display+in+tweet+here+with+a+plus+bet...ADD EMAIL LINK FROM STEP 2 HERE

You can even take the placeholder links above, create a social module with them, and make the entire thing a saved section so you can do it again. I even saved mine with a disclaimer to edit the links before sending the email as a reminder.  You can also include a call to share the email - I am including my saved section below as an example:

The links won't work until the email is sent as that's when the web version goes live, so you can't really test everything, but you can test how the text in the Twitter link will look beforehand by following the link. It's certainly not a perfect solution and I sincerely hope that HubSpot adds an automatic social sharing feature to replace this workaround soon, but I hope this is helpful for some people out there!

[pinchvalve]

Thanks for the simle solution, Twitter seems to work fine, but LinkedIn returns an error. I tried a few suggestions posted elswhere with no success. This method may no longer be valid for LinkedIn. 

[TiphaineCuisset]

Thank you for sharing with the community @SChaney !

[MatthewShepherd · Accepted solution]

Thanks, @alyssamwilie 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 + "

 

[pinchvalve]

It seems that step #8 is no longer valid. You have to choose fields first, then group them. You can select Image and Text as field types, but not platform. And I could not figure out how to make a field, you can enter all the info but not save it and make a second. 

[ABatPP]

Hi Matthew,

Thanks for these clear instructions - but I got stuck at the "Where would you like to use this module?" as email didn't come up as an option. Do you know why this might be?

Thanks,

Alice 

[LPletzer]

This article showed me I'm not as smart as I think I am. What a blow to my ego! I've tried everything and I can't make this work properly. Great layout and screenshots though. Appreciate all of that.

[Valli]

Hi Matthew @MatthewShepherd , 

Is the image field meant to be what shows in the email or what displays when the email webpage is shared on a social platform? I was hoping it was the latter, but it seems to be displaying the image selected within the email. I wanted it to show that image on the social platform it's been shared to. 

[MatthewShepherd]

Hi @Valli 

The module image field stores the URL of the social icon image that displays for each social network at the bottom of the email.

I don't believe it is currently possible to add social image meta tags (i.e. og:image meta tags) to the web version of marketing emails.  This is perhaps something you could suggest to the product team via the ideas forum?

[alyssamwilie · Accepted solution]

@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.

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.

Hope this helps!

[HGriffiths]

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

[PamCotton]

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