How to Add Follow Buttons to Your Website with AddThis

Let me ask you something. I wanna follow your blog, site or brand online on Facebook, Twitter or I'd like to know if you have a site feed, so I can subscribe and get your updates via my news reader. What would be your reply? I'm not wondering if you send me bunch of URLs for your social profiles and including feed URL. But, you gonna wait until someone gonna ask you how to follow you or your site? Do you want them to land on your site and know what's happening?

Most of people may not bother to ask. Yeah, they will bookmark your site and come back later if they happen to see that bookmark. But if they follow you on popular social networks where they mostly spend their time on or get updates via email or by subscribing to your feed, they will see your updates frequently and stop by when they see interesting content you have published. So if you display social profiles and alternatives to get connected with your blog or website, they can easily follow you and stay in touch with your latest content as you publish. But how you gonna show off your social profiles and feed addresses for them?

Implementation - Manual or Widgets?

You can show off links to your profiles and feeds manually. Oh c'mon, it's not eye catching and do you think it's enough for your visitors to grab attention? Let's come up with eye catching icons or images. Make sense? Absolutely showing off social profiles and feed addresses is just a matter of specifying HTML tags if you gonna implement them manually. You just need to specify HTML image tags which refers to individual follow button images with enclosing HTML anchor tags which points to relevant profile or page.

For example,

<a href="http://www.facebook.com/Mayura4Ever"><img src="http://myimage.com/FacebookButton.jpg" alt=""/></a>

So when loading your blog or website, it needs to process your follow button images with links only. It's the best way if you are thinking about your site performance. But your visitors need to navigate to your profile to follow you or your brand page and in case if you have to change the layout of buttons and sizes, you need to worry more about them.

As an alternative you can use widgets provided by social networks or 3rd party. For example, if you have a Facebook page and wanna let them like your page while they are on your blog or website, you can implement Facebook like box social plugin provided by Facebook. It's more effective as people can follow you or your brand without leaving your site. Also you may have seen such widgets provided by Google+, Twitter and Pinterest too.

But the downside of such plugins are that as they are dynamic and based on scripts, it takes more resources to view your site or else it affects on the page load time. In case if your pages load more slowly due to such plugins, not only followers but also visitors may not happy with that factor. So if you consider more about your page load performance and user experience, you may tend to implement follow buttons manually. However if you wanna use such plugins, you better use tools such as Google PageSpeed to analyze and you can get idea about which elements has more effect on your page load time.

AddThis Follow Tool...

I know, even you selected to implement follow buttons manually to improve performance and show them off in one place where visitors can easily find and follow, you have to find and upload follow button images and specify HTML tags to render that follow buttons. Also you have to make sure that all buttons are consistent with your design. Else you have to learn more about styling and designing to implement them to match with your site design. But here I'm gonna let you know a way to do that more easily and which is more reliable. What if you don't wanna upload images, specify image tags, learn HTML and all? Yeah, you don't need to.

AddThis provides you a follow tool which includes popular networks such as Facebook, Twitter, Google+, Pinterest, LinkedIn and also you can let your visitors subscribe to your feed and Tumblr blog if you have one. In addition,

● You can arrange buttons and render on different layouts, either horizontally or vertically.

● You can select different sizes of your choice, either large or small.

● It's easy to implement and you don't need to worry about uploading and writing HTML codes.

● You can track your followers, get analytics related to content and see what networks matters most for visitors.

● It doesn't affect much on your page load time eventhough buttons are not uploaded on your own server.

● You can arrange buttons as you prefer and remove anyone when you don't need.

If you wanted to do them all manually, you have to put great effort on resizing buttons, uploading, writing HTML codes and designing layout. But when you have a way to implement follow buttons easily, why you wanna waste your time on them? Let's show off follow buttons on your blog or website in few steps.

Before You Go:

If you would like to track your followers and see related statistics, you need to have AddThis account before you proceed with below steps. Sign up for a new AddThis account if you haven't got one yet.

Steps:

It's very simple. Just select one of available follow widget styles, and add the corresponding code snippet where you wanna show off the follow buttons.

Note: If you are a Blogger user and wanna add it as an element, you can add your button code snippet via HTML/JavaScript element. Read How to Add an External Widget or Codes to Blogger. Else if you wanna render it in a Blogger post or page, read How to Embed External Content on Your Blogger Posts or Pages.

Horizontal Large Menu

<p>Follow Us</p>
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="[Facebook Username]"></a>
<a class="addthis_button_twitter_follow" addthis:userid="[Twitter Username]"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="[LinkedIn Username]"></a>
<a class="addthis_button_google_follow" addthis:userid="[Google+ ID]"></a>
<a class="addthis_button_youtube_follow" addthis:userid="[YouTube Username]"></a>
<a class="addthis_button_flickr_follow" addthis:userid="[Flickr Username]"></a>
<a class="addthis_button_vimeo_follow" addthis:userid="[Vimeo Username]"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="[Pinterest Username]"></a>
<a class="addthis_button_instagram_follow" addthis:userid="[Instagram Username]"></a>
<a class="addthis_button_foursquare_follow" addthis:userid="[FourSquare Username]"></a>
<a class="addthis_button_tumblr_follow" addthis:userid="[Tumbler Username]"></a>
<a class="addthis_button_rss_follow" addthis:url="[Feed URL]"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[AddThis Publisher ID]"></script>

Horizontal Small Menu

<p>Follow Us</p>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="[Facebook Username]"></a>
<a class="addthis_button_twitter_follow" addthis:userid="[Twitter Username]"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="[LinkedIn Username]"></a>
<a class="addthis_button_google_follow" addthis:userid="[Google+ ID]"></a>
<a class="addthis_button_youtube_follow" addthis:userid="[YouTube Username]"></a>
<a class="addthis_button_flickr_follow" addthis:userid="[Flickr Username]"></a>
<a class="addthis_button_vimeo_follow" addthis:userid="[Vimeo Username]"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="[Pinterest Username]"></a>
<a class="addthis_button_instagram_follow" addthis:userid="[Instagram Username]"></a>
<a class="addthis_button_foursquare_follow" addthis:userid="[FourSquare Username]"></a>
<a class="addthis_button_tumblr_follow" addthis:userid="[Tumbler Username]"></a>
<a class="addthis_button_rss_follow" addthis:url="[Feed URL]"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[AddThis Publisher ID]"></script>

Vertical Large Menu

<p>Follow Us</p>
<div class="addthis_toolbox addthis_32x32_style addthis_vertical_style">
<a class="addthis_button_facebook_follow" addthis:userid="[Facebook Username]"></a>
<a class="addthis_button_twitter_follow" addthis:userid="[Twitter Username]"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="[LinkedIn Username]"></a>
<a class="addthis_button_google_follow" addthis:userid="[Google+ ID]"></a>
<a class="addthis_button_youtube_follow" addthis:userid="[YouTube Username]"></a>
<a class="addthis_button_flickr_follow" addthis:userid="[Flickr Username]"></a>
<a class="addthis_button_vimeo_follow" addthis:userid="[Vimeo Username]"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="[Pinterest Username]"></a>
<a class="addthis_button_instagram_follow" addthis:userid="[Instagram Username]"></a>
<a class="addthis_button_foursquare_follow" addthis:userid="[FourSquare Username]"></a>
<a class="addthis_button_tumblr_follow" addthis:userid="[Tumbler Username]"></a>
<a class="addthis_button_rss_follow" addthis:url="[Feed URL]"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[AddThis Publisher ID]"></script>

Vertical Small Menu

<p>Follow Us</p>
<div class="addthis_toolbox addthis_vertical_style">
<a class="addthis_button_facebook_follow" addthis:userid="[Facebook Username]"></a>
<a class="addthis_button_twitter_follow" addthis:userid="[Twitter Username]"></a>
<a class="addthis_button_linkedin_follow" addthis:userid="[LinkedIn Username]"></a>
<a class="addthis_button_google_follow" addthis:userid="[Google+ ID]"></a>
<a class="addthis_button_youtube_follow" addthis:userid="[YouTube Username]"></a>
<a class="addthis_button_flickr_follow" addthis:userid="[Flickr Username]"></a>
<a class="addthis_button_vimeo_follow" addthis:userid="[Vimeo Username]"></a>
<a class="addthis_button_pinterest_follow" addthis:userid="[Pinterest Username]"></a>
<a class="addthis_button_instagram_follow" addthis:userid="[Instagram Username]"></a>
<a class="addthis_button_foursquare_follow" addthis:userid="[FourSquare Username]"></a>
<a class="addthis_button_tumblr_follow" addthis:userid="[Tumblr Username]"></a>
<a class="addthis_button_rss_follow" addthis:url="[Feed URL]"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[Profile ID]"></script>

Color Indication Information:

   - Widget Header

Change the widget header label here. By default, it shows as Follow Us. If you have any other creative title match with follow buttons, you can add it here.

   - Facebook Username

Enter your Facebook profile or page username here. If you don't have an Facebook username yet, read How to Claim a Username in Facebook.

   - Twitter Username

Enter your Twitter username or handle here without preceding @ Sign

i.e: Wrong: @Mayura4Ever Correct: Mayura4Ever

   - LinkedIn Username

Enter you LinkedIn username here. If you don't know your LinkedIn username, you can find it at the end of Public Profile URL on LinkedIn Profile page - i.e: http://lk.linkedin.com/in/mayuradesilva

   - Google+ ID / Username

Enter your Google+ profile / page ID, or username with preceding + sign - i.e: +Mayura4Ever

   - YouTube Username

Enter your YouTube username here. If you don't know your current username or don't have one, navigate to YouTube Username page and view or create a new username.

   - Flickr Username

Add your Flickr username or screen name here. Mostly it would be your Yahoo account username. However if you don't know Flickr username, you can find it at Flickr Account Settings page.

   - Vimeo Username

Enter your Vimeo username here. If you don't know or don't have a username, navigate to Vimeo Profile Settings page and create Vimeo URL with a new username or get your username from there.

   - Pinterest Username

Add your Pinterest username here. If you don't know your Pinterest username, you can find it at Pinterest Settings page.

   - Instagram Username

Enter your Instagram username here. If you don't know your username, you can find it at Instagram Account Settings page.

   - Foursquare Username

Enter your Foursquare username here. If you don't know yours, navigate to Foursquare Profile page and you will find your username appended end of your profile URL appears in the browser address bar - i.e: https://foursquare.com/mayuradesilva

If you don't find any username appended, define the appended string instead - i.e: https://foursquare.com/user/29828681

   - Tumblr Username

Enter your Tumblr username here. If you don't know, your Tumblr username is the name that appears in your Tumblr blog URL - i.e: http://mayuradesilva.tumblr.com

   - Feed URL

Enter your blog or website feed URL here and make sure it has preceding http://.

Note: I you are a Blogger user and don't know your feed URL, read Know Your Feed URLs in Blogger.

   - Profile ID

Add your AddThis profile ID here to track followers. You can find your AddThis profile ID on AddThis Publisher Profiles page. If you don't need to track followers and didn't sign up for an AddThis account, just replace last line of the code snippet, which is

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=[Profile ID]"></script>

with the line of code below

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

More Information:

* If you wanna get rid of one button, just remove the line which represent that button. For example, if you don't have a Vimeo account and wanna remove Vimeo button from the follow widget, just remove the line which mention Vimeo,

<a class="addthis_button_vimeo_follow" addthis:userid="[Vimeo Username]"></a>

* If you wanna change positions of the buttons, just move relevant line of code corresponds to specific follow button to place where you wanna show it off.

* If you experiencing a problem of viewing follow buttons, please check out AddThis Platform Status to see if there is any outage or system maintenance is being scheduled.


Enjoy :-)