How to display classic Facebook Like, Tweet and Google + buttons using AddThis?

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI16hJR2Y_F0rjPOs4aTlR6rK-NiH0bE4Ng5_5M6cDYbacdU4U3N_JOH4JDdvYwLwk_TzfZ22Ldlbc-o6jK-rmE-WdAg40UwBGaQoEmEtgShq-UGpv4_43Y13XRt6sUN1a_Z9cmdb53Y0/s1600/display-classic-facebook-like-tweet_google-plus-buttons-addthis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="display-classic-facebook-like-tweet_google-plus-buttons-addthis" border="0" data-original-height="416" data-original-width="625" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI16hJR2Y_F0rjPOs4aTlR6rK-NiH0bE4Ng5_5M6cDYbacdU4U3N_JOH4JDdvYwLwk_TzfZ22Ldlbc-o6jK-rmE-WdAg40UwBGaQoEmEtgShq-UGpv4_43Y13XRt6sUN1a_Z9cmdb53Y0/s640/display-classic-facebook-like-tweet_google-plus-buttons-addthis.png" title="display-classic-facebook-like-tweet_google-plus-buttons-addthis" width="640"></a></div><br>Social Media buttons are must for any website today to let visitors engage with your website using their Social Media accounts. It is also good for website owners as Social Media buttons enable visitors to share and increase your audience. There are many ways to add Social Media buttons on websites either by directly using<a href="https://developers.facebook.com/docs/plugins/like-button#configurator" target="_blank"> Facebook Social Plugins</a> code or using plugins available for the type of website platforms such as WordPress, Drupal etc.<br></div><a href="https://techubber.blogspot.com/2018/03/how-to-display-classic-facebook-like-tweet-google-plus-social-buttons-website.html#more">Read more »</a>

How to display classic Facebook Like, Tweet and Google + buttons using AddThis?

Social Media buttons are must for any website today to let visitors engage with your website using their Social Media accounts. It is also g...

Read more »

How to change AddThis Follow button settings for a gadget on blog or website

<b>This article shows how to change the accounts presented in an AddThis Follow gadget which has already been set up on a Wordpress-based website</b><b>.</b><br /><b><br /></b><b>(Note:   this is only relevant for Wordpress.org users.   Wordpress.com users do not have the same freedom to add or configure plug-ins.)</b><br /><b><br /></b><b><br /></b> <b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYK-_1YgFN8KfMCUyOhy96UIOg6nP3zUjpw811412IVJZhu0UTY9ltr3VS47vEaVLHNrSuYlOQcBDb93uPdBLsdm9R8YdqdYfocEh4Z7BY_6zL2LEEuUQGft-tZn0aaI3xDw5C-MIFEIWb/s1600/editing-options-for-followOn-addthis-button-already-on-wordpress-blog.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="1127" data-original-width="1600" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYK-_1YgFN8KfMCUyOhy96UIOg6nP3zUjpw811412IVJZhu0UTY9ltr3VS47vEaVLHNrSuYlOQcBDb93uPdBLsdm9R8YdqdYfocEh4Z7BY_6zL2LEEuUQGft-tZn0aaI3xDw5C-MIFEIWb/s320/editing-options-for-followOn-addthis-button-already-on-wordpress-blog.jpg" width="320" /></a></div>The AddThis plug-ins for Wordpress provide several functions.  One is a Follow gadget, which lets you offer links to your account on other platforms (eg on Twitter, Facebook and Instragram), so that people who are interested can subscribe to you there, and get updates from you even if they don't visit your blog or website regularly).  <br /><br />When you install and activate this plugin, there is a screen where you can choose which other platforms to show, and say what your address on those platforms is.   <br /><br />After you have set up the plug-in, then you an add the AddThis Follow widget to your site,   This gadget displays an icon for each tool which you selected, and each one link to the account that you provided.    How exactly it looks depends on the options you choose, but one possibility (Horizontal Follow) is like this:<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtn93xpe18a6lp8GUoX3u3kk_MXjBIlK2POnLCdV-qC9wrin_uAZFusosswlAZ8hqajQ2K9pPnaIzoyM3gVu11Go3aaLhWKR-AI_Z9rsamuqjyGapt2SnVS3wBENUyX347cEoTjOngy3o/s1600/horizontal-follow-me-over-there-button-on-a-word-press-blog.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="1037" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtn93xpe18a6lp8GUoX3u3kk_MXjBIlK2POnLCdV-qC9wrin_uAZFusosswlAZ8hqajQ2K9pPnaIzoyM3gVu11Go3aaLhWKR-AI_Z9rsamuqjyGapt2SnVS3wBENUyX347cEoTjOngy3o/s640/horizontal-follow-me-over-there-button-on-a-word-press-blog.PNG" width="640" /></a></div><br /><br /><br /><br />But - how do you change these settings after the gadget has been added?  <br /><br /><br /><div><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7gOcAGDP6hy6tRXgo3qD3ZPvZlARYG3ZQmDJ2xJ3v7sfRiPfYwtReIa4gYY9ThS-_1Cigi2GYHQiVE_F_u1z9vYHqNfrCawCdGMNqlE7YRYASW2M3JVm5KW5AQrLvJK0oYyzJI6NdKuBi/s1600/find-the-installed-widget-in-your-wordpress-gadget-list-and-open-it-to-see-the-options-configurations.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="459" data-original-width="544" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7gOcAGDP6hy6tRXgo3qD3ZPvZlARYG3ZQmDJ2xJ3v7sfRiPfYwtReIa4gYY9ThS-_1Cigi2GYHQiVE_F_u1z9vYHqNfrCawCdGMNqlE7YRYASW2M3JVm5KW5AQrLvJK0oYyzJI6NdKuBi/s320/find-the-installed-widget-in-your-wordpress-gadget-list-and-open-it-to-see-the-options-configurations.PNG" width="320" /></a>For most widgets, to change their settings you just:</div><div><ul><li>Choose Appearance > Widgets from the left hand menu</li><li>Find the widget in the list of ones that have been installed</li><li>Click the down-arrow beside the name, to reveal the options.</li></ul></div><div style="clear: both;"></div><div><br />And initially, AddThis-Follow looks much the same.  Rather than giving the detailed options immediately, it says</div><div><br /></div><div><blockquote class="tr_bq"><i><span style="background-color: white; color: #444444; font-family: , "blinkmacsystemfont" , "segoe ui" , "roboto" , , "ubuntu" , "cantarell" , "helvetica neue" , sans-serif; font-size: 13px;">To edit the options for your AddThis tools, please go to </span><a href="http://claddaghswan.com/wp-admin/admin.php?page=addthis_advanced_settings#" style="background-color: white; color: #0073aa; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 13px; outline: 0px; transition-duration: 0.05s; transition-property: border, background, color; transition-timing-function: ease-in-out;" target="_blank">the plugin's settings</a></i></blockquote></div><div><br /></div><div>Which sounds fair enough - there were a lot of values displayed on the page where you selected which social media platforms to include and how to connected them to your blog.</div><div><br /><br /></div><div>So you click the link, and get taken to a page - example below- which looks nothing like the one where you chose the services to display in the widget.   Even when you scroll down, nothing looks familiar, or even gives any clues about how to update the linked social networking accounts:<br /><br /></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGkrLgadm7BjTWjU8gz-OSTflLYNLO7ZkvFblRixrLwfhAOOW-qTZoRnb4B0LAlOWF9NLBeaGM3lMnhxs-e16PqhvIqCPl8V81kpraZuGw2ODeUig7N3h9luij7XCpyD-MQaF1yKx6k8-/s1600/addthis-plugin-settings-advanced-options-page.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="561" data-original-width="1351" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGkrLgadm7BjTWjU8gz-OSTflLYNLO7ZkvFblRixrLwfhAOOW-qTZoRnb4B0LAlOWF9NLBeaGM3lMnhxs-e16PqhvIqCPl8V81kpraZuGw2ODeUig7N3h9luij7XCpyD-MQaF1yKx6k8-/s640/addthis-plugin-settings-advanced-options-page.PNG" width="640" /></a></div><div><br /></div><div><br /></div><div><br /></div><div><h2>How to change the accounts offered by the AddThis Follow widget after it has been added</h2><div><br /></div><div>Don't start with the <b>Appearance > Widgets</b>  menu item.</div><div><br /></div><div>Instead:</div><div><ul><li>Choose with <b>Plugins >  Installed plugins</b>  </li><li>Find   Follow Buttons by AddThis in the list.</li><li>Click <b>Settings</b></li><li>In the list of gadgets that is displayed, beside the type of Follow button you used (horitzontal or vertical), click the <b>Settings</b> button.    [Yes, that is two Settings clicks in a row.]</li></ul></div><div><br /></div><div>This opens up the familiar screen where you can choose social media services by clicking on their icon, and entering your name on that service in the field at the bottom of the page.</div><div><br /></div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzNQJGdWVTZvrtzwelnr7CYke4HtjI5vkMA_UrWZopc7m6DMz5Xc_g8ApNz9NRLUSw9EWmpYdoKsrNUmBVksB1CCdcB8-D0PcnLW3UgJ0dkX9yELMZV273S0GihPK3_MaHtPd1fRFxLxC/s1600/plugin-settings-page-ordinary-not-advance-choosing-services-to-show-a-follow-option-for.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="562" data-original-width="543" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTzNQJGdWVTZvrtzwelnr7CYke4HtjI5vkMA_UrWZopc7m6DMz5Xc_g8ApNz9NRLUSw9EWmpYdoKsrNUmBVksB1CCdcB8-D0PcnLW3UgJ0dkX9yELMZV273S0GihPK3_MaHtPd1fRFxLxC/s640/plugin-settings-page-ordinary-not-advance-choosing-services-to-show-a-follow-option-for.PNG" width="616" /></a></div><div><br /></div><div><br /></div><div><br /></div><h2>Job Done!    </h2><div>You can now edit the social media accounts linked to your blog  - both correcting errors in the original setup, or adding new accounts which have been added since then.</div><div><br /></div><div><br /></div><h2>What this means</h2><div>Aach AddThis widget (eg AddThis-Follow, AddThis-Inline, etc) has the same settings each time it is used on your site.   So, provided your theme supports having gadgets in multiple places, you can have the Follow-Me gadget several places  (eg in your sidebar and underneath your posts) - always looking the same and linking tothe same social-media accounts.</div><div><br /></div><div><br /></div><div></div></div><h2><br /></h2><hr /><h2>Related Articles:</h2>There are no related articles for this topic.

How to change AddThis Follow button settings for a gadget on blog or website

This article shows how to change the accounts presented in an AddThis Follow gadget which has already been set up on a Wordpress-based websi...

Read more »

How to centre-align the sharing-icons from AddThis in Blogger

<b>This article shows how to get and then centre-align the row of sharing items that you can get from AddThis (and it's likely that a similar technique applies to sharing buttons from other services like ShareThis, too).</b> <br /><b><br /></b><b><br /></b><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwSe3bM0lLkZyM8eO1OOcGtMkekqV2DxXWx9ZeKoeUxK8FIqP5ZQaystKJXTF2t7yO9kmVJc-a-1G8obePf7f8FZeyyi3OCnzbj8htbD7pODgDhiaGjWFLcD0-OFswO09Qjn6LBlIJ3GZ/s800-Ic42/how-to-centre-all-this-social-sharing-buttons-in-blog.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQwSe3bM0lLkZyM8eO1OOcGtMkekqV2DxXWx9ZeKoeUxK8FIqP5ZQaystKJXTF2t7yO9kmVJc-a-1G8obePf7f8FZeyyi3OCnzbj8htbD7pODgDhiaGjWFLcD0-OFswO09Qjn6LBlIJ3GZ/s800-Ic42/how-to-centre-all-this-social-sharing-buttons-in-blog.png" width="320" /></a></div>If you think that Blogger's own social sharing buttons a just a bit too small and difficult position, then you may decide to use a service like AddThis to generate buttons that are more elegant all round.<br /><br />Signing up with AddThis is easy: just log in to your Blogger account, and in a separate tab open up AddThis.com. Choose Create Account, and then Continue with Google. This links your Google account and your AddThis account, and is the easiest approach - but there are other options too, like creating your account with your Facebook or Twitter accounts, or even just signing up the old fashioned way with your email address.<br /><br />Once you have signed up and chosen a plan (personally I just the free "Basic" plan), you need to actually install the AddThis buttons on your site. To do this:<br /><ul><li>Select one or more sets of sharing buttons (from the options available to your account type),</li><li>Choose the settings which apply to that set of buttons</li><li>Choose Activate (button in the bottom right corner of the setting screen), and</li><li>Install the code that AddThis gave you into your blog.</li></ul><br />Installing the code that AddThis gave you is pretty much like <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">installing any other piece of code</a>.   Typically the code you have to install has two parts:<br /><br />For the piece that says:<br /><blockquote class="tr_bq"><b class="widget-code-stepnumber" data-reactid=".c.0.0.1.1.2.1.0.0" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Step 1: </b><span data-reactid=".c.0.0.1.1.2.1.0.1" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #666666; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;"></span><span data-reactid=".c.0.0.1.1.2.1.0.2" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #666666; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Add the following code to the <body> of your website.</span></blockquote>Search for "<body"  (note:  no closing angle-bracket because some templates have extra instructions in there), and then put the code from AddThis after the angle bracket that goes with the <body<br /><br /><br />For the piece that says:<br /><blockquote class="tr_bq"><b class="widget-code-stepnumber" data-reactid=".c.0.0.1.1.2.2.0.0" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Step 2: </b><span data-reactid=".c.0.0.1.1.2.2.0.1" style="background-color: whitesmoke; border: 0px; box-sizing: border-box; color: #666666; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 15px; font-stretch: inherit; line-height: 32px; margin: 0px; padding: 0px; vertical-align: baseline;">Paste this code into whichever page you would like this tool to show up.</span></blockquote>Find the location in your template that you would like the gadget (eg an HTM gadget, or inside the post statement itself - read more about the options), and copy and paste the relevant code from AddThis.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIFlAx_WTyz0BQba6iO8UjbWZTeoiSH3VtgYSW5QXBngpYX23Wrljqm-VjyvXRFK15B5S53B8afPdYjlu5gZh-xKIpMktig_Nv1sMqrDfEOGdlg-XCwJqJ3UB3OoJqXnKI3QoxNOMG686/s720-Ic42/html-to-put-add-this-into-blogger.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="434" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaIFlAx_WTyz0BQba6iO8UjbWZTeoiSH3VtgYSW5QXBngpYX23Wrljqm-VjyvXRFK15B5S53B8afPdYjlu5gZh-xKIpMktig_Nv1sMqrDfEOGdlg-XCwJqJ3UB3OoJqXnKI3QoxNOMG686/s720-Ic42/html-to-put-add-this-into-blogger.PNG" width="640" /></a></div><br /><br /><h2>But it's not in the right place.</h2>If you install the code as is from AddThis, you will find that the row of sharing buttons is pretty tightly linked up with the rest of the page, and left-aligned.   Fortunately this is easy to change.<br /><br /><br /><h2>How to centre (or right align) rows of buttons from AddThis </h2>To put the set of sharing buttons from AddThis at the middle of the page, you need to surround the 2nd piece of code from AddThis with another Div statement, like the one in bold below:<br /><blockquote class="tr_bq"><b><div style = 'width:100%; text-align: center; margin-bottom:3em; margin-top:2em;'></b><!-- Go to www.addthis.com/dashboard to customize your tools --><br /><div class="addthis_sharing_toolbox"></div><br /><b></div></b></blockquote>The exact details to use depend on how exactly you want to set up your sharing-bar form AddThis.  I wanted it to be centre-aligned on one of my sites, with some extra white space above and below, so I used these commands:<br /><br /><ul><li><b>width:100%  -  </b>says to use all of the page-width in deciding where to put the sharing bar  (by detfault, it would just use the width of the sharing bar itself</li></ul><ul><li><b>text-align: centre</b>   -   means that he bar will be put in the middle</li></ul><ul><li><b>margin-bottom and </b><b>margin-top</b><b>   </b>put some extra space above and below the gadget, so it sticks out more-so.</li></ul><br /><br />But you may use a different approach, depending on what your blog is trying to achieve.<br /><div style="margin-bottom: 2em; margin-top: 3em; text-align: center; width: 100%;"><div class="addthis_sharing_toolbox"></div></div><h2>What your readers see</h2><h4>Visitors using a web-browsers</h4><div>Will see your AddThis buttons, as you defined them</div><div><br /></div><h4>Readers who subscribe to your blog's RSS feed</h4><div>Will not see your blog's AddThis sharing buttons, unless they happen to click through from their feed-reader to your blog.</div><div><br /></div><h4>Readers who follow-by-email </h4><div>Will not see your standard social sharing buttons at all, unless they visit your site.   (AddThis does have some email newsletter buttons, but these don't automatically go into emails generated from Blogger).<br /><br /><br /></div><div><h2>Is it worth it?</h2>For what it's worth, I recently made the change from custom sharing buttons that I'd made myself to classier looking ones from AddThis, and saw quite a jump (50% or more) in the number of social shares, across all my sites. <br /><br />YMMY, of course.<br /><br /></div><div><br /></div><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Installing 3rd party code into Blogger</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2014/08/how-to-put-pictures-side-by--side-using-html.html">Using Div statements to control layout</a>

How to centre-align the sharing-icons from AddThis in Blogger

This article shows how to get and then centre-align the row of sharing items that you can get from AddThis (and it's likely that a simi...

Read more »