The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
UKBL ~ Google friends Connect Details »» | ||||||||||||||||||||||||||||||||||||||
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 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/...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 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>-----------------------------------------------------------------------> Code:
<!--<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 Code:
<div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div> </if> </td> Then save, and thats it Members will be able to sign up, Using their Google, Aim and Yahoo id's and then the login box will turn like this... where members can then sort out their friends and send invites etc.. Enjoy UPDATE: For those of you That would prefer the Social Bar that goes accross the top of your screen, then here are the instructions 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" Quote:
3. Option 2 creates the HTML code that we'll need to ad to our site it looks something like this... Code:
<!-- 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> 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 As always Please Click installed if you use Download Now
Screenshots
Show Your Support
|
Comments |
#12
|
|||
|
|||
Quote:
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 |
#13
|
|||
|
|||
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?
Quote:
|
#14
|
|||
|
|||
like do i need to open any certain files in my root directory...please explain in not so computer savvy terms...lol
|
#15
|
|||
|
|||
Quote:
Perhaps you need to refresh your screen, Press Ctrl + F5 at the same time, that refreshes the page direct from the server |
#16
|
|||
|
|||
wait i see it but its only there if i use firefox...how do i get it to show up on IE too.
|
#17
|
|||
|
|||
and once we are signed into our MHO accounts we cant see the box
|
#18
|
|||
|
|||
Quote:
Code:
<if condition="!is_member_of($bbuserinfo, X, Y, Z)"> |
#19
|
|||
|
|||
<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? |
#20
|
|||
|
|||
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! |
#21
|
|||
|
|||
No worries Glad to help
|
Thread Tools | |
|
|
X vBulletin 3.8.12 by vBS Debug Information | |
---|---|
|
|
More Information | |
Template Usage:
Phrase Groups Available:
|
Included Files:
Hooks Called:
|