How to Add In-Line Social Share Buttons

Adding share buttons to individual stories in your newsletter is a great way to promote engagement and viral sharing.

By default, you can simply add social share icons at the top of your newsletter by choosing Top in your post settings (shown below).

That'll result in the share icons appearing at the top of your newsletter as so:

And to be clear—these will share the entire newsletter as a whole.

But many newsletters are actually a collection of several different stories. And in some cases, those stories may live on a standalone webpage, and you may want to have readers share those individual stories on social media.

This tactic can be highly effective for expanding the reach and driving new traffic to a blog or other publication.

So while we don't have the ability to automate this process (yet), we have created a simple tutorial showing you exactly how you can accomplish this.

What are In-Line Social Share Buttons?

These buttons provide a way for users to click-to-share content that they’ve just read and found useful.

By following the instructions below, you will be able to implement in-line social share buttons that look like the ones in the example above.

Instructions

  • You need to publish the individual story you wish to share

    • This can be done as a “Web Only” post on beehiiv so they exist online

    • Content may also be hosted outside of beehiiv, you just need a live URL

  • Visit https://www.urlencoder.org/ and drop the URL for the article into the form and hit > ENCODE <

  • Copy the encoded URL outputted

  • Take the following HTML snippet (found below at the conclusion of this article) and replace all 4 instances of URL_HERE with the newly encoded URL like so:

preview of custom code
  • Copy that HTML code with the URLs now inserted, and paste into the CUSTOM HTML widget in beehiiv’s text editor

    • Note: please reach out to support if the custom HTML widget is not turned on for your account

preview of editor
  • Hit the preview button and switch to the web view to ensure that the HTML is rendering properly

There you have it!

Unfortunately, this is a fairly manual process at the moment, but keep an eye on our product announcements or YouTube channel for updates when we add this as a native editor feature.

Join the conversation

or to participate.