Social Media Widgets / Share Buttons

What Are Social Media Widgets?

At the top of every content type in Metro Publisher, is an area into which social media widgets can be inserted. Social media widgets are third party services that are very useful for allowing readers to share your content via their social media networks. This guide provides a general overview of how insert social media widgets.

Sample of a ShareThis Social Media Widget in an Article

Getting the Social Media Widget Code

There are various social media widgets that can be used. You will first need to create the widget with one of these third party services then paste the Javascript code into your Metro Publisher site. Here is a popular one:

• ShareThis

Placing the Code on Your Metro Publisher Site

Once you have gotten the social media widget code, you will need to paste it into Metro Publisher.

1. Log in as an Admin and go to "Settings."
2. Select "Content."
3. You will see a text field labeled "Share Tool Javascript / HTML Code." Paste your social media widget code here.
   
   NOTE: Normally there are two parts to the social media widget code; a bit of Javascript and some HTML. Paste BOTH of those here.
   
   For ShareThis, the HTML code is currently as follows:
   <div class="sharethis-inline-reaction-buttons"></div>
   
   
4. Additionally, you can choose where to position the share widget by selecting one of the "Placement" options.
5. Click "Save Changes."
6. Go to an article and "Preview" your widget to make sure it is working properly.
   
   

Adding Share Buttons to Pages

You can add social media icons to Pages than just articles by switching to "source" mode on the Pages Content Editor and pasting the same social media code used on the rest of the Content at the top:

<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_pinterest_large' displayText='Pinterest'></span>
<span class='st_email_large' displayText='Email'></span>