Husky Ninja Blogs

Social Sharing with Metatag and Service Links

Drupal is like a CMS locked in time, with new versions coming out once every four or five years, and that is a long time in the development cycle that is the internet. Since version 7 was released, social media has grown into almost every corner of the web, with the Facebook led Open Graph being the method of choice for ensuring that richly enabled content is shared and delivered between social platforms. Combining with standard icons and APIs for adding and liking this content, information became easy as pie to share with social contacts. This development came too late in the game for Drupal to include as core functionality. Of course, there is a module for that, and this time it is Metatag and Service Links.

Before I start including any buttons or links to start sharing all of this wonderful information I am posting, I need a way to ensure that it is displayed in a way that is constant with the target platforms (this time being Facebook, LinkedIn, and Twitter - I could also include Google+ but no one else does). Metatag supports not only Open Graph tags and Twitter Cards, but can manage all sorts of SEO stuff that at this point I am not really focused on. I know there are a number of alternatives, but I don't really think the rest measure up. It is a module that no Drupal installation can really do without.

Installing Metatag is just like all the other module installations (copy/pasta to sites/all/modules and then enable in Administration >> Modules), and configuration is a snap.

Once the component is installed and enabled, go to Administration >> Configuration >> Search and Metadata >> Metatag. To start, you should configure your global settings under, well, Global >> Global: Front Page.

There are more settings, and this is just for Open Graph!

You can find all the Open Graph information under, well, Open Graph. Most, if not all, the defaults will work, but you should select the og:type (website, blog, article, etc.) add set an og:image. But the fun (and flexibility) doesn't end there. If you select "Add a Metatag default" you can set defaults for all your Content Types and Taxonomy Terms. You can also control this information on a post by post basis. Talk about powerful and flexible.

I have only scratched the surface of what Metatag is capable of doing. Here are a couple of links to expand your horizons:

At this point it is important to mention the Debugger for Facebook. You will spend a lot of time there tweaking your OG settings. This tool also can force Facebook to clear caching of you pages, so if you screwed up in testing (I do that a lot), this is the place to fix it (I do that a lot, too). I should also note that each time I check a new post in the debugger I am presented with a scraping error or an incorrect preview layout, yet viewing the scrape itself looks peachy. Selecting "Fetch new information" always seems to fit it. I don't know if this was me screwing with the debugger when I first set up Drupal, or the scraper is a little bit touchy.

Now that the OG settings are in place, it is time to add buttons so all this wonderful content can be shared around the internet. That brings me to Service Links. Like Metatag, there are a number of other modules and related services that can do the same thing, but I liked Service Link's flexibility (node/block, lots of services, bookmarking, etc.). Installation and configuration are also well documented.

After the standard installation procedure (copy/pasta to sites/all/modules then enable), go to Administration >> Configuration >> Web Services >> Service Links.

Enable the module for related Content Types and where it will show (links, inline, style, etc). I set this to only show up at the end of the interior content on all my Content Types. I also recommend setting "Open link in..." to "New Window" under Extra Options. Save your configuration and then go to...

The Services tab. Here you can select (Show) the services you will be using (inline - there are more on the block level, but I am not using them at this point).

More Social Media buttons than I need

Go to Administration >> People >> Permissions >> Service Links >> Access to Service Links for everyone.

Don't forget to set permissions!

And done. Now I had social medial links and Open Graph info for all my content. Yippie. I still had to do a little CSS tweaking to get the Facebook sprite to show up correctly, which I expected since I have the same issue with it on the main site (which has not be launched - yet).

Aw jeez, not this #%@&* again

So at this point I had my user name issue sorted out, and social media added. But issues still remained. I still had the funky URL issue, the breadcrumbs that didn't match my taxonomy, and I would really like a content editor that was a little more user friendly. Well, at least it gives me fodder for the next post.