Dinamically Get Social Media Buttons After Page Loading

Dinamically Get Social Media Buttons After Page Loading
by Janeth Kent Date: 29-06-2013 socialmedia social ajax

While working on the new theme for this site, we realized that the various social media buttons We use were making the entire page load considerably slower. As soon as the browser hit that region of the page (the end of each post), everything would stop until those fat buttons were loaded. Using a little bit of jQuery, however, it's possible to get around this and load these heavier elements after the rest of the page has finished loading.

The Code

In order to load the share buttons after everything else, we need to do two things. First, we need to edit our post template (single.php) to call a jQuery function after everything has loaded. We call this function in single.php instead of an external JavaScript file since some buttons benefit from the post permalink or title, so we need to make sure our buttons have access to that information as well.

single.php



        
 

In the code above, we're calling the function get_social using jQuery's window load function instead of the typical document ready – this makes means our function is called after everything has loaded, whereas document ready loads all code immediately after the DOM is ready. Inside the window load event, we call our function and pass the title and permalink so our buttons have access to it.

In the get_social function itself, we can use jQuery's load function to pass our variables, get the response and populate or div (with the id of "sharing-buttons"). Please be sure to point to the correct URL of your share.php file (which we'll create next) – you may even want to use the absolute URL to minimize errors (ie http://…).

share.php

In the beginning, we grab the permalink and title variables from either $_GET or $_POST (a bit more future-proof in case our function changes) and use the default button codes provided by these services. Note that here we don't use the permalink or title in any of the above buttons, as these services automatically detect that information from whatever page they're posted on, however it's there if you need it!

That should be it though – if you edited your single.php and correctly point to your share.php file in the get_social function, you should be loading your buttons after the rest of the page is completely loaded!

The share.php simply contains all of your dynamic button code. Here's what looks like:


    $permalink = $_GET['permalink'] ? $_GET['permalink'] : $_POST['permalink'];

    $title = $_GET['title'] ? $_GET['title'] : $_POST['title'];

?>

       
    Share
   

Please, pay attention that some buttons could not function correctly when loaded this way, such as the one for DZone. We assume it has to do with the way their button code extracts the host URL, which it may have had difficulty with since it was being loaded from an external file. While it would've been nice to include that button, having a faster loading site is much more important than any single service.

Also, please keep in mind that this won't really change your overall page loading times – it will only make it so that the rest of the site is loaded before the social media buttons. It's useful if you find these buttons to be slow at times and parts of your page render white/blank until they're finished loading, which is the issue I was having.

 
by Janeth Kent Date: 29-06-2013 socialmedia social ajax hits : 4107  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Related Posts

The Importance of Maintaining a Crisis-Ready Social Media Strategy: A Closer Look

Social media has revolutionized the way businesses connect with their audiences, allowing for instant communication and unprecedented reach. However, with great power comes great responsibility. As social media platforms continue…

Should Your Social Media Strategy Always Be Ready for a Crisis?

Social media can offer modern businesses so many incredible opportunities. It can be used to reach new customers, build reputation, advertise new products, and connect with industry peers and partners. However,…

7 Most Effective Ways to Make Money From Photography

Many people all over the world enjoy photography. At first, it may seem difficult to learn, but once you turn it into a hobby, then it becomes a pleasure rather…

Step by Step Guide to Successful Social Media Marketing

The most popular social media platforms boast of having hundreds of millions of active users every month. The number itself is more than enough to attract brands in trying to…

How to Pique Customer Interest

If your target audience aren’t interested in your brand, your marketing campaigns, or the service that you provide, why would they feel compelled to bring you their business? If you’re…

5 Ways to Effectively Market Your Online Business

Creating any business is hard enough. Having people notice your business is a completely new challenge. Similar to Michael Scott’s “declaration” of bankruptcy in The Office doesn’t make it so. Creating…

A Guide to Integrate Social Media into Your E-Commerce Store

There’s no disputing the influence that the internet and social media have had on business management. The speed at which platforms like Facebook, Instagram, and Twitter have grown has been…

Best apps to boost your social media

Most individuals, marketers and business people struggle to get the best out of social media but do not know how to go about it. There are various applications that can…

8 Social Tools to interact with Customers and improve CX

Customer experience is measured by the individual’s experience during all points of contact against the individual’s expectations. Over the past century, countless inventions and advancements have inadvertently raised the bar of…

Facebook Shortcuts: Infographic

Want to save a bit of time? Facebook integrates some keyboard shortcuts that make it easier for users to navigate through the platform. Today we give you some tips on how…

Facebook's top 10 social design secrets

Designing, building and growing successful social products requires a solid understanding of social behaviour and a willingness to adopt and embrace a development process that’s different to what most people…

Google+ Resources to Help You Create a Strategy for Success

  A successful SEO campaign includes a Google+ strategy, yet many companies are still not thinking about Google+ as such a crucial aspect for SEO. Your typical social media benefits are…