Category Archives: Sharing Is Caring

Sharing Is Caring

mailto, Facebook, and all the other social networking shares

Did you know that you can use " in a mailto:?subject=, but not %22?* Well, now you do. That was an annoying little problem, although to be fair, not nearly as annoying as trying to figure out why I could make Facebook share the new pages, but no one else could. Thank the gods for stackoverflow, that’s where I find most of the answers to my many coding issues. In this case, it’s how I learned about the “Do you want to make this app and all its live features available to the general public?” button. Thanks for not including that in your Share tutorials, Facebook!

I have learned a heck of a lot–over more time than I thought it would take–about customizing share buttons for social networks. I’d like to thank Pinterest for being by far the easiest of them all, and I curse Google+ for being a thorn in all my sides (‘though Facebook was no picnic either). Despite my best efforts to control the information using schema.org and itemprops, Google+ still insists on pulling its share info from just the og:title tag, which is not nearly enough information for one tag. I hate you, Google+. Just want you to know that.

Soon I’ll be able to post a link to this project that has ruled my life for the past two months. I’m hoping it’ll be today, for Veterans Day. It would be especially fitting for a project called “World War I: War of Images, Images of War.”

[ *Edited to add: And it turns out %22 wasn’t the problem at all–apparently the combination of two quotes and a colon is what was flipping out the email share. Couldn’t find a combination that would work, so I had to nix the quotes in favor of the colon. So stupid. ]

Sharing Is Caring

Twitter Cards

As you may or may not have seen in the Twitter feed on the homepage, I’ve been having a devil of a time figuring out Twitter Cards, which are awesome and head-bang-y all at the same time. Adding a headline and image to a tweet that DOESN’T count towards the 140 character limit is pretty awesome, but figuring out why the description wasn’t also showing up was, well, troublesome.

Fortunately, thanks to this lovely website, I now know there’s a card type called “summary_large_image”, which fixed my problem lickety-split! Funny how none of the other websites I’d been researching on had thought to mention it. Hmph.

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.