June 11, 2012

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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Lisa said...

I love how you have many more choices with it now. I will have to check this out for my blogger blogs. Thanks again for more great info Mayura! 

Mayura De Silva said...

Hi Lisa,

You're welcome dear :) I did write this post 2 weeks ago, but paused 'cause I've seen that this follow tool gonna get updated with more networks. So I decided to post once it comes up with new ones.

It's lightweight and attractive. Also no need of much effort on it. Just a matter of copying and pasting code on the site. I hope you will love to have it on your blogs and see how it works :)

Thanks for your comment and compliments accepted :)

Cheers...

Brenda said...

I'm with Lisa! Lots of choices now! Great write and awesome widget! :)

Mayura De Silva said...

Hi Brenda,

Yippy Yippy Yey ;) Thanks dear. I hope it would helpful as it's really easy to implement and most of must-have popular networks are there. Ugh... Wait... But StumbleUpon is missing. Isn't it a popular one now? ;) Don't know but hope will add later on. I'm glad that Pinterest and Google+ is in.

Thanks for your comment and compliments dear :)

Cheers...

Donna Merrill said...

Mayura you are such a great teacher!  Choices are great and I myself don't know how to do them until I read this blog  -   I think you are ready to do some webinars to teach us more of your knowledge! 
You rock my friend!
Donna

Mayura De Silva said...

Hi Donna,

Hey hey, you rock too dear. What would I call a teacher's teacher then? ;) Let me know, I ll call you then. BTW my father is a teacher too. Thank you dear :) Yeah, absolutely you have more choices there and don't need to worry about designing and all. It's already here. Like outsourcing follow buttons ;) but FREE.

Webinars? Uhm... You know dear I'm nervous to be in public ;) But, yeah, cool suggestion. However you know I'm here if you need me.

Thanks for your nicey comment and compliments dear :)

Cheers...

Adrienne said...

Wow Mayura, I agree with everyone else.  What a great teacher you are and what fabulous information you provided here.  So detailed although I'm sure some people will still be confused by it.

I created my own follow buttons and just made them images with my link attached.  Copied the code and pasted it into my sidebar.  Because I do have a self hosted WordPress blog, I try to stay away from unnecessary plug-ins.  I'm sure for those who have the free platforms though, this will come in very handy.

Great job and have a wonderful day!

~Adrienne

Mayura De Silva said...

Hi Adrienne,

Oops, now you? ;) Ohw Adrienne, so we all are expertise in something. But you all are my great teachers, with respect.

I know what you mean Adrienne :) Unnecessary plugins 'cause slow page loading. So we better stay away from them to increase user experience and to lower bounce rate. But you know some people are not much familiar with HTML and they might prefer easy to use solutions.

Also another great factor is that AddThis follow tool use Akamai technologies and it will lower footprint and caching cause by plugin. So, you won't find visible difference in page load time even you use this plugin on your site.

Thanks for your wonderful comment and compliments dear :)

You enjoy your wonderful day too !

Cheers...

Green Team Gazette said...

Best and easiest approach ever...thank you for solving my problems!!

Green Team Gazette said...

Thank you for solving my problems!  I looked all afternoon and you were such a hidden gem!!! Love it--so easy w/the color coding!!

Mayura De Silva said...

Wow... I'm really happy as you are 'cause it helped you after all :) I'm glad to hear that you find it really easy to implement too.

Thanks for your nicey compliments :)

Cheers...

Tina Ge said...

thanx for the help! :)

Mayura De Silva said...

You're welcome Tina :)


Cheers...

Keerthi said...

As always you explained so clearly and loads of type too :)
Do you have a post on how to host a blogger website into .com?

Mayura De Silva said...

Hi Keerthi,

I'm glad you found it helpful dear. On setting up a custom domain, refer to this post ~ How to Purchase and Set Up a Custom Domain for Your Blog in Blogger :)


Cheers...

Keerthi said...

thanx a lot :)
I am sure I can set up a domain easily now :)

Mayura De Silva said...

Anytime dear :)

Hope you will set it up without any problems. If any questions, you know where to ask ;)


Cheers...