Custom Button for Twitter Share

Twitter Share Popup using Custom Button Image

Finally, I have a Tweet Button that opens a popup window and uses a custom button image that works. A long time in the making, the project got put on the back-burner several times over the past six months.

Yesterday I finally got round to updating my website to use several of the code snippets I published last year, (never got round to changing these either until now) so it seemed the right time to get down and make this custom button twitter share popup work.

Twitter Popup

Part of the reason it took so long was having to use JavaScript – and I am not at all fond of java… I had the popup working in several versions, one only included the page URL, another just opened a popup tweet box with nothing in it. Neither of these were what I wanted. Thanks to Twitters fairly new “Intents” API, the popup now adds the page title and the URL – much better.

These functions have long been available using Twitters own tweet buttons, but if they don’t fit into the space allocated, then a custom image is a better solution, except for the hassle to get it to work properly.

Licence Free Graphics

Our first pack of 8 social button graphics is now available for convenient download:

This pack contains 8 social icons, each in 4 sizes:

Icons Included:

• Delicious
• Digg
• Facebook
• Google Buzz
• LinkedIn
• Reddit
• StumbleUpon
• Twitter

Icons Sizes:

20×20 pixels, 32×32 pixels, 64×64 pixels, 100×100 pixels

 DOWNLOAD SOCIAL ICON PACK 1

8 Button Graphics and Code

Eight sets of Social Networking Custom Buttons now Available:

Today we finished the first 8 pages from our new ‘Masters‘ section with custom buttons for:

• Digg
• Delicious
• LinkedIn
• Facebook
• Google Buzz
• Reddit
• StumblUpon
• Twitter.

Each page features a code snippet to use a custom button for these share sites, and licence free graphic images for 3 sizes of buttons on each page (4 as the button used featured to test the code can also be copied)

To access these snippets and images, Click Here.

Please feel free to use these buttons and snippets, adapt or modify them as you desire…

We don’t insist, but if you do make use of these items, a ‘like’ for our website or Facebook page, or a mention on twitter (or anywhere else online) will be appreciated.

Mike Otgaar

Using Custom Share Button for LinkedIn

Custom Image for a LinkedIn Button

LEVEL: BASIC

We often want to use a button that matches our website design, or fits into an available space. A common example is a row of small square buttons, instead of the standard rectangular official ones.

I found a bit of useful code to allow the use of our own image file for the LinkedIn share button. Copy and paste this code and place in webpage where you want the button to appear.

<a href=”http://www.linkedin.com/shareArticle?mini=true&url=http://your page url&title=Your Page Title&summary=Your page content description&source=My Website Name” target=”_new”> <img src=”URL TO THE IMAGE” alt=”linkedin share button” width=”20″ height=”20″ title=”Share on Linked In” /> </a>

This opens a page in a new window or tab (If you want to use a pop-up window, you will need a bit of extra code) with a box that looks like this:

Guidelines to customise this button code, and some free button images can be found at http://www.graphicline.co.za/webmaster_tech/codesnippets/custom_linedin_button.htm

It can also be tested from that page.

Linked in Button for HTML

This Linked In button code is intended for HTML webpages. The code described is manually inserted in the page.  If you want to to use an active method of inserting page URL and Title, you will need to use the Linked In Java API or REST API, with JQuery or similar code.

NOTE: Using the API requires anyone sharing the page to allow the API to access their profile – not a perfect solution – the API is under active development so this may change soon…

Custom Image Buttons for Other Social Shares:

More code snippets for Twitter, Facebook, Stumble Upon, Reddit, Delicious, and Digg can be found from the menu on this page: Technical Things (Graphicline.co.za). Several of the code snippets have been updated recently to use a pop-up share box instead of a new page or tab and better integration for Open Graph meta data.

A link to a short article dealing with Open Graph data is also available.

Mike Otgaar

Related Articles by the same author:

• Open Graph and Custom Linked In Share Buttons (Graphicline Blog)