Posts Tagged ‘Facebook’

Embedding Facebook Share Into Your Site

Facebook_logoWe’ve got this project going on where users can create their own artwork which is saved to the server as an image, and we want them to be able to post it into Facebook.  At first I thought it was going to take some effort and have to use the Facebook Connect API.  But I was hoping for something easier, kind of how easy it is on Twitter to just tag a status GET string onto the URL.  Then I remembered Facebook recently released something that does exactly this.  It’s all very simple and pretty cool really, check it out here.

I’m doing something simple so I didn’t really need the share count.  So I threw together a super simple JavaScript implementation:

function fbshare(url,title){
  window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(url)+'&t='+encodeURIComponent(title),'FacebookShare','toolbar=0,status=0,width=626,height=436');
}


 Test it out by clicking here

As you can see there’s nothing to it. It’s nice because it sends the user directly to Facebook, and if they are already logged-in then they are instantly presented with the familiar form.

Something to note is that if you are posting a web page then the title will likely be overridden and pulled directly from the page title (just as the page description and thumbnail images). But if you are posting an image or another URL then the title will definitely come in handy.

Wednesday, November 18th, 2009

Tags: Facebook, Javascript | No Comments »

Pop Your Facebook Profile Picture

facebookI came across a cool article the other day which had some examples on how to go a little crazy with your Facebook profile picture, so I can’t take full credit for this. In fact I might not be able to take any credit at all, I just got done reading the article when my good friend (and awesome photographer) Doug was walking by, he had his full set of equipment with him that day and the next thing I knew I was hanging from the drywall down the hall with a flash on either side of me, I’m just glad I opted to wear underwear that day! He did his Photoshop thing and placed the photo over a Facebook profile background template, and added what I can only assume if what he perceives Twitter to think of me, he even added a splat of bird crap to my lid – nice! I uploaded it to my Facebook profile and I think it turned out great. The deal is basically that Facebook allows your profile picture to be up to 200 x 600 pixels and if you overlay it onto the background before uploading then you can make it seemingly interact with or come out of the page.

A few of things to keep in mind:

  1. The position of the photo is dependent on how many lines your status message occupies. The image isn’t pushed down with the rest of the page content, so the more lines your status occupies the more of the upper gray needs to be added to the image. The majority of my status messages seem to take up two lines, so I have my image defaulted to that, and I also have a one line version uploaded to my profile pic album and could switch to that if I really wanted to.
  2. The position of the photo is dependent on the text size of your status message, which is a similar issue to above, but actually a much bigger problem. This is to do with how the browser chooses to render that font, so it is a platform and browser problem. We have already noticed differences from Mac to Windows to Safari – each one was a pixel off even though we used Firefox to test on all three platforms. I currently have mine set to look good in Windows which covers the majority of web users, but of course the people that really care about pixel perfect positioning are all on Macs. We thought about getting creative to try and work around this and have the wall appear to tear, this might work out fairly nicely on a picture like mine where I’m hanging so it makes sense, but wouldn’t work for all cases.
  3. The image doesn’t always appear over the exact background it’s been created to appear over. For example if you look at my public Facebook profile (make sure you are not logged in) it’s pushed way down, or if you look at my profile in the Facebook iPhone app it’s a similar deal. It’s not necessarily bad but something to keep in mind.
  4. If you go with a long profile picture as I have then it will push down the content within the left column.
  5. The thumbnail that accompanies your Facebook feed items is only 50 x 50 pixels so if you have a long picture it won’t all fit. I found that Facebook has quite a nice thumbnail feature that allows you to pick an area of a smaller version of your profile picture so you’ll probably find it works out quite well.

I conclude that it’s all a bit gimmicky now, at least for a personal profile page, it might work well for a fan page that doesn’t have to worry about a status message and the page looks the same whether you are logged in or not. If Facebook were to allow PNGs with transparency to be uploaded then it would solve the issue of not having to worry about where the background meets. But there would still be the issue of positioning, for example in my picture my hands hanging from the exact position of the background seem still wouldn’t be controlled. Facebook would need to allow for liquid positioning of the image – just as the rest of the page moves with the text then so should the image. And I don’t see any reason why they couldn’t allow for us to use a different image for the thumbnail than the one used for the profile picture. None of this is hard to do from a coding perspective, but I imagine Facebook is a lot more concerned with their branding, trying to stay away from the horrors of MySpace. One of the things I’ve always loved about Facebook over MySpace is exactly that – the clean organized look and feel, but c’mon Facebook give us the chance to somehow add just a little personality to our profile page!
facebook

Thursday, October 22nd, 2009

Tags: Branding, Facebook, Social Media, Web Design | 2 Comments »

Twitter v. Facebook – A Social Media Deathmatch

The Facebook vs Twitter Deathmatch Artwork by Jess3A long time ago I wrote a post that I’ve been meaning to counter for some time now but I just hadn’t known how to tackle it.  But the other day I was having a conversation with a friend of mine who doesn’t use Twitter, and like just about everyone that doesn’t tweet he also thinks it’s kinda shit.  He was saying stuff like “isn’t Twitter just the status message of Facebook?” (my second ever tweet!) and I was like “holy crap, I’m having a conversation with myself 8 months ago”, I was talking to the me that wrote that blog post.  See I’ve come a long way since I started tweeting, a really long way, and I’d forgotten what the me like then was like, the thoughts that went through my head, so talking to him gave me the insight I needed to get this post written.

Twitter versus Facebook Status Message

This is important to explore, people need to understand this difference.  Facebook is a social network whereas Twitter is a micro-blog.  In a social network you interact with your pre-selected friends, in a blog you expose yourself to the entire world.  I can’t explain it any more simpler than that.  He ended up understanding Facebook as having your friends over for dinner whereas Twitter is like hanging out at a rave.  I’d say that was pretty accurate regarding the dinner – it’s a closed occasion by invite only (and family members you don’t even like might come by and join in and there’s little you can do about it!), and spot on for the rave analogy and you can see a sideshow below to mirror this.

Still don’t understand why Twitter is different than Facebook Status

But he still didn’t get it.  The thing is I happened to know from being friends with him on Facebook that he barely ever updates his status.  And he doesn’t blog either.  So if you don’t have a desire to talk to the masses then how can you get it?  But look, Twitter isn’t just about micro-blogging, it’s also about micro-following…

Follow me, me no follow you

This I love about Twitter.  See in Facebook if someone wants to be friends with you then you have to be friends back in order to be connected.  And what ends up happening?  Noise noise noise.  You end up being friends with a shitload of people you don’t care to know about and they drown out everything that the people you are interested with hearing from are doing.  But with Twitter someone can follow you and you don’t have to follow them back.  This is super powerful.

Real-time Search

Even people that use Twitter don’t understand how powerful it is (so how can those who don’t stand a chance?).  Twitter is pure information.  Wow I love that so much I’ll say it again.  Twitter is pure information.  It’s what’s happening right now, and it’s searchable instantly in real-time.  Forget TV news, news websites, newspapers, everything that happens these days is reported first on Twitter, instantly and unbiased (there’s very little room for bias in 140 characters, and there’s enough ‘reporters’ to allow to read between the lines of any bias that does come through), when the attacks in Mumbai happened we knew about it first via Twitter, we heard first on Twitter about the intimidation going on during the Afghanistan elections, and when Michael Jackson died no matter where you were or what you were doing, if you had a mobile device and you were on Twitter you knew about it that instant.  I even remember during the big webcast for the iPhone OS 3.0 update we all went for lunch and used Twitter for news on the new features.

Hash Tag #help

This is pretty amazing. Twitter has many hidden gems most of which I won’t go into in this article, but something worth a mention is hash tags, and more specifically using them to help you solve a problem. If you are new to the iPhone and are wondering how to save a missed call to your contact list then tweet, or you want to know how to make rounded corners using CCS3. In both cases you would tweet your question with the #help tag, and add #iphone or #css respectively. The web is full of knowledgeable people that like nothing more than to let the world know this by answering your questions.

140 character limit is power

I hear this a lot from non Twitter users and those new to Twitter, wondering when the 140 character limit will be lifted, that’s when they’ll get into Twitter. I know where they’re coming from, I thought the same during my early days of Twitter, it’s seen as a hindrance by outsiders. But those who adopt also adapt and begin to realize how powerful it is. I already said how Twitter is pure information and that’s largely due to this fact, there’s no room to give your opinion when you’re reporting a fact, not space for chitchat when you’re relaying a message, and no squeezing gray between the black and white. When you get used to it you begin to realize how powerful the 140 character limit is, you appreciate how much you can say in 140 characters, and in return how much information you can learn from a handful of tweets.

Conclusion

Twitter is immensely powerful and equally as useful. Most of Twitters power actually lies in its API and the third party apps and services that are built around it, this is something I haven’t really touched on in this article as I looked just to explore the similarities it has with the Facebook status. It isn’t better or worse than Facebook, it’s a very different product built to accomplish a different goal, to fill a very different void. In fact a quote I’ve read before, and I apologize I don’t know who first said it so I choose to credit it to no one, sums it up nicely:

Facebook is for people I went to school with, LinkedIn is for people I’ve worked with, and Twitter is for people I want to know

The point is there’s a place and a need for both Twitter and Facebook.

And finally, below is a very nice deck put together by Iain Taite from Poke which sums up the Twitter party theory:

Monday, September 14th, 2009

Tags: Facebook, Social Media, Twitter | 3 Comments »