Social Buttons Slowing You Down? Speed Load Times In Genesis

How to Load Social Media Buttons After Pageload in Genesis

How to Load Social Media Buttons After Pageload in Genesis

It happens all of the time: the client wants the social networking share buttons not only on the individual posts but the sidebar and/or the blog index page, also.

When that happens, the loop forces the social icons to load individually for each post, all the way down the page and the sidebar and anything after the content is forced to wait.

The site I was working on recently had just such a case. Facebook and Twitter sharing buttons were causing the home page to take approximately 28 seconds to load until the sidebar could appear.

How To Workaround This Page-Load Disaster In Genesis

With a little brainstorming, I came up with a solution by investigating the code for each button. In most cases the code was a pairing of visual text/CSS elements followed by a script. Here is an example using the “official” Twitter button:

Follow @jpetersen

The page doesn’t require that the script be buddies with the other part in order to render, so I posited that I could put the script at the end, just before the closing tag, which is ‘genesis_after_footer’ at the bottom of the Simple Hooks plugin.

For those not familiar with the Genesis Hooks or Child Themes take a look at How to Build a Genesis Child Theme.

I separated the scripts from the other code next, and discovered that, by doing so, I eliminated several requests to that script on the individual posts that requested the same scripts at the top and the bottom of the post as a nice side benefit.


This made the content in the post more efficient, especially on the sites where the client wants to list all of their Twitter IDs in the sidebar: you need only paste the display portions in the sidebar and call out the scripts once at the end of the pageload.

Pair This Code With Both The Twitter And Facebook Display Codes

genesis_after_post_content

Why You Should Wrap Your Buttons in DIVs

Note that I wrap my buttons in DIVs and the entire area in a div so I can move it around any way I want. Scroll down to ‘genesis_after_post_content’ in Simple Hooks and enter the following code into the box, whilst enabling Shortcodes and PHP in the hook to place the buttons immediately before the post meta info:

[post_date] in [post_categories][post_comments]

Code result

From there, it’s a simple effort to make the buttons appear in whatever alignment using CSS since it is well-tagged for CSS manipulation and you can change them around and also place a copy under the post title with a different appearance without sacrificing pageload times, since they all are coming from scripts in the footer.

This technique also works with the Twitter follow button because it uses the same .js file from Twitter. I was disappointed that this doesn’t work with StumbleUpon because that entire display is created with the script, however, that script loads so fast I don’t care.

It’s instantaneously there while the Twitter and Facebook buttons take an order of magnitude or more longer to display. The Google + code has recently split their render code from the script: http://www.google.com/webmasters/+1/button/

If It Works, Go With It

I’m sure this isn’t the only way and I’ve got a feeling that it may not be the best way to speed up the display of these social share buttons, but it’s what I’ve come up with and it’s getting the job done very nicely on every framework I’ve used it on to date.

If you want an in-dept review of Genesis, be sure to read: Genesis Theme Framework Review: Gorgeous, Flexible, and Insanely Powerful

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Jesse Petersen

Customer service. Customer experience. Long-term client/designer relationships. These are the things that I wanted to bring to the industry when I formed Petersen Media Group in 2009 after seeing hundreds of people struggling to make their site something to be proud of, even though they were using premium themes. I consider my work a craft and my clients as friends whom I get to know in order to best serve them and their customers. I work mostly with well-known experts in their fields due to word-of-mouth referrals, but no one is too small to have my full attention - it's what everyone deserves. I don't farm out work to others because that loses the personal touch that is expected when someone chooses to work with me.

Comments