Tag Archives: javascript

Sharing Is Caring

Adventures in Facebook share options

So, in researching and learning about the various ways to control the information shared from a web page to Facebook, I have learned that it is best to cover all the bases. In this case, there are two–users who choose the custom share button, and users who don’t trust buttons (like me) and instead copy and paste the url their own damned selves directly into Facebook.

For the first case, I found Tim Ware’s Tutorial: How to Add a Facebook Share Button to your Website Pages so very invaluable. Facebook’s documentation was so circular and contradictary, it was making my head hurt. This tutorial made the whole process of coding your own share button as easy as copy/paste.

The share button will open a lovely popup showing the image of your choice, and a title, description, and if you want, caption for your image, all written specifically for Facebook shares, and it allows the user to add their own intro text for above the shared information that will appear in their feed. The downside is that if the title is too long, it’ll ditch the description so that that title will fit, but hey, knowing about it means you can prevent it.

The second case is for when the page URL is pasted directly into Facebook. If you don’t use the correct metatags, you can’t control what appears on Facebook, and Facebook’s default is to pick the first image on your page (although sometimes it’ll let the user pick a specific image from the page), the html page title, and the first paragraph as the description. Sure, sometimes that’ll work, but when you want to be able to control that information (and really, who doesn’t?), then these best practices from the Facebook documentation will definitely help you.

The awesome thing about this option is that when you have a long title, it truncates it instead of hiding your description. The downside is that the caption is not an option for this method (a real bummer when you’re working with images with massive contracts and licensing restrictions attached to them, but that’s another story).

But, regardless of the downsides, this means you can control the information appearing in Facebook no matter how the user chooses to share your info. (Well, unless they’re copying and pasting content directly from the page–there’s no way to stop that, that I’m aware of.)

Pretty neat.

Mobile

Browser chrome on mobile devices

Today I’ve been trying to solve the problem of the header and footer chrome on mobile browsers. Our project designer came up with a beautiful grid homepage for the small mobile website we’ve been working on, but the chrome definitely detracts from it.

So far I have tried the code here and here. They looked promising, but neither worked as indicated, i.e. the page would move down, but the chrome wouldn’t disappear–at least, not on my 4S.

At the moment I am stuck. Building an amazing fullscreen mobile experience seems to indicate that it’s a bad idea to hijack a user’s browser anyway–API is where it’s at. Unfortunately I don’t think this app provides enough content to make it worth anyone’s while to save it to their desktop. So right now, looks like I’m going back to the designer to give her the bad news.

I’m still looking for a way around it, though. I don’t believe anything is impossible, it’s just not yet known to me.

CSS

Take THAT, z-index! Pyew! Pyew!

Solved a bitch of a coding problem that I’d wasted way too much time on before Christmas. It was a CSS problem where a tooltip box couldn’t transcend its parent div’s z-index, and therefore kept falling behind the neighboring div. I spent a lot of time trying to figure out how to raise the child above the parent, until someone else needed help with an onmouseover, and bam! The answer hit me–elevate the parent.

<div onMouseover="this.style.zIndex = 100" onMouseout="this.style.zIndex = 1">

Ta da! Problem fixed. Woo!