Embedding Facebook Connect in Secure Pages

A word of warning: If you have a custom secure domain, Facebook Connect will not work on preview pages or on forms in Test Drive mode. You must test Facebook Connect on a live page for it to work correctly. Make it a page or a form that is published, but not linked or publicized anywhere.

The reason this happens is that preview pages live on the convio.net domain, but the Facebook login popup originates from your custom secure domain. When the login popup tries to communicate with the preview page, the web browser's "same-origin policy" security measures stop it from working.

Stupid question, but the instructions for setting up Facebook Connect (at all, not just secure) don't include some steps I see in the Convio admin.

Step 4 (after 'Permanent Session Key') is to 'Create default content'. Do I have to change anything there? Do I need to actually do it at all? I am really just trying to make an FB Connect-friendly Thank You screen for my advocacy pages.

Later, I went to step 7 'Check your setup', I checked my setup and it throws an error complaining that I haven't entered a Canvas URL -- but in the instructions from Convio for setting up FB Connect it specifically says to leave the canvas URL blank.

Quite frustrating.

William Tam:

Stupid question, but the instructions for setting up Facebook Connect (at all, not just secure) don't include some steps I see in the Convio admin.

Step 4 (after 'Permanent Session Key') is to 'Create default content'. Do I have to change anything there? Do I need to actually do it at all? I am really just trying to make an FB Connect-friendly Thank You screen for my advocacy pages.

Later, I went to step 7 'Check your setup', I checked my setup and it throws an error complaining that I haven't entered a Canvas URL -- but in the instructions from Convio for setting up FB Connect it specifically says to leave the canvas URL blank.

Quite frustrating.

In essence, to enable Facebook Connect, you need only do what the connect instructions tell you to do and ingore the rest of the steps on the screen.

Shawna Templeton:

so I have gotten to a place where the code works, however, I am using the widget on the action alert thank you page. on this page there are conditionals for how to proceed when webforms fail, and the fbconnect code seems to interfere with the conditionals. has anyone else experienced this? the conditionals seem very touchy. the directions for cutting and pasting the content into the webforms of the legislators always shows up, even if the form does fail.

thoughts?

Hi Shawna,

I took the liberty of taking a look at your Connect Test action alert. You're right, there are quite a few conditionals in there, but they don't necessarily have to interfere with each other.

It looks like somehow, the failed-alert instructions escaped their conditional and sat just below the conditional body, thus making them always display no matter what. I edited in code view and placed that content back in the conditional. It seems to be working fine now, and doesn't interfere with Facebook Connect at all.

Shawna Templeton:

thanks james -- I played around with it some more and was still having trouble with conditionals, but eventually came to realize that they were much easier to work with in explorer than they were in firefox ... they didnt come unnested as much and I could copy and paste them back into place, in wysiwyg in FF, where i couldnt in IE.

I think I'm at the point where everything is in working order . but I do have one question, why is the users name automatically inserted at the beginning of both of the short story title and the short story body of the post? I don't want the name automatically inserted in the body one, but I can't get rid of it

James Zetlen:

Hey Shawna,

Unfortunately, that's a part of the Convio Facebook integration software, and also a part of the Facebook platform. I have opened a request asking Engineering to remove the first name from the body, and it should probably happen in the Winter release of our software.

sounds good. one other thing -- is there a way to make the action link from the post open in a new tab or window?

James Zetlen:

Somehow, the codeblock in the text file above is once again incorrect. I apologize to everyone for the ongoing inconvenience! Whatever systems are being used to post the code keep on wiping the HTML and XML tags that are necessary for it to work.

I've attached the correct codeblock as a text file to this post.

Are the additional scripts directing to the Google APIs necessary? What's the function there; just for outside custom domains or for all Convio users? Trying to get your code up and running on the Convio donate page for DirectRelief.org (click on Donate Now on the homepage to check it out, if you want).

James Zetlen:

Take note, folks: I realized that a lot of our struggles came from Internet Explorer's nasty habit of interpreting attached text files as though they're HTML, which mangles them!

I've attached a ZIP file containing the correct code snippet for embedding Facebook Connect on secure pages, and a sample donation thank-you page that would employ it. I've also improved the code snippet somewhat: it should be a little easier for you to operate, and won't require you to edit quite as weird of code.

Here are the steps!

1. Create a new single-component PageBuilder page called "fbconnect". You'll use this as a reusable.
2. Set that single component to HTML Content, and paste into it the contents of the "fbconnect_secure.txt" text file inside the attached ZIP file. It should look like three script tags and then some Convio template tags.
3. Publish this PageBuilder page!
4. On the Donation Form, Action Alert, or whatever other secure page you'd like a "Publish to your feed" link to show, edit the HTML Content of that secure page with the WYSIWYG turned completely off.
5. Paste the following:]
   
   ]
   
   ] to help the cause.]]
   
   ]
   
   ] will help us immensely in our efforts to serve our community. Lorem ipsum dolor se amet.]]
   
   ]
   
   ]/site/Donation2?df_id=1040]]
   
   ]
   
   ]/site/Donation2?df_id=1040]]
   
   ]
   
   
   

That big stack of U0 tags is my way of making it slightly easier to manually edit the text and links in the Secure Publish Feed component. As you can see, each of the tags contains something you can change; it corresponds to the WYSIWYG interface that appears when you insert a Publish component in an unsecure page via point-and-click. So, change the contents of these U0 tags to use your own language, the URL of your own secure page you want Facebook users to link to, and your own image to post in the story. Be careful not to delete any of the brackets or equals signs; that'll mess up the tag syntax.

I know that Facebook in secure pages is still harder than it should be, and that should be massively improved upon our next release. But in the interim, I hope this makes things easier for everyone.

can i have mulitiple facebook apps? i run both a 501c4 and c3 for our org and they can't use the same facebook app for legal reasons, even though they both run through the same convio installation.

James Zetlen:

Take note, folks: I realized that a lot of our struggles came from Internet Explorer's nasty habit of interpreting attached text files as though they're HTML, which mangles them!

I've attached a ZIP file containing the correct code snippet for embedding Facebook Connect on secure pages, and a sample donation thank-you page that would employ it. I've also improved the code snippet somewhat: it should be a little easier for you to operate, and won't require you to edit quite as weird of code.

Here are the steps!

1. Create a new single-component PageBuilder page called "fbconnect". You'll use this as a reusable.
2. Set that single component to HTML Content, and paste into it the contents of the "fbconnect_secure.txt" text file inside the attached ZIP file. It should look like three script tags and then some Convio template tags.
3. Publish this PageBuilder page!
4. On the Donation Form, Action Alert, or whatever other secure page you'd like a "Publish to your feed" link to show, edit the HTML Content of that secure page with the WYSIWYG turned completely off.
5. Paste the following:]
   
   ]
   
   ] to help the cause.]]
   
   ]
   
   ] will help us immensely in our efforts to serve our community. Lorem ipsum dolor se amet.]]
   
   ]
   
   ]/site/Donation2?df_id=1040]]
   
   ]
   
   ]/site/Donation2?df_id=1040]]
   
   ]
   
   
   

That big stack of U0 tags is my way of making it slightly easier to manually edit the text and links in the Secure Publish Feed component. As you can see, each of the tags contains something you can change; it corresponds to the WYSIWYG interface that appears when you insert a Publish component in an unsecure page via point-and-click. So, change the contents of these U0 tags to use your own language, the URL of your own secure page you want Facebook users to link to, and your own image to post in the story. Be careful not to delete any of the brackets or equals signs; that'll mess up the tag syntax.

I know that Facebook in secure pages is still harder than it should be, and that should be massively improved upon our next release. But in the interim, I hope this makes things easier for everyone.

James, the attachment won't open. I get a "Compressed (zipped) Folders Error". Can you re-post the attachment?

James Zetlen:

Take note, folks: I realized that a lot of our struggles came from Internet Explorer's nasty habit of interpreting attached text files as though they're HTML, which mangles them!

I've attached a ZIP file containing the correct code snippet for embedding Facebook Connect on secure pages, and a sample donation thank-you page that would employ it. I've also improved the code snippet somewhat: it should be a little easier for you to operate, and won't require you to edit quite as weird of code.

Here are the steps!

1. Create a new single-component PageBuilder page called "fbconnect". You'll use this as a reusable.
2. Set that single component to HTML Content, and paste into it the contents of the "fbconnect_secure.txt" text file inside the attached ZIP file. It should look like three script tags and then some Convio template tags.
3. Publish this PageBuilder page!
4. On the Donation Form, Action Alert, or whatever other secure page you'd like a "Publish to your feed" link to show, edit the HTML Content of that secure page with the WYSIWYG turned completely off.
5. Paste the following:]
   
   ]
   
   ] to help the cause.]]
   
   ]
   
   ] will help us immensely in our efforts to serve our community. Lorem ipsum dolor se amet.]]
   
   ]
   
   ]/site/Donation2?df_id=1040]]
   
   ]
   
   ]/site/Donation2?df_id=1040]]
   
   ]
   
   
   

That big stack of U0 tags is my way of making it slightly easier to manually edit the text and links in the Secure Publish Feed component. As you can see, each of the tags contains something you can change; it corresponds to the WYSIWYG interface that appears when you insert a Publish component in an unsecure page via point-and-click. So, change the contents of these U0 tags to use your own language, the URL of your own secure page you want Facebook users to link to, and your own image to post in the story. Be careful not to delete any of the brackets or equals signs; that'll mess up the tag syntax.

I know that Facebook in secure pages is still harder than it should be, and that should be massively improved upon our next release. But in the interim, I hope this makes things easier for everyone.

This still doesn't work. It just causes a pop-up to appear and then instantly vanish before it displays any content.