Drupal 7 AddThis Module and Smart Layers

Hey everybody it’s Adam at Code Karate, yup I’m the new guy in the team. Today we’re going to be covering the AddThis Module for the Daily Dose of Drupal. The Add This Module is kind of cool little module that allows you to share content or your audience will share your content kind of across the way, really simple and easy way to do that.

As always, you can follow … follow both of us but you can follow me specifically at adamlearing on Twitter, otherwise if you still want you can follow Shane on smthomas3. In addition to that, we also like to point you to the Code Karate Newsletter at codekarate.com, go ahead and sign up there, you get definitely updates on content, new stuff going on with Drupal as well as tips and tricks where you’ve kind of thought of over the … over our 4 or 5 years doing Drupal so sign up there.

Alright so back to the module, so Add This Module again just a social sharing service makes it pretty simple and easy. On one note make sure this video is following the 7.4 development release, they don’t have a stable release for Drupal 7 yet but the 7.4 seems to work pretty well so you can go ahead and use that one. Alright so the first step when you’re configuring this module is to go to the module’s page, you just turn it on.

So we’re just going to enable both the modules here, Add This and Add This Place. Once you get it turned on here you can go down and configure, we add this and there’s a couple of different … there’s ton of stuff going on here and the most important things are your Profile ID.

You are required to have account with on Add This, so you can head over to addthis.com and create an account. I already have but once you do you can go under your Profile’s tab and grab your Profile ID, just what links your Add This account to your Drupal site. So copy that and just paste in the textbox there and then the only other one that’s really important in all these sites is the Click Back and Click Back with that does guys is that allows Add This to track the people who share and how viral their shares go.

So basically it says how many people they share acquired to your site, really powerful analytic tool there. One of the kind of important thing we’re not covering but as you can link this into your Google Analytics by just having the Google Analytics module installed on your site and then checking those boxes, kind of cool little thing there. The rest of the stuff I’m not going to cover in this tutorial because I want to get to one of the thing without this. So I’ll play around with it, nothing else is really important to the module.

So once you get it saved you can then add the Add This as a field in the content type or you can add it as a block. I’m going to add it as a … on the content type; so let’s say we have a content type basic page here and we want to add Follow buttons on the bottom of all our pages. So we would just add the Add This field type there Keeping It button and once you click Saved you can go back to the content type and you have to configure one more thing so you just go to Manage Fields and then … nope I was wrong, Manage This Place under the Format, click either the button or the toolbox.

Typically I click the Toolbox, that allows multiple buttons to appear and then you see here you have your different services that you can linked in. Right now it’s Facebook and Twitter, they’re just kind of separated, you can add a bunch of different variables and anything you want into that, I’m going to keep that default for now, we can make the buttons bigger, select the Orientation but for now we’ll keep it big, 32 horizontal so Facebook and Twitter will show up.

So then if I create a piece of content and you’ll say that … and you’ll see here that I now have Add This ability on the bottom of my content type or my page in this example. So then obviously I’m a user and I come to this page, I can click on the Facebook button and then obviously pulls in the No Title and as well as the site name and then you’ll make it easier for people to share your content across different social networks.

Again this is a quick example just showing Facebook and Twitter but you can extend that out to your favorite social networking sites whether it’s YouTube, Google + or whatever it be. So anyway that’s a quick and dirty Add This Module. Like I said; you can also add it as a block, so if you go into Blocks you’ll see there’ll be an Add This Block available right here so you can put that in as well and then that would just show up, oops I didn’t configure it yet but that would show up in the Footer if you configured it similar to how you configured this. Pretty simple and straight forward there.

One of the thing that I wanted to show is this might be one of those cases where the module isn’t exactly the best service to use and what I mean by that is Add This has some coolest features built right in via some Java Script, so again just I’m hopped over to the Add This site, so once you get your account created you literally can hover over this Get Code button and I just click on the Smart Layer’s tab and as you see here there’s a couple different things going on.

They have 4 different sections that dynamically overlying on your website by just injecting some Java Script and what is here is the Follow button on the top corner, Share button appended to the left side, What’s Next or Recommended Articles that they used as well as What Else would be customers point like appends at the bottom of your site. Really kind of cool, we usually turn this on and off, of course if you … whatever it is you want, you can also decide which services you like to have followed versus shared, all that kind of stuff is available here as well.

So you can honestly put your information in but once you finally select it, all you have to do is click Generate Code and it pops up some Java Script that you need to put onto your site. So all you need to do is copy this and then all you do is hop over to your HTML.PHP on your site and again if you need more direction on how to get to an HTML page you should look at Zen and send some themes.

I’m going to make it pretty easy to grab an HTML page but once you do, all you need to do is paste the code in your Header of your document. Oh actually sorry but you can paste it in the header of your document, that would work but if you want it to low after all the body text have loaded which typically is a benefit because the service sometimes takes a little bit longer to load, you can put it right at the bottom of your body [inaudible - 0:07:17.3]. So that’s what we did here.

So your Add This is here, pasting it in and to give you an example of what that looks like on the end you can just go over to codekarate.com and you’ll see it in action there. So we have it working right here, so here’s the Share buttons, up in the current corner are our Follow buttons and then right there there’s a Recommended For You section so can click that out to take you to our page there, just kind of nefty and then this is another page but eventually there’ll be a Recommended Articles at the bottom too of your Article. So we’re all services here, there it is. So you may also see these and then they may link up to other pages.
So it’s just a nice easy simple way to drop in content and help people navigate around other cool articles and content on your site. So again; I just want to reiterate, in my personal opinion I would probably forego using the Add This Module but if you want to it’s there and it’s nice and easy but what I would do is I would just go over to addthis.com and create an account, get the Smart Layers section loaded, configure it however you want it as far as what sections you want but then just drop the code in, your HTML file either in your body element or again you can put in the head element where all your other script tags are probably located.

Alright guys, well this is my first video with Code Karate, so more to come, appreciate any comments you have or anything like that, otherwise stay tuned and we will have more to come. Thanks guys! Bye.