lesterchan.net v4.3

· · · Site

Been about 10 months since lesterchan.net v4.2. For v4.3, the changes are mostly cosmetic and backend.

Web Push Notifications by Roost
I have added Roost‘s push notification service. If you visit this site more than two times using Safari (Chrome and Firefox is coming soon), you will get a push notification opt-in prompt. If you opt-in, every time there is a new post on this site, you will get a push notification as shown in the image below.

lesterchan.net - Notification Banner
lesterchan.net – Notification Banner

Changes to Top Menu and Sidebar
I have made the top menu the primary navigation and hence all the site’s menu and selected social links are at the top. It is also fixed on scrolling.

The sidebar has been revamped to include quick links, post’s categories, latest posts, popular posts and recent commented posts. The site navigation has been removed from the sidebar.

You can check out the difference below.

lesterchan.net - v4.2
lesterchan.net – v4.2

lesterchan.net - v4.3
lesterchan.net – v4.3

Pinterest
I was pretty surprised to see there are a few pins on Pinterest coming from this blog, you can check it out: Pins from lesterchan.net on Pinterest.

And hence, I decided to add a “Pin it” button at the bottom of every post beside the sharing links as well as when you hover any image, it will give you the option to pin that image on Pinterest.

lesterchan.net - Pin it
lesterchan.net – Pin it

lesterchan.net - Post Bottom
lesterchan.net – Post Bottom

You might also notice the addition of “You might also be interested in” aka Related Posts section at the end of every post. That is new as well.

New Relic
My VPS is now using SSD and hence it has been migrated to another physical machine. Because of that, I can start using New Relic again. The previous time I used New Relic, it keeps crashing my VM. It might be due to some incompatibility issues.

For the unaware, New Relic is a software analytics tool suite used by developers, ops, and software companies to understand how their applications are performing in development and production.

It is expensive, costing about US$149/host/year. Of course, I am not on the paid plan since this is just a personal blog. The free plan is good enough for me to play with.

lesterchan.net - New Relic
lesterchan.net – New Relic

Revamp Social Sharing Links
I have also revamped the social sharing links located at the bottom of every post on the single post page. Instead of using the default widget provided by the respective sites, I am now using my own API to get the share counts from various sites and displaying it. This makes the design more consistent.

Upon clicking the link, it will popup a window of the respective site for you to share it. The popup window is done using jquery-popupwindow.

lesterchan.net - Post Bottom
lesterchan.net – Post Bottom

Here are the URLs I used to get the count and the URL to construct the popup window:

Facebook

Count URL: http://graph.facebook.com?id=POST_URL
Popup Window URL: https://www.facebook.com/dialog/share?display=popup&app_id=FACEBOOK_APP_ID&href=POST_URL&redirect_uri=POST_URL

Twitter

Count URL: http://urls.api.twitter.com/1/urls/count.json?url=POST_URL
Popup Window URL: http://twitter.com/share/?via=TWITTER_USERNAME&text=POST_TITLE%20-%20&url=POST_URL

Google+

Count URL: https://clients6.google.com/rpc?key=AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ
Post Body: [{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"POST_URL","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]
HTTP Header: Content-type: application/json
Popup Window URL: https://plus.google.com/share?url=POST_URL

LinkedIn

Count URL: http://www.linkedin.com/countserv/count/share?format=json&url=POST_URL
Popup Window URL: http://www.linkedin.com/shareArticle?source=SITE_NAME&title=POST_TITLE&url=POST_URL

Pinterest

Count URL: http://api.pinterest.com/v1/urls/count.json?url=URL
Popup Window URL: https://www.pinterest.com/pin/create/button/?media=IMAGE_URL&description=POST_TITLE&url=POST_URL

Or you can check out my Gist on Github: Get Social Links Share Count

Social Stats
I also got rid of the default social widget from Facebook, Twitter and Google+ and replaced it with my own as show in the screenshot below.

lesterchan.net v4.3 - Social Stats
lesterchan.net v4.3 – Social Stats

Now that Social Stats and Social Sharing Links have been revamped, I removed Facebook, Twitter and Google+ Javascript from being loaded. This resulted in my Pingdom Page Speed increased from 87 to 93 (the higher the better)!

lesterchan.net v4.3 - Pingdom Page Speed
lesterchan.net v4.3 – Pingdom Page Speed

Miscellaneous

  • Created a channel on Pushbullet called #lesterchan
  • Archive page now contains the first post image
  • Added “You might also be interested in” aka related posts at the end of every posts
  • Add post image to RSS feed via media:content tag
  • On WordPress 4.1, Bootstrap 3.3.2 and Font Awesome 4.3
  • Removed eXTReMe Tracking after using it for almost 13 years

You Might Also Be Interested In