Home » Web Tutorials » Weebly » Add ShareThis Social Sharing Buttons in Weebly

Add ShareThis Social Sharing Buttons in Weebly

Weebly offers social sharing buttons as an element which can only be added within a page content area. This will be of less attractive in most of the situations since the sharing mainly depends on the placement of the buttons. There are plenty of alternative sharing options for Weebly users in this social world and ShareThis is one such a free social sharing platform. In this article we will explain the step by step tutorial on how to add ShareThis social sharing buttons to Weebly site. Also, learn how to add AddThis social sharing widget in Weebly.

How to Add ShareThis Widget in Weebly?

Adding the ShareThis social sharing buttons consists of two steps:

  • Getting the embed codes from ShareThis site
  • Adding the codes on your Weebly site

Getting the Share Widget Code

In order to get the sharing widget code, you first need to create a free account with ShareThis site. Once the account is created and verified, login to you ShareThis account and click on “Get Sharing” tab. You will see three step processes to get the widget code.

Choosing a Platform

ShareThis offers widgets for all popular platforms like WordPress, Blogger, Drupal, etc. Choose the generic “Website” option and click on the “Next” button.

Choose the Sharing Website Platform
Choose the Sharing Website Platform

Select a Style

There are two set of styles available – one is a button style and other is a bar style. Choose any of the style you like and click on the “Next” button.

Choosing the Style for the Sharing Widget
Choosing the Style for the Sharing Widget

Customize

The last step in getting the widget code is the customizing. You have the below options and choose what you like:

  • View the preview of the share widget.
  • Rearrange the order of the buttons by drag and drop.
  • Remove or add the share buttons from different networking sites like Facebook, Twitter, Google+, etc.
  • Choose the docking position for the share widget.
  • Choose the CopyNShare settings – you can choose the content copy or URL copy to measure the share count. When the checkboxes are enables there will be a #hashtag automatically added to your URL or the copy to clipboard function.
Customizing the Sharing Widget
Customizing the Sharing Widget

After completing the customizations, click on the “Get Code” button to view the embed code for the widget.

Adding ShareThis Widget Code on Weebly

The widget code has three parts as shown in the below picture:

Getting Embed Code for the Sharing Widget
Getting Embed Code for the Sharing Widget
  1. First choose your website as http or https, on Weebly only the business plans can have SSL certificate for https and all other plans should only have http option.
  2. Copy the code and paste into the header section of your Weebly page under “Pages > Choose the page > Advanced > Header Code” section.
  3. Copy the code and paste into the footer section of the page.
Adding ShareThis Widget Code in Weebly
Adding ShareThis Widget Code in Weebly

If you want to the ShareThis widget to be shown on all pages of your site then add the codes under “Settings > SEO > Header / Footer Code” section. Similarly you can add the widget on blog page and posts, however, remember the following points:

  • The embed code may change based on the selected style, if the widget has style element then paste the CSS code under header coder section.
  • The bottom bar will have more options to add Facebook like button, adding trending content, site logo etc.
  • View ShareThis support page to check out further options for and customizing the widget like adding Google Analytics.

1 thought on “Add ShareThis Social Sharing Buttons in Weebly”

  1. Hi

    I’ve added og:image tags to the footer code of my index page on my website – which is consistent across other pages. This has required me to make a hidden link to the image, and then use that image address in the og:image code.

    However I want to share an individual page with a *separate* image that relates to that page.
    This is so that individual page can be shared from the page, with a different image that applies to the whole website.

    How do I do this?

    Thanks.

Leave a Comment

Your email address will not be published. Required fields are marked *