01 January 2017
Create social share buttons with custom icons
How to create social share buttons with custom icons
Over the years, #social media has become one of those inevitable elements in our lives that you just can’t escape, even if you wanted to. I am sure that I am not the only one who feels at times, that there is just too much of it. I remember those days that whenever there was a new social network, I felt the urge to go ahead and sign up. After a while, it just became either hard to track each and one of them, or just simply lost interest in it because not many of my friends were using, or something else.
Nowadays, I just stick to few of them to maintain my sanity level, as I am trying to have a life that doesn’t involve me being glued to my phone. Ok, I lied. My phone and I, we are inseparable. Anyway. Now to the nitty griddy stuff.
I have sort of assumed that it just can’t be done, and if does, it may be complicated because any of the social services don’t seem to stick to one syntax when it comes to URL submission method. I don’t know how many times a designer came to me with completely custom design treatment for any of the icons, and I just told him that it can’t be done. Well, I did some research and found out that in fact you can have social share links with custom #icons and it’s not all that hard to do.
According to Frédéric, supposedly the URL syntax above for Facebook has been deprecated, even though so far it seems to be still working for me, but just in case here is the new one for future reference.
tapiture.com/bookmarklet/image?img_src=[IMAGE]&page_url=[URL]&page_title=[TITLE]&img_title=[TITLE]&img_width=[IMG WIDTH]img_height=[IMG HEIGHT]
NOTE add http:// before urls
This a great list listing most popular social services but I have struggled finding what the syntax for an email button should be like. If you are a developer, you are most likely familiar with syntax for an email link. What you need to accomplish the desired outcome, your markup should looks something along these lines:
<a href="mailto:?subject=[TITLE]&body=Check out this site I came across [URL]">[EMAIL]</a>
I’ve been just recently asked if I knew about a way to create a “follow” buttons without any plugin. So far I’ve only looked into Twitter’s syntax for a follow button and this is what I got:
<a href="https://twitter.com/intent/follow?original_referer=[URL]/®ion=follow_link&screen_name=[YOUR TWITTER HANDLE]&tw_p=followbutton" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'https://twitter.com/intent/follow?original_referer=[URL]/®ion=follow_link&screen_name=[YOUR TWITTER HANDLE]&tw_p=followbutton', 'Follow @[YOUR TWITTER HANDLE]']);">Follow @[YOUR TWITTER HANDLE]</a>
Having this site in WordPress, I wanted to test it of course. Using WordPress codex functions, all I had to do was to substitute the
<?php print(urlencode(the_title())); ?>
<?php print(urlencode(get_permalink())); ?>
I hope you find this information helpful for creating social media buttons with custom icons. Feel free to let me know in comments below or hit me up on #Twitter about what you think, or if you have come across any other approaches that were helpful to you.
Let's make something great together
Get in touch with us and send some basic info for a quick quote