Category Archives: Custom Share Buttons
A selection of code snippets to use a graphic image as social netword share button. This code is tested, and working on the page it is available from, as wel as other pages throughout our home web site.
Custom Button for Twitter Share
Posted by Mike
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.
Read the rest of this entry →
Posted in Custom Share Buttons, Internet, Sharing, Snippets
Tags: graphics, HTML, JavaScript, Social networks, Twitter, Website
Licence Free Graphics
Posted by Mike
8 Button Graphics and Code
Posted by Mike
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:
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
Posted in Custom Share Buttons, Snippets, TECHNOLOGY
Using Custom Share Button for LinkedIn
Posted by Mike

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.
Related Articles by the same author:
- Open Graph and Custom Linked In Share Buttons (Graphicline Blog)
