Author: abhineet

If you are developing a website, it is imperative to have social sharing buttons to increase social engagement which in turn will result in higher traffic. A lot of widgets are available for this purpose.

The Pros

Adding a single line of Javascript adds all the popular sharing buttons to your website. Some services allow you to customize them through remote dashboards. They also add share count and other metrics to your buttons.

From button styling to icons, everything is handled by these widgets. All you have to do is select which buttons to show and style of those buttons.

These services also provide cloud-hosted analytics data where you can easily monitor the visitor and their sharing pattern of different posts.

The Cons

When you add these widgets, they simply add the Javascript SDKs of these social websites which load the sharing button and other metrics like the number of shares, likes, etc. along with the buttons.

This may seem good, but it adds a lot of processing to the webpage. This results in higher load time and thus, lower ranking in search engine result pages (SERP).

A major portion of your added analytics becomes redundant if you already have Google Analytics code installed on your website. Social analytics can also be implemented through events in Google Analytics, thus making additional tracking redundant. In most cases, social analytics added by these sharing buttons adds little value.

Also, many of these services, track your visitors and you have no option to opt-out of it. They get all the traffic data of your website, slowing down your website with their trackers, and you have no control of that. For a webmaster, this is an uneasy situation.

The Simple Solution: No Javascript

The simple solution is to eliminate all the Javascript and add simple HTML buttons with sharing links provided by almost all social networks. This entire code will be purely HTML and CSS without Javascript.

I have created sharing buttons for some popular social networks and included the required CSS for the buttons. You can add your styles as well. In case you need an even better look, you can also add icons to your buttons.

The CSS

First, let’s create CSS for these buttons.

.button {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: .25rem .5rem;
  font-size: 1rem;
  font-weight: 300;
  border-radius: .2rem;
  color: black;
  background-color: white;
}

.button-facebook {
  background-color: #4267b2;
  color: white;
}

.button-twitter {
  background-color: #1DA1F2;
  color: white;
}

.button-whatsapp {
  background-color: #25D366;
  color: white;
}

Facebook

In the case of Facebook, you will also need a Facebook App ID which is very easy to get. Don’t worry, you do not have to create an app. Just go to Facebook for Developers dashboard, and fill the form with new app details. A Facebook app will be created and added to your Facebook developers account. Once you get the app id, use it in the following code to add simple Facebook sharing buttons.

<a href="https://www.facebook.com/dialog/share?app_id=your-app-id&href=https://example.com/link-to-your-post" target="_blank" title="Share on Facebook" class="button button-facebook" rel="noopener noreferrer">Facebook</a>

Twitter

<a href="https://twitter.com/intent/tweet?url=https://example.com/link-to-your-post&text=Post-Title&via=your-twitter-username" target="_blank" title="Share on Twitter" class="button button-twitter" rel="noopener noreferrer">Twitter</a>

WhatsApp

<a href="//example.com/link-to-your-post" target="_blank" title="Share on WhatsApp" class="button button-whatsapp" rel="noopener noreferrer">WhatsApp</a>

These are just three, but you can add any number of buttons of different social networks based on the sharing link provided in their documentation.

These links are simple HTML and CSS with NO Javascript. They do not add extra load on your page and give you the required functionality. You may miss the share count displayed on your sharing buttons, but it is not needed and the downsides of adding it to your website are simply not worth it.

So, just add these buttons to your website posts and pages to replace the heavy sharing widgets, and move towards a faster, cleaner code and a fast loading website.

While developing a project, PHP built-in server is much more flexible and easy to use compared to desktop setups like LAMP, XAMP, WAMP, etc.

However, without Apache, you also lose access to the magical and powerful .htaccess feature where you can create simple rewrite rules.

What if our application needs such rewrites like loading .html files for permalinks without extension?

Don’t worry. PHP provides an excellent and simple solution for this as well. You can create your router.php and call it while starting the server. Now, you are free to add any rewrite rule or any other condition to run your code.

To do this, create a file named router.php in your project root. You can choose any name for this file, but router.php provides the right context.

In this use case, I have a static website with all the static content like HTML, CSS, etc. But my permalinks are without HTML extension, though the file name is the same. I want to write a router that can rewrite my permalinks to .html version and at the same time, not mess us my style (.css) and script (.js) files.

Here is the code which I wrote for my particular use case. You can modify it to suit your requirements.

// router.php

// Get the url path and trim leading slash
$url_path = trim( $_SERVER[ 'REQUEST_URI' ], '/' );

// If url_path is empty, it is root, so call index.html
if ( ! $url_path ) {
    include( 'index.html' );
    return;
}

// If url_path has no dot, it is a post permalink, so add .html extension
if( ! preg_match( '/[.]/', $url_path ) ) {
    include( $url_path . '.html' );
    return;
}

// In case of css files, add the appropriate header
if( preg_match( '/[.css]/', $url_path ) ) {
    header("Content-type: text/css");
    include( $url_path );
    // You can do the same for other file types as well
}

Your router.php is ready. Now, open your terminal, go to the project root and start the PHP server with the following command.

pathtophp.exe -S localhost:8000 router.php

Finally, open your website by going to localhost:8000 on your browser. It works. Great.

Please note that this method is good for small applications so that you can quickly do a test run and check the code without deploying it on a proper server. In the case of bigger applications, this setup may become complicated as it is difficult to scale.