Better Solution For Social Sharing Buttons – 100 Days of Code Challenge

Better Solution For Social Sharing Buttons - 100 Days of Code Challenge

The Better Solution

I have a previous post where I show a way to create native social sharing buttons. PHP was my choice of technology. It was clunky. Did not conform to best practices. All around a bad time. My excuse was that I was in a hurry, but we as technologists are always pressured to get something done yesterday. Try to remain cool, calm, and collected. Then, carry on.

Today, I will share a better solution for social sharing buttons as I continue my 100 days of code challenge. Angela Yu would be proud that I have applied her lessons to a real world solution.

Best Practices

It is important to follow some sort of best practice guidelines when constructing web pages. I have been refreshing my front-end skills with the help of a Udemy course. Turns out that you should have separation of responsibilities just like on the back-end.

The monolithic PHP file has been broken up into 3 separate files – index.html, index.js, and styles.css. The html file is all about structure, the javascript file handles the interactions, and the css file handles the styling. There may be a bit of structure in the js file, but I believe I have a compelling argument for including it there. Here’s a peak at the new UI.

new social sharing buttons user interface

Index.html

The html file is pretty straight forward. CSS included in the head, JS included before the closing body tag. I was tempted to put onClick events on buttons, but that would have defeated the purpose of coming up with a better solution.

More to that point, I chose Bootstrap to keep me from having to worry about structure. Plus it has some neat styles to tap straight out of the box. I’ll explain why I chose to go with vanilla javascript a bit later.

On a side note. The social networks have some strange js includes to watch out for. Pinterest in particular needs this included:

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

You will need to start up a local server or deploy it online in order for that call to resolve successfully.

Styles.css

There isn’t anything earth-shattering about the css file other than all of the styles are located there. None show up in the other two files. We are truly cruising towards a better solution for social sharing.

Index.js

Full transparency here – I was never a javascript guy. I cut my teeth on embedded C. Then moved into Perl and PHP before C# and Java. The little js I had done was hacked together worse than Dr. Frankenstein’s monster.

jQuery was out because I wanted to learn more about javascript. Even though it is widely used and probably would have gotten me closer to my better solution for social sharing a bit quicker.

The closest I came to hacking something I can think of is figuring out how to get the social button javascript to load dynamically. I didn’t have to worry about that in my PHP version because I posted back to the page. No such luxury here. Front-ending is hard!

Luckily I was able to find a bit of help on Stack. Zack Argyle had just what I was looking for. Fabio Antunes gets an honorable mention for his post on XFBML. It was close enough to get me over the hump.

The key take aways are listed below. Each of the libraries has a method to force their js to load.

Day 7 : July 18, 2019 Thursday

Today’s Progress:

  1. Made a better solution for social sharing buttons. With html, css, and javascript.

Thoughts Quite a bit of a break there. I probably should restart the clock on the challenge. We’ll see how it goes. There are lots of pitfalls out there when it comes to front-end work. One can create powerful websites with a bit of skill.

Link(s) to work

1.Shares

You May Also Like