jump to navigation

How I got Google’s FriendConnect to work on my wife’s Weebly site September 25, 2009

Posted by chadaragorn in Uncategorized.
trackback

So I’ve been trying to create a website for my fantastically talented wife. This is what I have so far: SewSimplySweet. I have no experience designing websites so this is my first go around. I think it’s pretty good for no experience, but I may just be biased. So back to the title of this post and getting to my tutorial of how it was accomplished. In my building of SewSimplySweet, I came across a cool social networking tool that I wanted to utilize on the website, Google FriendConnect. I searched high and low to find out how I could put it in. The official word from Weebly was it can’t be done at this time, look for it in a later release. I wasn’t going to settle for that explanation and went about using my A.D.D mind. Yes I do have A.D.D, I’ve dealt with it since I was in 5th grade. Having it is not a bad thing, in fact I think it enables me to think outside the box easier than most people. However it does mean that I ramble and get off topic quite easily, as you may have noticed.

Step One
First thing, have a Weebly created site, obviously right? Next go to the area where you add pages to your site. You are going to create two new pages, they are going to be called rpc_relay and canvas. You will want to save them as hidden pages, you don’t need them to show up in your navigation tabs. Next you will move those pages up to become sub-pages of your home page. I put the relay page first, followed by the canvas page, not sure it makes a difference but… With those pages in the correct spot we are going to do a little multi-tasking.

Step Two
Now open a new tab in your web browser, go to Google FriendConnect. Sign up for the service, choose Friend Connect for standard websites. It will give you two files to upload to your web server. Save those files to your desktop, you may have noticed that they have the same name as the pages you just created.

Step Three
Now using a txt editor, open first the rpc_relay.html file, select all, and copy the contents of that file to the clipboard. Now go to your other browser tab, the weebly site creation one. While in the pages section, click on the rpc_relay page, then click the link that says edit this page. Now that you are editing the page, drag the custom html element to your blank page. Click to edit the html. Now paste the contents of your clipboard in that html element. You are now done with that page.

Step Four
Repeat step three, except this time we are going to work with the canvas.html file. Copy the contents of that file using your txt editor. Go to the canvas page in Weebly, click to edit that page. Again drag a custom html element into the blank page and click to edit it. Pasted the contents of your clipboard. Now we have just completed step one of the following list:

We have done step 1.

We have done step 1.

Step Five
Now though we’ve only just completed part 1 of the overview, we should be ready for this next step.

Generation of your code.

Generation of your code.


Click to test your configuration. If done correctly, it will allow you to proceed to the next step and get your code. If it doesn’t generate your code, you have missed something, or maybe I’m just lucky and it worked for me. With your code in hand, it’s time to go back to weebly and add the gadget to your site. I placed mine on my home page. Eventually I will try and move it to the side of the page, but I wasn’t feeling that adventurous at the time, I just wanted it to work.

Step Six
Drag and drop a custom html element onto your homepage, as you can see, I placed mine at the very bottom. Click to edit your custom html element and now you are going to paste the code that was just generated in the step above. When it’s posted and you click out of that, don’t freak out about what happens next. It may tell you that the gadget is configured incorrectly.

Is it going to work?

Is it going to work?


Pay no attention to this, just click to publish your site. Now visit your site using the link that comes up once you publish. If everything is in order, it should look like this:
Success!

Success!

.

I hope this has been of some help to you. If you were able to get this working, please, become a friend of SewSimplySweet. Also check out our Blog. Help spread the word to those needing this type of tutorial as well. This is not the official way to get this service working on a Weebly site. They are developing a way to do it, this is probably only a temporary solution. I have only come across 1 situation where the gadget was not visible, my friend was running the new beta version of firefox- version 3.5. I am running firefox ver 3.0.14. I have checked the gadget using Seamonkey, Opera, and Safari, it appears to work in all of these. Cheers!

Advertisements

Comments»

1. LenaLoo - January 7, 2011

Awesome tutorial, my ADD brain has been wrapped around this particular pole! I am stuck on the second part of step two and I can’t find the two files.

chadaragorn - January 7, 2011

I just checked and it looks like Google has changed the way they set up their Friend Connect, they just give you the code and no longer give you the files. I’m not sure what should happen now. Maybe just try and add it how Google suggests.

2. Heather Wright - May 29, 2011

3 step Fix:

(Pre requisite= sign up with friendconnect and “Generate the code” from Google)

1- Go to your site in Weebly… Click on the “Design” Tab, next click on Custom/html on the right, you’ll see html code, after “” paste in “” WITHOUT QUOTES ON BOTH ITEMS
—-CLICK SAVE—-
2- Now, Go to page and area where you want the Friendconnect to live and drop in the “Custom HTML” Element, next go the HTML that Friendconnect generated for you and ONLY cut and paste FROM”” to the END of Friendconnect HTML document Google generated.
3- Publish and test the page.

WORKS FOR ME!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: