In this video, we will install and configure the ShareThis module which will let site visitors easily share your content across their social networks.

Install Module

Enable Module

  • ShareThis

Configure ShareThis

  • Go to "Configuration => Web services => ShareThis" (admin/config/services/sharethis)

Display

  • Choose a button style: [x] Vertical Counters (You can click the radio button next to each option to preview what it will look like, then choose your preferred style.)
  • Choose Your Services: Twitter, Facebook, Email, ShareThis (The "Possible Services" box has all of the options you can add. Move them to the "Selected Service" box by selecting them and clicking the left arrow and remove services by selecting them and clicking the right arrow. Reorder selected services by selecting them and clicking the up and down arrows.)
  • Extra services: (You can optionally include a "Google Plus One" and/or "Facebook Like" button. Since I'm already including those services in the share list, I won't include these, just to keep the interface a bit cleaner.)
    • [ ] Google Plus One
    • [ ] Facebook Like

Context

  • Location: Node content
    • "Node content" will display the icons on each node. When you choose this option, you can select which node types should include the share icons. You can position the share icons using the normal "Display settings" of each content type. This lets you position the share links in different places based on the view mode. ie: Teaser and Full display.
    • "Block" will create a block that you can place in any region on your site. If using Block, the link included in the shared post will be the currently viewed page. So, if you're looking at a page of a View that lists recent articles, for example, you'll share the page containing the View, not an individual piece of content.
    • "Links area" will display the icons with the links such as "Read more" and "Add comment". When you select this option, you'll be able to select which view modes should include the widget for each content type.
    • Node Types: [x] Article (This will show the widget on all articles.)
  • [ ] Comments (Check this if you'd like to display the ShareThis widget on comments.
  • Weight: 10 (This determines the location on the page where the widget will appear. I'll leave it set to the default value of 10.)

At this point, we've configured everything necessary for the module to work. There are some additional settings in the "Advanced" section that you'll probably want to change, but before we do that, let's take a look at the results of what we've configured at this point.

  • (Save configuration)

Note: I'll create a handful of articles using the Devel Generate module.

When we go home, we'll see the articles with the share links below the teasers. Since we chose to display the ShareThis widget on the node, we can adjust where this is displayed in the "Manage Display" tab of the Article content type.

Configuring Display Modes to Show or Hide the ShareThis Widget

  • Go to "Structure => Content types => Article => Manage display => Teaser" (admin/structure/types/manage/article/display/teaser)

Here, you'll see that we can move the "ShareThis" field anywhere we'd like in the order of fields. I'm actually going to hide it for the teaser display.

  • Drag the "ShareThis" field to the "Hidden" section
  • (Save)

If we click the "Default" tab, we'll see that the "ShareThis" field is after the Body, and before the Tags. That works for me, so I'll leave it alone.

Now, when we go back home, the share links are hidden. If we click an article though, we'll see the widget beneath the body. There are a few settings that I'm going to change in the advanced section of the ShareThis settings, two of which I'll show you why now.

  1. If we hover over the "Email" or "ShareThis" icons, a popup appears so that we can share this content. I'd rather that not appear until I've click on the icon.
  2. When I click "Tweet", at the end of the default tweet, you'll notice it says "via @sharethis". I'd rather that said "via @modsunraveled".

We'll change these settings, and a couple of other advanced settings, in the next video.