Bear Share Buttons

Share Buttons screenshot

This add-on for the Bearming theme allows you to include buttons for emailing, printing, and sharing your blog posts on social media (see examples at the bottom of this page).

To use the add-on, which requires the latest version of the Bearming theme (1.3), add the code below to the end of your posts. If you prefer to avoid adding it manually each time, paste the code into your post template (Bear dashboard -> Posts -> Edit template).

<ul class="share">
<li><a href="mailto:?subject={{ post_title }}&body=Hey there,%0D%0A%0D%0AI saw this post and thought you might like it:%0D%0A{{ post_link }}"><span class="material-icons">mail</span> Email</a></li>
<li><a href="javascript:if(window.print)window.print()"> <span class="material-icons">print</span> Print</a></li>
<li><a href="https://www.addtoany.com/share#url={{ post_link }}&title={{ post_title }}" target="_blank"> <span class="material-icons">share</span> Share</a></li>
</ul>

In the 'Themes' setting, towards the top ("Import fonts from fonts.bunny.net"), under the @import url part, add the following line:

@import url("https://fonts.bunny.net/icon?family=Material+Icons");

Then add the following style to your theme:

/* Share buttons */
.share {
  margin: 40px 0 25px;
  padding: 0;
  list-style: none;
  font-family: var(--font-secondary);
  font-size: 14px;
}
.share li {
  display: inline;
  margin-right: 7px;
}
.share a {
  padding: 6px 10px;
  color: var(--link-color);
  text-decoration: none;
  border: 1px solid var(--link-color);
  border-radius: 6px;
  background-color: var(--background-color);
}
.share a:hover {
  background-color: var(--accent-color);
}
.share .material-icons {
  font-size: 17px;
  color: var(--link-color);
  vertical-align: text-top;
}

That's it! I hope your readers find this feature useful.