The importance of updating your social buttons

In an attempt to stay ahead of the curve it is imperative to read industry blogs and white papers, everyone knows this. But as a Social Media Strategist, I am more often than not logged in to a brand account on Facebook.

These two points seem to be mutually exclusive and bare no obvious link, but when you read as many blog posts a day as I do, you start to realise the frustration of being logged into a Facebook brand page.

Below is a screen shot of a certain blog, the left is when I am logged into a brand page account and the right is when I am logged into my personal account:

Obviously it's not too hard for me to open Facebook in another tab and switch to my personal account or even switch to my account via the 'switch' button on the blog, but it is a hindrance when viewing the content. Anybody who runs a professional blog should recognise this problem and realise that regardless of the content quality, it robs the blog of authority.

To help bloggers out, we decided to do some tests to isolate the problem.

Looking further into the issue, it became apparent that it was limited to the older deprecated Share widget which causes the iframe to inherit dimensions of 1000x1000px, thus obscuring a large portion of the page from view.

Through our powers of deduction, the only reason we could see for this happening with the Share button only, is that Facebook Brand Pages hadn't been fully rolled out when the Share button was still supported. This is what seems to be causing a bug that stops the iframe from inheriting the correct dimensions for the widget when logged in as a Page.

We decided to do a test to confirm our theory;

We made two test web pages, both were identical and included a paragraph of dummy text. The first page (share.html) uses the old unsupported Share iframe widget that Facebook used to offer:

http://www.branded3.com/facebook-share-bug/share.html

The second page (like.html) uses Facebook's current supported Like iframe widget.

http://www.branded3.com/facebook-share-bug/like.html

So the ideal way to stop your Facebook widget from obscuring your blog's copy is to update your Share button to a Like button and it should fix itself.

To make double sure this doesn't happen though (or if you desperately don't want to lose the Share button) wrap the iframe in a <div> using the below code.

For the small horizontal one:

<div style="width:100px;height:21px;overflow:hidden;">

[iframe code from Facebook]

</div>

For the large square one:

<div style="width:60px;height:90px;overflow:hidden">

[iframe code from Facebook]

</div>

Example:  http://www.branded3.com/facebook-share-bug/share-fixed.html

If you are having any problems with your social widgets or want to learn more about the importance of social media for your blog or e-commerce site, don't hesitate to get in touch.

BY Georgia Halston AT 12:13pm ON Monday, 17 December 2012

Georgia is a Content Writer and Social Media Specialist here at Branded3. She studied Media Culture and Society at university and is actively involved in the arts and cultural side of Leeds as a city. Follow @georgiahalston on Twitter