Header image for Space Out Coding

Creating Custom Social Media Buttons

0 Comments

Facebook, Twitter, Pinterest and other social media websites, all have their own code to insert into your website for easy sharing of your webpage. But all that JavaScript! It's a nightmare..Social Media buttons can greatly reduce the speed at which your website loads. JavaScript is called, which then makes a request to that social media website, which then sends the code to be displayed, and a button appears.

A lot of people enjoy using those buttons, but not everyone enjoys the load times. You can reduce the load times by using AddThis or ShareThis, but once again, you're dependent on JavaScript. And with the rise of people using addons likeĀ NoScript to block JavaScript, and Ghostery that block ads, as well as social media buttons, sometimes, it's best not to have JavaScript dependent buttons.

Though of course, why would people block the social media buttons? Because those buttons can be used to track your movements across the internet. Everytime that button is loaded, the social media website is able to tell who loaded that page and button. Not everyone likes being tracked. They also slow down websites. I had three social media buttons, and it took my website over 10 seconds to fully load! I removed the buttons, and I was down to a little under 2!

Having your own images will help you stand out. Anyone can have the standard images. Having your own will set you apart. One disadvantage is it wont show the number of likes or shares beside your button. Facebook has the option to show how many people have shared a certain page. You can use your own care to track shares on your website though. Creating your own code wouldn't be too difficult. You simply count how many times the link is clicked, using a server side language of your choice.

So how can this be achieved? Rather simply actually. All you need is a simple URL, and an image.

Facebook

http://www.facebook.com/sharer/sharer.php?u=[URL]&title=[TITLE]

Twitter

http://twitter.com/home?status=[TITLE]+[URL]

Google+

https://plus.google.com/share?url=[URL]

Pinterest

http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&description=[TITLE]&is_video=false

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Reddit

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Tumblr

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Delicious

http://del.icio.us/post?url=[URL]&title=[TITLE]]¬es=[DESCRIPTION]

StumbleUpon

http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Skills

Clientside
  • JavaScript
  • CSS3
  • HTML5
  • jQuery
  • Bootstrap
  • Desktop/Mobile
Serverside
  • PHP
  • MySQLi
  • FuelPHP
  • SEO
  • WordPress
  • OpenCart
  • Shopify
  • MediaWiki

Facebook Twitter 306-684-6040