Saturday, March 18

Customize AddThis Share Buttons With Custom Images

Customize AddThis Share Buttons With Custom Images

Customizing AddThis share button is very simple task including some simple steps. By applying all these steps you can get cool looking share icons with your preferred images.
So, Let's start step-by-step Guide:


Step 1: Make sure you have added AddThis Script in your Theme(Template). To do that simply make inline buttons for your site/blog at AddThis and then copy and paste AddThis script above </body> tag.
Note: Only add Script codes, If you have already added AddThis script in your HTML you can skip this step.


Step 2: Add below codes where-ever you want to have your your share buttons.

<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnkT6WHG_4FR-IW76ZAFpuQJ5h8LZHMBc4bAEUk24S3Y8hWWhfKxn3vHCCcu45g64A12Pj-7bkDe9a-H1G3-48iHgj1NiWECCZwaav6fJfPnbCMkDfdKsZvX1EmfAX14YzAqCB4sWB7TGG/s1600/facebook-icon-preview.png'/> </a><a class='addthis_button_google_plusone_share'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimjEipSw0lRSAXy-E8HnirEp7Fo9b4LQpmxF-YrAwb1GcDDzCusfeyDpWEYakYK2nIgWM2zfd7DcgvbybiuFsjDLhq_oPcRt5152rl5iZ0jVFfx5WefTtQakyBE02zGk8OgYY6ZISOzeKq/s1600/unnamed.png'/> </a><a class='addthis_button_linkedin'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieDbtWQ2ghTsncXywM-UOZfisNtk4OG3yq5qIxiIobCt0Ex7xgC-Qgt7Hd2dzrebv2qn5qjtizXj_QHfvME6mcu3V_ODM5Dq7851N6vZbiHJCN_oSa5Wdx6l1imvoeAgN88yhhJnauR5P3/s1600/linkedin-recruiters-connection.png'/> </a><a class='addthis_button_twitter'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtDz9_7BeN7hVNVNkYIWGtXhx4mqZL4E1i_ahkwNyv-DmsEJosYO25lI3SoiMdom5l5mobtnK09yPV-iYyVk-GWeyCqhHUCUUqqtD1g7lvXQ0UGVM4ahPFgr42saSJVdFJGVc8UyLwVi-N/s1600/Twitter.png'/> </a><a class='addthis_button_whatsapp'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpKffoVbIzbXNW77DrZuqYwXaCJ3_QAS4eYEwyW0Cb891hLBow1XYGtZHUO9GqZgk6nGo-KXp2-lMKJN9j6ZMhp30EyfYwDnmWhpjT6AHnl-_xVK5-8lKdldGCV5nSUUIjPOgODdGgmJz-/s1600/whatsapp-logo-PNG-Transparent.png'/> </a><a class='addthis_button_stumbleupon'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf5f0hOeRgTgkbeTFIImxmgrn0hGj5SiXLkrcYZ-jJgPLC2GZdeH92HpnsyDWpp-PUASTPnz_exL-bOBU8EFbTQLeEGK-n63Slos-lkSfnt2RREAwb4CZW7rjKhAPrwQRNVMSmqvR537Z3/s1600/unnamed+%25281%2529.png'/> </a><a class='addthis_button_pinterest_share'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn4AKi3dtxiG_VMYZz3k9KnBZk3rDFXRbtpRdW1nch4rJZiNUMrZUZR00AAIlywyiivRzvjv-0u5VVGixjVrg3OdGoTtz8t_467DXyHJgYQFAvjK_vqjjbVvIzzjt65WcCUMrbT3i4j_wH/s1600/pin.png'/> </a></div>
Where To Add Share Buttons ?

  • If you want to appear share buttons under post titles. Then, add above codes after <data:post.body/>
  • For, Adding share buttons under every blog post add above codes before  <div class='post-share-buttons goog-inline-block'>
Customization : 
  • If you want to you use different images simply change img scr URL with your image URL.
  • To add buttons from another social networks simply change class according to network names.