COS-Blog

How do I add a custom social media sharing button to a HubSpot page?

Last updated: May 21, 2018

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A

If you are looking to add a custom social media sharing button to your HubSpot page, you can create your own customized version of the default social sharing module. This article will walk through how to clone the default social sharing module to customize the code snippets to add a social sharing option for the social media platform Xing.

Please note: you will be creating your own version of the social sharing module, which is a coded module composed of code snippets and HubL/HTML.

How to create a custom social sharing module

  • In your HubSpot Marketing Hub Basic, Professional, or Enterprise account, navigate to Marketing > Files and Templates > Design Tools.
  • Use the search bar in the finder to look up your default social sharing module.
  • Click Clone module to create a clone of this module.
custom-social-sharing-module
  • In the dialogue box that appears, enter a name for your cloned module, then click Clone.
  • In the inspector on the right side, right-click on the Email (field group) group and select Clone group.

clone-module-group

  • Rename this snippet Xing and confirm that the HubL variable name is also renamed to Xing.
  • Under the Grouped fields, hover over the Link (Text) field and click Edit

edit-group

  • Enter https://www.xing.com/spi/shares/new?url= in the Default text field.
  • Then click the social icon social in the breadcrumb menu to go back to this module's options in the inspector.

edit-default-text

  • Scroll down to the Linked Files section, and click Add to include a new file image.
linked-files
  • In the right sidebar modal, select an image from your file manager, or click Add file in the lower-left corner to upload a new image.

The file name for this image should match the naming convention of the rest of the Other files for your social sharing module. This means the Xing social sharing file must be named xing-color.png.

  • In the code editor, add the following code just below line 28 of your social sharing module:
{{ render_social_icon(‘xing’) }} 

code-editor

  • Click Publish changes to publish your module. You can now add this module to your HubSpot content.

Was this article helpful?