Customize Your Addthis Button

AddThis is an online bookmarking service that allows you to interact through a web app or widget, known as an Addthis button or toolbox. These buttons are website-specific, allowing visitors to have one-click access to sharing content with other social-oriented sites and communities such as Facebook. It is sometimes necessary or ideal to customize your Addthis button(s) in order for them to have the most impact; this article will teach you how to do exactly that.

Steps

Change your AddThis button’s image

  1. Select from a large collection of third-party, custom icons by clicking here.
  2. Insert the URL where your desired image is located into the code, replacing that over the following URL: http://s7.addthis.com/static/btn/sm-plus.gif (also shown in the image below). Likewise, any image in the code can be changed by replacing any given URL with your own.

Adding your site name to the AddThis button

  1. Add the optional ui_cobrand code to include your site name in your AddThis menu or button. This will add a text label to the top right corner of the menu. Simply insert your site name after the code, as shown in the image below. The example shows the site name as “wikiHow”, but for your site you will replace it with your own site name.

Change header and background color

  1. Insert the optional ui_header_color followed by the HTML color code to change the foreground text color in the compact (on-hover) header.
  2. You can also insert the optional ui_header_background code followed by your color code in order to set the color of the header background menu and lightbox.

Change language/Custom translation

  1. Insert the following codes followed by your custom translations in order to override the automatic translation feature and localize your buttons with the language of your choice. Pig Latin is used in the examples.
  2. You will need to first add the addthis_localize Javascript object in order to access custom translation name/value pairs:
  3. Insert the optional share_caption followed by your translation to replace “Bookmark & Share”.
  4. Insert the optional email_caption followed by your translation to replace “Email a Friend”.
  5. Insert the optional email followed by your translation to replace “Email”.
  6. Insert the optional favorites followed by your translation to replace “Favorites”.
  7. Insert the optional more followed by your translation to replace “More”

Change URL & Title

  1. To change the URL and title linked to your AddThis button (the page where the button is placed is used as a default) insert the optional addthis:url code followed by your desired URL. WikiHow.com is used in the example.
  2. Insert addthis:title code followed by your desired title.

Add a custom service

  1. Insert the following JavaScript Object Notation (JSON) into your AddThis button code in order to add a custom service. AddThis.com is used in the code example below.
  2. Insert name: followed by the desired site/URL name
  3. Insert url: followed by the custom URL you wish to use.
  4. Insert icon: followed by the URL where your custom icon is located.

Tips

  • AddThis will automatically translate into the language of the web browser being used to visit your site.

Warnings

  • HTML editing should only be done by those with prior experience.

Related Articles

  • Share Content on Your Online Network With AddThis for Firefox
  • Build a Social Network
  • Integrate Facebook Into Your Social Media Strategy

Sources and Citations

Retrieved from "https://kipkis.com/index.php?title=Customize_Your_Addthis_Button&oldid=295994"