Tag Archive for: Facebook

Social Sharing Buttons for eBay Listings – Copy & Paste Code!

Social Sharing Icons for eBay ListingsWould you like to be sporting the social icons that you at the top of every eBay listing, in your listings?

You know the ones the links that take your products to the sites below and are in the screen shot to the right?

  • Facebook
  • Pinterest
  • Twitter
  • The button to email a friend
  • And for good measure, the “Add to Watchlist” link too.

You do? Sweet, I’ve got some sick copy & paste code for you below :)

They do come with a warning though…. Even though they are a direct replication of what eBay has on the top of each listing and the code provided in this article is based of what eBay use’s (it even uses their image for the icons and part of their CSS), this still can be classed as a links policy violation and it’s to be used at your own discretion.

How To Use

In the next part of this article I’m going to be referring to “keywords”, you may also know these as tags or macros and are used by third-party tools to list to eBay with.

If you have no idea what these are then either you’re not using a 3rd party eBay listing tool or you’ll find these two articles super useful Part 1 & Part 2.

If you are not using any of these or a tool that does support keywords, for example if you are manually listing items on eBay or using TurboLister, but still want the icons, then follow the steps for “WITHOUT” a 3rd party tool below.

For Users WITH 3rd Party eBay Listing Software

If you have 3rd party software that supports keywords, it’s going to be two edits for you and I’ve included the keywords for:

If you tool have different keywords, then just change them over by following the instructions below.

If you’re using any of the tools above or a similar product that has keywords (tags, macros or whatever you’d like to call them), then it’s a simple case of copying the code later on in this article  and swapping over the keywords for s_ItemTitle and s_ItemImage at line 59 and 60.

For ChannelAdvisor your keywords are: {{ITEMTITLE}} and {{IMAGE(ITEMIMAGEURL1)}}

For eSellerPro your keywords are: {{Title}} and  {{Image(ItemImageURL1)}}

For ChannelGrabber your keywords are: {{title}} and {{image1}}

Swap these keywords over as appropriate for text between the quotes in  var s_ItemTitle = “{{Title}}“; and var s_ItemImage = “{{Image(ItemImageURL1)}}“; and then paste the code into your listing template section and press save.

Tip: If you’re a little lost, see the next section for users without 3rd party tools for a colour coded guide.

For Users WITHOUT 3rd Party eBay Listing Software

This isn’t a biggy, you can still use this script. However it requires you to edit a little bit of HTML, but it’s really easy and if you get stuck, let me know in the forums, I’d be happy to help you (registration is of course free).

Copy and paste the code in the section below into your listing, where you would like the buttons to show, in the code there two variables that you need to set, these are:

var s_ItemTitle = “{{Title}}“;

This is at line 59 below and

var s_ItemImage = “{{Image(ItemImageURL1)}}“;

Which is at line 60.

In between the quotes for each line you need firstly change the text {{Title}} (as shown above in red) to your eBay listing  title. For example, if you’re listing with an title called “LOVELY TOWN & COUNTRY ** WELLINGTONS”you’d pop this between the quotes so it now reads like this:

var s_ItemTitle = “LOVELY TOWN & COUNTRY ** WELLINGTONS“;

If you know how to find the URL (link) for an image then you can also update the text between the quotes for the s_ItemImage setting too, if you don’t then just set this to:

var s_ItemTitle = “”;

But if you do, pop the image URL between the quotes and Pinterest will work for you :)

Now copy and paste the entire code into your listing, on the HTML tab where you would like the buttons to appear and remember if you get stuck, let me know in the forums, I’d be happy to help you.

The Social Buttons Code for eBay Listings

Below is the code you’ll need to copy and paste for your social buttons to appear, remember to set your keywords to the title and image links as appropriate. Then revise or list an eBay to ensure it’s working, noting that it has to be live on eBay to work, in a preview screen the icons will not show.

Customised, Automatic Integrated Version

On a side note: If you are not using a third party tool or have to/get fed up of manually adding the title and image URL’s each time, it would take about ~1.5 hours for me to write a PHP version that connects to the eBay API and finds the listing title and main image so that this can be automated.

This would remove the need for you to manually add the title and images each time. Plus I’m pretty sure this could be setup to “auto add” to the top or bottom of eBay listings as well. But I don’t have those 1.5 hours right now at the time of posting to do so (and they would need to be paid for hours), so for now, use the above :) If you would an automated method, it can be done see the contact Matt page if this of interest to you.

Your Feedback

If you run into problems, let me know in the forums.

Once you’ve got it working, let me know by either leaving a comment below or a post in the forums, as you’ll agree the above code is pretty darn cool, enjoy and maybe you’d like to press the tweet or like button at the top of this page share it with your friends too?

The True Cost of Adding Social Buttons

AddThis Button SelectorA cost, for adding social buttons to your website? Matt you’ve lost the plot…. or have I?

I wrote an article last year because I was horrified that the Facebook Like buttons are actually adding 84Kb, or in time 1.340 seconds to the page load time of this site. In this article, I look at the social sharing buttons again, but in more depth and identify the weight behind them.

By adding the Facebook, Twitter, Stumbleupon, Digg, Google +1, Facebook Like buttons and so on… you’re adding download weight to your pages and while they might look great and you might put a tick in your mind that you’ve got the social side licked, however… What is the true cost of adding the social buttons to your website?

It’s also worth noting that very shortly you should expect new Facebook buttons to be appearing, called “Want one” and “Own”, the Facebook Like button never really ported to well eCommerce and we’ll soon be seeing these plastered everywhere.

 

Tools Used

For this exercise, I am going to be using the following tools:

  • Webpagetest.org
    I freely admit I’m a data freak and a website like this, really does it for me. For the purpose of this article I’ll be using it to identify the resources pulled on page loads. You’ll also find this site exceptionally useful for checking your page loading times as a whole.The data used for the majority of this article comes from this test: http://www.webpagetest.org/result/120220_MW_39ZEJ/ 
  • Excel
    The reports that the WebPageTest site creates can be copy/pasted to excel, this is what I’ll be using to filter the results.

Your mileage with these figures will vary upon many factors, such as location and server load. I’ve tried to keep as many aspects that I can consistent across the tests, but obviously things will vary. Felt I should point this out early on.

The use of the IFRAME tag for the majority of these sharing buttons does mean that your website page will continue to load while the external resources are being loaded, sometimes long after the website page has rendered. But my point is, they’re still being downloaded!

Let’s dig in and see what they’re like.

Facebook Social Button

In the previous article, I found that the Like button I was using was accounting for 84.4Kb to the page weight and taking over a second to the final page load time. A screen shot of this is below.

Facebook Download Data

Since then I swapped the button to a different one using a the ShareBar extension to WordPress and its this button set I’ll be looking at in this article and you’ll see them either on the left or at the top of this article (feel use them, if you’re finding this article helpful).

While the button itself is now in an IFRAME tag, which means it’ll load outside the main page and is not classed as page weight, the initial inclusion of the Facebook like button on the site is 6.9Kb and is loaded twice, for a total of 0.142 seconds.

So this is a vast improvement on the earlier article where I found it was pulling in a huge amount of overhead, however we must not forget that even though, this is in an IFRAME, it’s still being downloaded by the user.

So looking at this for the actual button in question in a separate test reveals that the browser is actually downloading a further 61Kb of data and takes around 1.229 seconds to fully load. This is shown in the screenshot below.

The full test results are here: http://www.webpagetest.org/result/120220_Y1_3A0DZ/

Interesting results so far as we’re getting close to the original 84Kb that I found last year. Lets see how the other buttons fair.

Twitter Social Button

The large twitter button is also not without a fair amount of page weight as well. Using the filters in excel from the previous test, we can see that its accounting for 52.5Kb of bytes downloaded and takes 0.431 seconds to load.

social-buttons-twitter-button-1

The Twitter sharing button also uses an iframe and we look at this as a separate resource at this page test http://www.webpagetest.org/result/120220_8C_3A0JJ/  we can see that the iframe contents are 16Kb and take 0.720 seconds to load. So that’s an extra 16Kb for the browser to download, on top of the original 52.5Kb, yikes!

Still amazed that these buttons are so top heavy? Keep reading, it gets better!

Google Plus Social Buttons

The social buttons for Google Plus One are now becoming very popular and as they work on integrating businesses, we’ll start seeing a lot more of these. The bytes downloaded for the Google Plus button in the test is 22.3Kb and the time take is just 0.31 seconds.

social-buttons-google-plus-1

Don’t get too excited just yet… Again the Google plus button is in an IFRAME, but the contents of the IFRAME still need to be downloaded and guess what… this one is at 69Kb and takes 1.607s seconds to load! Test results are in a screen shot and the test results are here http://www.webpagetest.org/result/120220_TQ_3A0NE/

Google plus one button iFrame Test

Yea, that was deceptive, the Google Plus button has the lightest include so far, but looking at the total weight of Kb downloaded, 69Kb is monstrous and again I’d like to point out that the browser is having to download this content even after the main page has loaded.

Digg Social Buttons

Now it’s time to look at the very popular Digg social buttons for sharing. I might be techy, but I am frankly unsure why its being reported that it took 0.07 seconds to load just one file and the others have no time. If you know why, let me know in the comments box below!

However, this button is coming in at 9.9Kb to load the shell of the button and apparently 0.07 seconds to load it. Although I feel this value is incorrect.

Digg social button size

Not too bad so far, so let’s take a look at what it loads. This one was a little tricky to nail down, as unlike the other buttons so far they’re using iframes, this one is using a javascript include to bring the other elements in and to test this I have take the chunk of HTML & JavaScript that is used to load the button, put it on its own page and then page speed tested that by itself (I WILL find the weight of this button!).

Digg social button speed test

The page test & results are here http://www.webpagetest.org/result/120220_15_3A0Y1/ and as this is a separate page, the results are slightly different as we need to remove the TTFB and the page from the sum of the components. The button resources come in at a total 9.4Kb of assets, with the png image taking up the majority of this weight at 5.3Kb.

Again I don’t know why the time taken to download the resources is not appearing in the test, but out of all the social buttons tested by far, at a total of 9.4Kb this is by far the lightest button!

Stumbleupon Social Button

This button is back to using a script file that weights just 0.7Kb, a fraction of a second to load and an IFRAME.

Stumbleupon share button File Size

Again lets look at the iframe weight by itself in its own test http://www.webpagetest.org/result/120220_RN_3A108/ and we find that this button comes in at a very palatable 5Kb, however sucks at a load time of 0.812 seconds.

Stumbleupon Sharing Button speed test

AddThis Social Buttons

AddThis Button SelectorThe last button that I am going to test as part of this article is the “AddThis” button. I’ve chosen this button on top of the other ones I use because this tool can be seen as a quick fix for websites.

I’ve chosen the middle set of 3 options for icon size and also the generic code for “A Website”, obviously if you’re using smaller or larger buttons and for a different platform, your actual results will differ, but for a ball park figure this will be adequate.

On the first page load for the test file I made, I can already tell this one is going to lag badly. I’m on 50Mb broadband and the page lagged for ~1 second, thats not a good sign!

And… I was right. Again I need to remove the TTFB (Time To First Byte) from the equation, but on first impressions 124Kb is a whopping amount of data to be downloading.

AddThis Social Buttons Test

I’ve pulled the results out into excel as shown in the screen shot below:

AddThis Social Buttons Speed Test

The time take is incorrect again, however its interesting to see that when we sum the bytes downloaded, that we’re coming in over the original page weight at 125.2Kb. Eitherway this social set of buttons is the largest so far.

Summary

I’ve delved into the truer weights of loading these social buttons to help you understand that adding these buttons do come with a cost attached to them. While many of these use iframes to pull in the data from the external sites and don’t count towards to page load time to get the page loaded in the clients browser, they are still being downloaded and add to the true total weight of the page.

I feel its also worth pointing out that with the majority of the buttons tested, they are using content delivery networks, which will help with the delivery speed of the data across the globe. Also the scores from the testing sites were indicating clearly that the providers of these buttons have highly optimised systems to deliver the content, with most of them scoring A’s for each mark and of course, browsers do cache these data files, so if a user has been to another site and downloaded the sharing buttons, the weight is much less as the browser as the files in its cache.

The AddThis set of social sharing buttons might be the largest of them all in this test, however to be fair here, you’re unlikely to have both the AddThis buttons AND the other buttons separated on your pages.

So looking at the results as a whole, an aggregated tool such as AddThis (which is free) could offer a huge benefit to your website visitors when compared to loading each social sharing button separately.

Questions for You

For me personally, I’m dropping the stumble upon sharing button, but keeping the others on this site until I have the spare time to look at adding an aggregated option in combination with the ShareBar features as I’d need to style it heavily to get it to appear how I would like it to appear (vertically and horizontally).

So my questions for you are:

  • Did you know these buttons add considerable page weight to your website pages?
  • How many sharing buttons do you use?

Your Invitation to ‘Connect’ with Matt

I do not run a ‘product’ based company. Doing so would cloud the line between consultant and competitor. As such I am able to uniquely leverage 10 years of experience over two software providers. that of many past & present clients, to adapt, mould processes and drive results to suit your unique business requirements.

There are a number of online channels out there that are all aimed at keeping people in touch, I’d like to virtually ‘connect’ with you and there are a couple of ways you can do so.

Note: I would have included a video with this to make it more personal, however its out on loan currently.

LinkedIn

I’m a big LinkedIn fan, its like the adults version of Facebook.

You can connect me here http://uk.linkedin.com/in/matthewogborne

Twitter

I have a few Twitter accounts, the main one I use is @MatthewOgborne and the original one is @LastDropofInk and I monitor them both most days. Also you’ll see specific messages on each account too.

YouTube

As you may have noticed, there is a distinct move on my part towards using video content more and mopre here. Its a very personal medium and you’ll literally be seeing a lot more of me!

You can subscribe to my YouTube channel here http://www.youtube.com/user/matthewogborne

Google+

I must admit, I’ve not paid Google+ much attention yet, mainly because I am focused on other sites. However the messages you’ll find here from me are both personal & business related.

Facebook

I’m also on Facebook or rather this site is.

You can find the LastDropofInk Facebook page here, I need to update it after the design change here and will be doing so later this week.

RSS & Email

Did you know that you can have the latest posts delivered straight to your inbox using Feedburner, a free Google App? No, well you do now!

Go to http://feeds.feedburner.com/TheLastDropOfInk and hit “Subscribe with Google”.

Also I have an ongoing mailing list, you can subscribe at the top of this page on the right. I keep communications to a minimum and tend to use it to grab feedback before a large article or event, like the Webinar I held last week.

You can of course just interact by leaving a comment on an article here that you’ve liked, if only yo say “hi”.

That’s it, I look forward to ‘connecting’ with you!

Matt

Facebook Like Button = 84Kb or 1.340 Seconds?

First off, I’ll openly admit I’m pretty anally-retentive when it comes to page load times and tweaking WordPress to get the most out of it. So the following, who just want a ‘button’, have your button. For me, 84Kb is crazy.

I’ve since delved into the this topic of the social buttons and you’ll find the deeper analysis of The True Cost of Adding Social Buttons insightful, as a very common one is over 120kb! You can read the full article here.

EIGHTY FOUR KILOBYTES

Yes, thats right, to include the Facebook like button on the right of the site, its downloading 83.4Kb of data just to show this single button. To me that’s just crazy-ness!

Facebook Download Data

From the sheet above you’ll see the breakdown of assets that are being pulled from facebook domains. The first object is the FB icon and can be ignored and is not included in the sums.

The red sum of 1340, is in milliseconds, or in English, 1.34 seconds. So already you must be think, holy mother of god, an extra 1.34 seconds to load this little button? But then we realise why, by summing the actual weight of these objects, we take a whopping 83.4 KB (kilobytes or one thousands of a megabyte) hit and this explains why it takes so long.

I’ll save the full explanation of why I’m doing in this spreadsheet and how I get the data for a later article, for now I have more pressing articles & videos that need to be churned.

Good Bye Button!

Yep, after that, the button is off, I’ll swap it with a png or gif image that links directly to the facebook page (which is here by the way).

Or Maybe…

I’m just feeling guilty for including 32Kb for the JQuery file to make the scrolling banner on the homepage and are looking for stuff to trim to warrant its inclusion, lol!

My Goal

Currently this site runs on about 75 item requests for the homepage, my target for the next few days is to get this to 50. This should take a cool 50 extra requests off the site (as one request to the server and one to send it back again) and I have the mental goal of getting in under the 4second mark consistently.

Why Am I So Crazy for Shaving KB and Milliseconds?

The facts speak for themselves, here is a quote from Peer1.com (full article here)

According to the findings of the surveys conducted by Lightner, Bose and Salvendy (1996) and the GVU (Graphic, Visualization and Usability) Centre at Georgia Institute of Technology (GVU, 1998), long download times have always been a major problem experienced by Web users. The survey by Pitkow and Kehoe (1996) also indicates that the most widely cited problem with using the world wide web was that it took too long to download web pages (i.e. 69% of respondents cited this problem).
For e-commerce sites, web loading times are even more crucial than other sites. It has been found that a delay of microseconds can potentially cause a significant loss of revenue. Tests at Amazon revealed similar results: every 100 ms increase in load time of Amazon.com decreased sales by 1% (Kohavi and Longbotham 2007). Google discovered that a change in a 10-result page loading in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006).

Then take a watch of this interview “Why CIOs need to care about web speed” which I tweeted this morning.

Final Thoughts

Speed Limit InfinityHow can I even dare suggest to a client that they need to clear and optimise their website up if mine is not up to scratch?

Dropping 84Kb and a whopping 1.34 seconds to page load time is a massive score in any ones book. Yes, as with everything its a fine balance between functionality, usability, novelty and speed, but sometimes, I drawing the line is needed and I’m drawing it here!

Sign-In With eBay Connect, A Rival for Facebook Connect?

It only just occurred to me while reading the comment in the article ‘How to Make Your Shopping Cart Suck Less‘ that I really do not want another web account with another company, literally it has to be the quote of the year:

“I need more website accounts like I need an asshole on my forehead”

Facebook have Facebook connect, that enables buyers to join with popular websites, twitter has a similar service called ‘Sign in with Twitter‘ and I’m sure there are others that I’m neglecting to mention (comments section at the bottom please!).

Such services are super neat for me, I am all over the web every day, as I am guessing you are, who really needs that extra account anyway and I’ll normally connect using my Facebook or Twitter accounts in preference of filling another web form.

There are extensions for Magento to do this and almost all major shopping cart systems, damn, I need to get this for this WordPress site too. Its on my list!

facebook-connect

An Example of Facebook Connect in action

eBay Connect?

ebay-connect-buttons

Graphical Representations of what eBay Connect buttons could look like

Even in 2008, eBay was boasting over 14 million active users, imagine the raw potential here for such a service, its fair to say that most people have a email address, a Facebook account, possibly a twitter account and definitely an eBay account.

So link them up, imaging being able to pay for your goods, one sign in, eBay already has your details, yes a confirmation for the password for PayPal, but how slick would that be?

Your Feedback

Have I stumbled upon a golden idea or a flop because its fatally flawed for XYZ reasons? What do you think? Would you use it if it existed?