By 2 years ago in Socialised

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:

Screenshot of blog


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

First page

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

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

Second page

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 at 12:13PM on Monday, 17 Dec 2012

comments

Leave a Reply