A social bar for your site

Wednesday, February 11, 2009 | 1:40 PM

Labels: ,

While it's easy to add social features to your site with Google Friend Connect, you may have been wondering where to put all of the great gadgets. You need your users to sign in, to interact with your site, and to find those like-minded strangers... but pixels are precious, and you're not sure how to make more space alongside the wonderful content that brought people to your site in the first place.


The Friend Connect Team is here to help. We're happy to announce a new feature: the social bar. The social bar concentrates many of the basic social functions into a small strip at the top or bottom of your webpage. You can use it to complement your existing gadgets and put it on as many or as few of your webpages as you want.

With the social bar, your visitors will be able to see crucial info at a glance and engage with social features through convenient drop-down gadgets.

  • On the far left, visitors can join your site, see their identity, and edit their profiles and settings.
  • Your visitors can also delve into your site's activity stream to see what's happening throughout your site. It includes links to recent posts made anywhere on your site, helping other visitors quickly find where the hottest conversations are taking place.
  • The wall gadget can host a discussion for the whole site, a section of pages, or each individual page, letting your visitors easily read and leave comments.
  • Lastly, visitors can see the other members of your site, check out their profiles to see how like-minded they really are, and even become friends.

Watch the video below to learn how to add a social bar to your site.


You can also see the social bar in action on this example site that Mussie Shore created.

We hope your visitors (and your pixels) like the new social bar and will put it to good use.

56 comments:

Marek Prokop said...

The Social Bar has the same bug as the previous gadgets had -- every interaction (i.e. click) generates a new item in a browser's history, so moving back using the browser's Back button becomes almost impossible soon.

I've been using Google Chrome, if it is important, but I think it works the same in all browsers.

Farhan said...

Does this friend connect bar work within Blogspot? How do you install it there?

kunshou.net said...

不错

yourstruly said...

I have no problems with it.
Yes you can use it on Blogger.
I hope it doesn't crash IE like the sign in gadget did, otherwise I can't use it on my main site.

Sheldon said...

Hopefully it continues to work in blogger.

Darjan Sergiu said...

When we will be able to use Google Friend Connect on Google Sites?

ghowell said...

nice very cool, no problems

whyyi.com

whyyi.com

whyyi.com

clint said...

awesome Times People!!!

Mohammed anuz said...

ya how do you use it in blogger

Mohammed anuz said...

Got it , You can install it like any other gadgets .

wiian said...

just checking if comments to posts show up in the social widget. i suppose no.

Monty said...

Tried it with Wordpress and failed. My theme crashed when I copy the code into the html.

Did you put it in the head or body of your page?

Jonathan E. Seely said...

Great feature... can't wait to install it on my sites.

Mendel said...

Thanks everyone for the feedback.

@Marek Prokop, thanks for pointing this out. We'll work on fixing this.

@Darjan Sergiu, Google Friend Connect doesn't work on Google Sites right now, but we're looking into it.

@Monty, the code for the social bar should go in the body of your HTML.

And yes, you can use Friend Connect on Blogger, but we're also working to better integrate the two products, so stay tuned.

catalin bocanu said...

Related Article: Google Friend Connect Social Bar

Chris Lang said...

In my testing I have no problems with the back button. Plus IE problems seem to have been solved.

The widget works great for me in Firefox and Opera and it worked well today even in IE6.

I pulled the sidebar widgets today in favor of the social bar.

I added it to my blogger blog, you can get there thru my profile links.

Laibeus Lord said...

It works with Blogger/Blogspot, you can check a live example here: http://Laibcoms.com/

It also works well with b2evolution blog platform, check out http://gameshogun.ws/

Here are the differences of the Top and Bottom:
Top - the social-bar is part of your site, when you scroll, it goes up with the rest of your site.
Bottom - the social-bar is on top of your site, when you scroll, the social-bar stays with you.

When installing, either Top or Bottom, be sure to have an adjustment of 35px, because the Social-Bar will not push your content up or down automatically, to give way for itself.

Hope that helps. ^_^

Brian Campbell said...

I'm excited about the new feature. I'm putting it on my blog later today. Feel free to add me as a friend and come see how I'm using google friend connect on my blog. I'm also keeping up with how to use google friend connect to expand your global social reach on my blog as well.

Brian Campbell said...

I just added the bar to the bottom of my blog. If you want to see an early adopter example, feel free to come check it out. Also, I'd like to make sure it's displaying properly. Here's the url: http://thesocialmediasource.com

Name: Dora E. H. Crow said...

Where's the best place to ask a technical question?

My blog's website name actually is pointing to its "hosted name".. I'm thinking that the rpc_relay.html and the canvas.html files need to be uploaded using my "server host name" rather than to the name I use to point to it?

Saravanan said...

I tried out after reading from a Mashable post. Sounds cool! Just not too sure it is displaying properly in my blog! I already have a Google Friend connect widget in my Blog. Is adding this social bar is a repetition?

bistick said...

Fantastica feature...

Salt Lake Eats | said...

LOVE the social bar -- I had abandoned Google Friend Connect because of the bulkiness, but now I'm all over it! Installed on http://www.saltlakeeats.com -- I am wondering though if it is possible to configure the bar so that the latest comment will appear across the bar rather than having to click and open the comment pane?

Salt Lake Eats | said...

Follow up to my previous comment -- ask and ye shall receive? It looks like there is some sort of "activity" feature that pulls from both the comment and members gadgets to populate the middle portion of the social bar...so now my most recent comment is showing just as I had hoped it would!

K said...

Cool site guys. Let me plug my own site http://googlesocial.blogspot.com. You can find more tips there, hope you guys can check it out!

Mendel said...

@Dora E. H. Crow, for technical questions, you can check out the Friend Connect help center: http://www.google.com/support/friendconnect/
or the discussion group:
http://groups.google.com/group/google-friend-connect-discussion-group

@Saravanan, it's really up to you to decide if you want to use the social bar to compliment the other gadgets or use it alone. For the Social Web Blog, we've decided to use it in conjunction with other gadgets in the sidebar.

Name: Dora E. H. Crow said...

@Mendel

Thanks for links for technical questions!

Dora

Kh.Mohsin said...

The idea is great but the Bar needs improvements from some perpectives, first it is a bit slow when laoding the informatin about site activity.
Second is it possible to display this bar along the sides despite top and bottom positions.

Saravanan said...

@Mendel: Thanks for the suggestion. I think I will stick with the social bar and remove the badge!

bliplink said...

http://groups.google.com/group/googlefriendconnect

Alain-Christian said...

It's pretty but what does it DO? what functionality is gained?

狼王德鲁伊 said...

很有创新性,也易于在sns市场的用户竞争。

Katty said...

Why don't you merge this friendconnect social bar into blogger followers? Now I have already two feeds announced on my blog (the first one =original feed that I can't edit/delete, I mean, the chicklet; the second one =chicklet feedburner provided to me), and the followers gadget. If I want to put more bars on my blog, it would be more inaccessible than it is now. I also have two searchboxes on my blog, the "search for blogs" in the header, and the "search in this blog". Please, merge friendconnect with followers and orcut, until then, I'll put the social bar on my blog. Thanks in advance!

Rodrigo Mithuhiro Oshiro said...

are there more custom gadgets we can use? which ones do you recommend?

Phibu Reza said...

Blog walking..

feel free to visit my blog too^^


Pulsa Murah

planeador.net said...

can i change colours?

Carlos Martins said...

Any chance you could post a tutorial on how to get the social bar working in Blogger?

When I go to Google.com/friendconnect it asks me to set up a new site, a "real" site or "blogger". When I click blogger, it redirects me to some blogger help page and I can't even get to any javascript code to insert in my blogspot template. :/

Thanks for any help you can provide.

Lisa said...

Here's a second to being able to add to Google Sites :-)

takenphotos said...

Great tool to have followers.

Claude Gelinas said...

I'd like to install it on http://beep.name/ but I can't figure out where to download it... please help!

Many thanks ; )

Mr. Matt said...

I'm also interested in how to enable the social bar on my blogger blog. I've tried the Friend Connect Forums but no one is any help.

One site said to just add my blogger site as a regular site on friend connect and the files were already on blogger but this isn't working either, the rpc_connect file throws an error.

SCOTT'S BLOGS said...

I would love to add this to my blogger too how can you do it ?

9uy said...

The social bat taking too much space.
I'll wait for Google's new development.

Guest said...

nice widget, but I can't use it on blogger. I try to parse html code, but not work properly, Some body help me..

D_Kossman said...

"Can someone join my site and give some comment?"

http://www.dwightkossman.com/index.html

Free Stuffs and Jobs said...

can some body tell is the social Bar have some impact on our traffic or earning. Means if some one uses it as publisher, do we have any sort of benefit of it.

putra 76 said...

That very interesting bar and that so helpful.

polycarpo said...

pequeño tutorial para agregar la barra google friend connect en blogger
-
a little tutorial to add the google friend connect bar at blogger
-
http://polycarpo.blogspot.com/2009/06/how-to-add-google-friend-connect-bar-at.html

Juddium said...

any way we'll be able to pick a color scheme for the bar in the near future? I added the bar to my blogger but it doesn't go well with the scheme I already have

blog said...

Very nice info.. i have one question custom gadgets we can use? which ones do you recommend?

queensoft said...

I have a problem with Google Friend Connect / Blogger Followers.
I have this site: http://queen-soft.blogspot.com
Up until some time ago (a few months) the followers widget was working just fine. I think I was using the exact same version of Opera browser, 9.64.
Now, the widget is empty. I have also tested on Opera 10.00, same thing empty.
I tested on Windows XP and 7, empty on both.
I tested the standard Blogger Followers and the HTML code generated from http://www.google.com/friendconnect - 'Set up the Members gadget' page - same result on both - empty.
Please see attached image: http://www.imagebam.com/image/fa1c4647515559
Works fine in IE and firefox, several versions.
I think it's a problem from Opera, but why is it that yours is displaying OK?
I have looked at the source code from both pages, yours and mine, and it looks identical, except for the site id, of course.

queensoft said...

Sorry, forgot to add to my previous message.
The widget does not display on some other 4-5 sites I have visited.
So far, yours is the only one working in Opera.

EjazAwan said...

gotta error massage wen i Put the bar at the bottom

Prasetyo said...

I have problem to put this bar to my blog.Please help us.My blog is http://freetemauntukhp.blogspot.com

Edward Kingston said...

Will this be able to work with a bbPress site or just a WP site?
Thanks.

Paul Riley said...

Came across this gadget by pure accident, incorporating it into my BlogEngine site was a breeze, and the result looks great.

Why though has this been kept a secret.