PDA

View Full Version : Miscellaneous Hacks - UKBL ~ Google friends Connect


UKBusinessLive
27 May 2009, 23:53
https://www.vbulletin.org/forum/external/2009/05/3.gif

UKBL ~ Google friends Connect

A simple and effective way to let your members sign up to their google friends from your forum

Lets start...

This will add a small Google friends connect box next to your username in the navbar, This is just one of many possabilities for using this new Google friends Connect

https://www.vbulletin.org/forum/external/2009/05/12.png

Ok so first we need to set up a Google friends connect account at google so go to this link here and sign up

http://www.google.com/friendconnect/admin/site/start?hl=en_US

1. Click on "Friends Connect for websites"

2. Add your site name and Url

3. Download and save to your server the two files which are then shown, these are
rpc_relay.html and canvas.html

You need to save them onto your root directory, if you see the instructions it will show you where ;)

Don't worry if you've made a mistake, google will soon tell you :up:

4. Once you've done that you need to click on the members gadgets on the left hand side menu, Click on "Sign in Gadget"

5. Then "Create HTML Code"

and thats the first part done.

Now to add it to the Navbar ;)

In Notepad or a text editor of your choice add the following code

<!--<UKBL Google Friends Start>----------------------------------------------------------------------->

<td class="alt2">

<DIV ALIGN=RIGHT>
<if condition="!is_member_of($bbuserinfo, X, Y, Z)">



******** Add your Downloaded google friends Script here - Don't forget to change the X,Y,Z of the condition above to allow whatever usergroup you want this visable too, Just add the usergroup id number and space with a comma ********


</DIV>
</td>
</if>
<!--<UKBL Google friends End>----------------------------------------------------------------------->

you should have something along the lines of this

<!--<UKBL Google Friends Start>----------------------------------------------------------------------->

<td class="alt2">

<DIV ALIGN=RIGHT>
<if condition="!is_member_of($bbuserinfo, 1, 2, 3)">
<td class="alt2">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-6496169506965828886" style="width:250px;border:0px solid #ffffff;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ffffff';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['ALIGNMENT'] = 'right';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderSignInGadget(
{ id: 'div-6496169506965828886',
site: '02417642747277593193' },
skin);
</script>
</DIV>
</td>
</if>
<!--<UKBL Google friends End>----------------------------------------------------------------------->


Now save this in Notepad, because we now need to upload this onto our Navbar template

Go to edit the following template in your admin CP

AdminCP > Styles & Templates> Style Manager> Your Chosen Style> All style options> Edit templates> Navigation / Breadcrumb Templates> navbar

In template NAVBAR find

<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions</strong></div>
</if>
</td>

and directly below it add your saved code.

Then save, and thats it

Members will be able to sign up, Using their Google, Aim and Yahoo id's

http://i475.photobucket.com/albums/rr114/ukbusinesslive/signin2.png

and then the login box will turn like this...

https://www.vbulletin.org/forum/external/2009/05/13.png

where members can then sort out their friends and send invites etc..

https://www.vbulletin.org/forum/external/2009/05/11.png

Enjoy

[B]UPDATE:

For those of you That would prefer the Social Bar that goes accross the top of your screen, then here are the instructions :D

https://www.vbulletin.org/forum/external/2009/05/14.png

LIVE DEMO : http://www.ossamples.com/freestyle/

1. Sign up to Google friends as described above and the from the menu on the left choose "Social Bar"

[I]Add a social bar to your site

Put a social bar at the top of your site's pages to give your visitors easy access to Friend Connect's social features.

Enable your visitors to easily join and discover each other
Let visitors read and post comments together
Activities taking place in social gadgets throughout your site bubble to the top
No need to redesign your pages

2. Fill in the Options 1 on that page, thats easy enough.

3. Option 2 creates the HTML code that we'll need to ad to our site it looks something like this...

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-6077485798636155185"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['POSITION'] = 'top';
skin['DEFAULT_COMMENT_TEXT'] = '- add your comment here -';
skin['HEADER_TEXT'] = 'Comments';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderSocialBar(
{ id: 'div-6077485798636155185',
site: '02417642747277593193',
'view-params':{"scope":"SITE","features":"video,comment","showWall":"true"}
},
skin);
</script>

So now we need to ad the code to our site, and its so easy, First we go to our adminCP and Styles & Templates > Style Manager > Your Style >

and at the top of your header template add the code, then save.

Thats it, You should see your sites new google social bar at the top of your forum :D

https://www.vbulletin.org/forum/external/2009/05/15.png


As always Please Click installed if you use

UKBusinessLive
27 May 2009, 23:54
:p Reserved ;)

Brandon Sheley
28 May 2009, 00:01
great mod!
i just wish I had friends through google :(
now a twitter one and I would be rockin! :D

UKBusinessLive
28 May 2009, 00:12
great mod!
i just wish I had friends through google :(
now a twitter one and I would be rockin! :D

Thanks Loco, I think i'll save that for a rainy day :D

Mum
28 May 2009, 01:44
So does this actually allow someone to log in to the site, and be validated using this sign in box, or does it simply add another log in box for them to also sign into.

IE once they log in using this box, can they post etc, or do they still need to log into the forum?

If they log in, what can they then do? Are they able to use the chatting box that google friends connect supply?

UKBusinessLive
28 May 2009, 04:55
So does this actually allow someone to log in to the site, and be validated using this sign in box, or does it simply add another log in box for them to also sign into.

IE once they log in using this box, can they post etc, or do they still need to log into the forum?

If they log in, what can they then do? Are they able to use the chatting box that google friends connect supply?

have a read here http://www.google.com/friendconnect/home/gadgets?hl=en_US

Ideally its best if they do login to your forum to access this as this is a service to members as opposed to non members. You can change the usergroups which have permission to see this by changing the conditional in the code. if they log onto the forum, they will need to log into this as well to be able to use it, but a cookie will ensure that they are logged in until they chose to exit it.

best thing to do is to try it and see, This is a new experiance for me too!!! ;)

https://www.vbulletin.org/forum/external/2009/05/11.png

You will be able to connect to Orkut, Plaxo, Twitter, Netlog to name a few

For a full Help page see here http://www.google.com/support/friendconnect/

I've also added it to my forum http://www.ukbusinesslive.co.uk/forum and taken the conditional out so that everyone will be able to view, just so that you'll be able to see it working ;)

Mum
28 May 2009, 05:32
Thanks, will check it out now!

Mum
28 May 2009, 05:36
See here http://www.google.com/friendconnect/home/gadgets?hl=en_US the one i wanted was the social bar - is there any way to make this show like this?

mamashid
28 May 2009, 14:08
okay! i did something wrong I dont see it on my navbar.....where is it that i upload on ftp??? I'm kinda new to all of this...

UKBusinessLive
28 May 2009, 16:39
See here http://www.google.com/friendconnect/home/gadgets?hl=en_US the one i wanted was the social bar - is there any way to make this show like this?


Ok i'll add it to the above explanation :D

All done now Mum, The instructions for the social bar is now added as an update to the mod :up:

Enjoy

Gerry :D

UKBusinessLive
28 May 2009, 17:02
okay! i did something wrong I dont see it on my navbar.....where is it that i upload on ftp??? I'm kinda new to all of this...

You need to upload the two html files which you've saved doing the google sign up, to your Root directory.

You then need to add the HTML code which was generated for you, to your navbar template in your admincp, see below

AdminCP > Styles & Templates> Style Manager> Your Chosen Style> All style options> Edit templates> Navigation / Breadcrumb Templates> navbar

Then save, it should work then, let me know how you got on :D

mamashid
28 May 2009, 17:18
okay thanks for replying. I opened up my ftp and then have the server up, from there do I juse upload it, or do I need to open any other files??? Not sure if this is where I am confused or not, as its just not showing up on the board....I did the edit template but got nothing....is it okay if i paste the code here so you can see if its right?

You need to upload the two html files which you've saved doing the google sign up, to your Root directory.

You then need to add the HTML code which was generated for you, to your navbar template in your admincp, see below

AdminCP > Styles & Templates> Style Manager> Your Chosen Style> All style options> Edit templates> Navigation / Breadcrumb Templates> navbar

Then save, it should work then, let me know how you got on :D

mamashid
28 May 2009, 17:22
like do i need to open any certain files in my root directory...please explain in not so computer savvy terms...lol

UKBusinessLive
28 May 2009, 17:24
okay thanks for replying. I opened up my ftp and then have the server up, from there do I juse upload it, or do I need to open any other files??? Not sure if this is where I am confused or not, as its just not showing up on the board....I did the edit template but got nothing....is it okay if i paste the code here so you can see if its right?

I can see it
https://www.vbulletin.org/forum/external/2009/05/10.png

Perhaps you need to refresh your screen, Press Ctrl + F5 at the same time, that refreshes the page direct from the server

:D

mamashid
28 May 2009, 17:25
wait i see it but its only there if i use firefox...how do i get it to show up on IE too.

mamashid
28 May 2009, 17:31
and once we are signed into our MHO accounts we cant see the box

UKBusinessLive
28 May 2009, 17:39
and once we are signed into our MHO accounts we cant see the box

have you set the Usergroup conditionals right you need to change the ones i add to your usergroups, then only signed up members will be able to view :)

<if condition="!is_member_of($bbuserinfo, X, Y, Z)">

Change the X, Y, Z for the usergroups that you want this to show for

mamashid
28 May 2009, 17:43
<if condition="!is_member_of($bbuserinfo, 6, 7, 5, 11, 12, 13, 14, 15, 16)">

those are the members I want to see it right? thats what i place there?

mamashid
28 May 2009, 17:44
figured it out...i have to place the people I dont want to see it there not the other way around....duh! :)

thank you for your help!

UKBusinessLive
28 May 2009, 18:18
figured it out...i have to place the people I dont want to see it there not the other way around....duh! :)

thank you for your help!

No worries Glad to help :D

Mum
28 May 2009, 21:12
Thanks so much :)

UKBusinessLive
29 May 2009, 00:03
Thanks so much :)

OK Mum, Thats what Dads are for :D:D

Mum
29 May 2009, 01:01
LOL Well said :P

marshal_ramdev
30 May 2009, 11:34
thanks

Narkissos
31 May 2009, 04:49
Very interesting Mod... I think I'm going to give it a try!

Brandon Sheley
31 May 2009, 06:27
Thanks Loco, I think i'll save that for a rainy day :D

/me hopes it rains soon :D

UKBusinessLive
31 May 2009, 12:29
* Loco.M hopes it rains soon :D

No rain yet buddy :D

But not sure if this is what you meant but you can add twitter to this also

https://www.vbulletin.org/forum/external/2009/05/4.png

Click on the picture to see it clearly

From your profile page you can connect with friends on other social network sites, and twitter is on there ;)

let me know if thats what you mean :rolleyes:

pipedreams
02 Jun 2009, 14:51
Any plans to integrate Google Friend Connect directly with the vbulletin login system in the same fashion as the Facebook connect plugin?

Xencored
02 Jun 2009, 17:24
Works Great Cheers installed!

http://www.myanimeisland.com/index.php

jaredwilli
03 Jun 2009, 16:08
this looks interesting

UKBusinessLive
03 Jun 2009, 17:33
Any plans to integrate Google Friend Connect directly with the vbulletin login system in the same fashion as the Facebook connect plugin?

Might play with the API key wheni get a bit of time ;)

Mum
04 Jun 2009, 01:30
I would love that feature too :)

l3it3r
05 Jun 2009, 10:54
I'm reading through the API and I will be installing a copy of phpBB to see how that was implented. I'm very interested in getting Friend Connect installed for vBulletin FOR LOGIN. I have it up and running on www.militaryperformance.com (Site was hacked a few months back - had to start from SCRATCH :( ) and it's cool, but terribly useful just yet. Integration with the login would be KEY.

UKBusinessLive
06 Jun 2009, 15:34
wait i see it but its only there if i use firefox...how do i get it to show up on IE too.

I did mine on IE 8 :eek:

l3it3r
08 Jun 2009, 11:53
I had to remove it because it was causing 'back button' issues. I had to click back three times!!

rejoys
24 Jun 2009, 15:15
Any plans to integrate Google Friend Connect directly with the vbulletin login system in the same fashion as the Facebook connect plugin?

That would be a killer app:cool:

phpbb amends the user name to fc-user and we have to click login again

Mum
25 Jun 2009, 08:08
Mmmm i'd love that app too :)

Mum
08 May 2010, 22:22
Any update to this to integrate with logging in?

marshal_ramdev
15 May 2010, 19:30
saved , downloaded , will install it later . anyways thanks

al2thero
02 Dec 2012, 01:11
Great. Thank you.