Hi there,

for this website I wanted a possibility to shrink the share links but still wanted good analytics for them. Since Bitly offers the best shortlink service, has an API, has the possibility to use your own domain and is free, I used it for this purpose. It's pretty easy.

 

Step 1: Get your API key

For these actions, you won't need to register your app like you had to do in my Latest Instagram Photo tutorial. You just need your user API key.

For that, login into your Bitly account, click on your user name in the top right corner, select Settings and select Advanced. Scroll all the way down and under "Legacy API key", you can copy your key.

Step 2: The code

  1. $key = ""; // Your API key
  2. $url = urlencode(get_permalink()); // get encoded URL of current post
  3. $text = urlencode(wp_title('', false)); // get text for Twitter, Google+ and Co
  4. $curluri = "https://api-ssl.bitly.com/v3/shorten?access_token=".$key."&longUrl=".$url."&format=txt"; // The URI for curl
  5. $curl = curl_init(); // init curl
  6. curl_setopt($curl, CURLOPT_URL, $curluri);
  7. curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
  8. curl_setopt($curl, CURLOPT_TIMEOUT, 20);
  9. $result = curl_exec($curl); // get the result
  10. $url = urlencode($result); // encoding the result

Step 3: Implement it!

For that, I used Bootstrap, Font Awesome, Bootstrap Social and JS magic to create some nice looking share buttons. One for desktop with transitions and one for mobile without transitions and WhatsApp button.

 

 

The shareAnimate() function:

  1. function shareAnimate(id, parent) {
  2. $("#" + parent).removeClass("btn-social-icon");
  3. $("#" + parent).addClass("btn-social");
  4. $("#" + id).show()
  5. }
  6.  
  7. function shareAnimateB(id, parent) {
  8. $("#" + parent).removeClass("btn-social");
  9. $("#" + parent).addClass("btn-social-icon");
  10. $("#" + id).hide()
  11. }

Because Bootstrap Social hasn't a WhatsApp and neutral URL button, I made those myself:

  1. .btn-whatsapp {
  2. color: #fff;
  3. background-color: #43d854;
  4. border-color: rgba(0,0,0,.2);
  5. }
  6.  
  7. .btn-whatsapp:focus,.btn-whatsapp.focus,.btn-whatsapp:hover,.btn-whatsapp:active,.btn-whatsapp.active,.open>.dropdown-toggle.btn-whatsapp,.btn-whatsapp:active:hover,.btn-whatsapp.active:hover,.open>.dropdown-toggle.btn-whatsapp:hover,.btn-whatsapp:active:focus,.btn-whatsapp.active:focus,.open>.dropdown-toggle.btn-whatsapp:focus,.btn-whatsapp:active.focus,.btn-whatsapp.active.focus,.open>.dropdown-toggle.btn-whatsapp.focus {
  8. color: #fff;
  9. background-color: #4fd843;
  10. border-color: rgba(0,0,0,.2);
  11. }
  12.  
  13. .btn-whatsapp:active,.btn-whatsapp.active,.open>.dropdown-toggle.btn-whatsapp {
  14. background-image: none;
  15. }
  16.  
  17. .btn-whatsapp.disabled,.btn-whatsapp[disabled],fieldset[disabled] .btn-whatsapp,.btn-whatsapp.disabled:hover,.btn-whatsapp[disabled]:hover,fieldset[disabled] .btn-whatsapp:hover,.btn-whatsapp.disabled:focus,.btn-whatsapp[disabled]:focus,fieldset[disabled] .btn-whatsapp:focus,.btn-whatsapp.disabled.focus,.btn-whatsapp[disabled].focus,fieldset[disabled] .btn-whatsapp.focus,.btn-whatsapp.disabled:active,.btn-whatsapp[disabled]:active,fieldset[disabled] .btn-whatsapp:active,.btn-whatsapp.disabled.active,.btn-whatsapp[disabled].active,fieldset[disabled] .btn-whatsapp.active {
  18. background-color: #720e9e;
  19. border-color: rgba(0,0,0,.2);
  20. }
  21.  
  22. .btn-whatsapp .badge {
  23. color: #4fd843;
  24. background-color: #fff;
  25. }
  26.  
  27. .btn-urlshare {
  28. color: #000;
  29. background-color: #eff7ff;
  30. border-color: rgba(0,0,0,0.2);
  31. }
  32.  
  33. .btn-urlshare:focus,.btn-urlshare.focus {
  34. color: #000;
  35. background-color: #bcddff;
  36. border-color: rgba(0,0,0,0.2);
  37. }
  38.  
  39. .btn-urlshare:hover {
  40. color: #000;
  41. background-color: #bcddff;
  42. border-color: rgba(0,0,0,0.2);
  43. }
  44.  
  45. .btn-urlshare:active,.btn-urlshare.active,.open>.dropdown-toggle.btn-urlshare {
  46. color: #000;
  47. background-color: #bcddff;
  48. border-color: rgba(0,0,0,0.2);
  49. }
  50.  
  51. .btn-urlshare:active:hover,.btn-urlshare.active:hover,.open>.dropdown-toggle.btn-urlshare:hover,.btn-urlshare:active:focus,.btn-urlshare.active:focus,.open>.dropdown-toggle.btn-urlshare:focus,.btn-urlshare:active.focus,.btn-urlshare.active.focus,.open>.dropdown-toggle.btn-urlshare.focus {
  52. color: #000;
  53. background-color: #98ccff;
  54. border-color: rgba(0,0,0,0.2);
  55. }
  56.  
  57. .btn-urlshare:active,.btn-urlshare.active,.open>.dropdown-toggle.btn-urlshare {
  58. background-image: none;
  59. }
  60.  
  61. .btn-urlshare.disabled,.btn-urlshare[disabled],fieldset[disabled] .btn-urlshare,.btn-urlshare.disabled:hover,.btn-urlshare[disabled]:hover,fieldset[disabled] .btn-urlshare:hover,.btn-urlshare.disabled:focus,.btn-urlshare[disabled]:focus,fieldset[disabled] .btn-urlshare:focus,.btn-urlshare.disabled.focus,.btn-urlshare[disabled].focus,fieldset[disabled] .btn-urlshare.focus,.btn-urlshare.disabled:active,.btn-urlshare[disabled]:active,fieldset[disabled] .btn-urlshare:active,.btn-urlshare.disabled.active,.btn-urlshare[disabled].active,fieldset[disabled] .btn-urlshare.active {
  62. background-color: #eff7ff;
  63. border-color: rgba(0,0,0,0.2);
  64. }
  65.  
  66. .btn-urlshare .badge {
  67. color: #eff7ff;
  68. background-color: #000;
  69. }

And that's it! Put it all together and you're done!

 


Code

Newsletter

Subscribe to my newsletter and stay tuned.


Donate

Enjoy this blog? Awesome! If you feel generous, I’d appreciate a small tip. Thanks!

Donate with PayPal