Facebook Connect Button.

Many people have asked me how to put a facebook connect button in the logon box instead of the drop down list like i have it setup on my site for my own version of facebook connect. This code is provided as part of my facebook connect module. I am posting the button portion of it here for others to use with other facebook connect modules.

The source below in is two pieces. The first change is to remove the dropdown selector. The second adds the button.

First you need a button image. Get one in PNG format and name it fbconnectbut.png and upload to your site in templates/base/images/


To add a facebook connect button open inc/design.inc.php

Part 1. Removing the drop down menu. Look for the following at about line 477

'inputs' => array(
$aAuthTypes,
'nickname' => array(
'type' => 'text',
'name' => 'ID',
'caption' => _t('_NickName'),
),

Comment out $aAuthTypes,. Make it look like this.
This mod removes the auth type drop down list. This is optional.

'inputs' => array(
//$aAuthTypes,
'nickname' => array(
'type' => 'text',
'name' => 'ID',
'caption' => _t('_NickName'),
),

Part 2. Adding the button. Now near the end of the file at line 525 look for this.

$oForm = new BxTemplFormView($aForm);

bx_import('BxDolAlerts');
$sCustomHtmlBefore = '';
$sCustomHtmlAfter = '';
$oAlert = new BxDolAlerts('profile', 'show_login_form', 0, 0, array('oForm' => $oForm, 'sParams' => &$sParams, 'sCustomHtmlBefore' => &$sCustomHtmlBefore, 'sCustomHtmlAfter' => &$sCustomHtmlAfter, 'aAuthTypes' => &$aAuthTypes));
$oAlert->alert();

$sFormCode = $oForm->getCode();

Make it look like this.
This mod adds the facebook connect button.

$oForm = new BxTemplFormView($aForm);

bx_import('BxDolAlerts');
$sCustomHtmlBefore = '';
$sCustomHtmlAfter = '';
$oAlert = new BxDolAlerts('profile', 'show_login_form', 0, 0, array('oForm' => $oForm, 'sParams' => &$sParams, 'sCustomHtmlBefore' => &$sCustomHtmlBefore, 'sCustomHtmlAfter' => &$sCustomHtmlAfter, 'aAuthTypes' => &$aAuthTypes));
$oAlert->alert();

$sFormCode = '<div style="text-align: center; margin-top: 8px;"><a href="modules/?r=facebook_connect/login_form"><img border="0" src="' . BX_DOL_URL_ROOT . 'templates/base/images/fbconnectbut.png"></a></div>' . $oForm->getCode();


NOTE: This has been setup for the boonex facebook connect. To use this code with a different module, change the href link.
Also note: This code is for Dolphin 7.0.2. The code in older versions of dolphin is different and will not work as written above.

Thanks Deano. This is nice to see. Great for people to add. Boonex should send out a weekly newsletter with Top 10 Codes to improve your site and this should definitley be on the list.

point for DEANO, I think your mod is fantastic!

i think in 7.0.3 they should remove the combo box and just have the button. And also add Facebook connect to Join page and member page (to link accounts)

There is a reason for the drop down box.

Dolphin was designed to handle more than one alternate auth module. Thus in cases such as that the drop down box is appropriate.

Thanx,

This helped alot.

I need a  Facebook Disconect Button.

LOL

Why?

Because many people are using the facebook conenct button and they don't know how to log out

so I want to add my own facebook disconnect button so they will log out with out getting lost

My facebook connect mod logs them out of facebook when they log out of the site.

So, if they can't use the logout button on the site, what makes you think they will use a facebook logout button.

You could always try a bigger, more visible site logout button.

I know that man

but the log out is to small and some memebrs are blaine

Thats why i also said. "You could always try a bigger, more visible site logout button."

Thanks Deano!

Thx for this

I love the idea of a Facebook connect but still haven't found one that works for me. Maybe I am looking at it wrong. The problem I have is my join form has required fields that get ignored when someone joins my site using the facebook connect. Does anyone have any ideas how this can be solved?

wait before 7.0.5 is coming.  New facebook version contain redirect option. That allow you select you needed page after first sign in (avatar, join, pedit.....)

Is there a simple way to to change login Username to Email

I've gone through D7's builder and can't find anything to change to that preference it would be a great help if anyone can help.

Is there a simple way to to change login Username to Email

I've gone through D7's builder and can't find anything to change to that preference it would be a great help if anyone can help.

Great! Thanks Deano.

is this code working on 7.0.5 ???????????

The line numbers are slightly different, but yes. It works.

hello deano sorry to trouble you i have done as you said, but the button still only shows in the popup login box but not in the login box or the sign up page ?

If it shows in one, it will show in the other.

The same code affects both boxes so if one works the other should also.

Make sure your cache gets cleared.

please except my apology i cleared the cache i checked in IE9 AND buttons are there for some reason it took 3 hours for the buttons to resolve in firefox despite the fact that i cleared comp/browser cache  sorry to have troubled you ... does look very nice with your button it is ok to use ? i found it in you other fbook post ..

once again thank you for sharing

Thanks deano ... you always have what I need.

What line is Dolphin 7.0.5?

Exact line numbers are sometimes useless. If other mods exists, or your editor double spaces the lines, it will be inaccurate.

Do not rely on line numbers when editing code. Find the code useing your eyes or search for parts of the code that have been specified to look for.

If you use the search function in your editor and search for $sFormCode = $oForm->getCode(); it will take you right to it.

Again, never rely on the accuracy of line numbers, always verify you have the correct location with your eyes by matching the code that the instructions tell you to look for.

The button is just an image with a link to the Facebook connect logon form. It does not do anything more than that, nor can it cause that issue.

Search the forums for Facebook connect. You will see there are others that have had that issue as well as other issues. If you can't find them, start a new topic. Your issue is unrelated to the button and therefore is not within this topic and should not be discussed here.

In fact, someone else just posted a new topic with the same problem. http://www.boonex.com/unity/forums/topic/SERIUS-facebook-connect-issue.htm

But you will find others if your search for Facebook Connect here. http://www.boonex.com/unity/forums/#action=goto&search=1

I have the button working but when some new connect they connect with the last person in formation take a look at qchevere.net

Has nothing to do with the button code. Same issue as last person who posted here. You need to update your facebook connect.

Search the forums for facebook connect. You will see other issues as well.

Does it support 7.0.6? Tried this but I don´t understand what you mean in this part? (a href="modules/?r=facebook_connect/login_form").

Please help. Thanks.

Yes it does.

And what your referencing that you don't understand is a STANDARD HTML LINK. Links to your facebook connect logon page. In this example that link if to the default boonex version of facebook connect.

More information on links. http://w3schools.com/html/html_links.asp

If this does not work for you then it was not applied correctly. HINT. Don't take the line numbers in examples as 100% accurate. Each version of dolphin will vary with the line numbers. Use the section of code as a visual aid to find the EXACT location.

And if your new to dolphin, then you may not be aware that your cache will most likely have to be cleared. Caching should be OFF while you site is being worked on.

I know html well, I got it to work now. I forgot to clear cache before that is why it did show up.

Thank you for this mod.

what page do i edit this code is it the index.php...... ill check im new to this but great solution

my bad thanks again and good work totally helps

I made the changes to the code and its not working if you can take alook at http://www.razorwear.com/life i would totally appreciate the help if you have 2 mins thanks again

It's not like i am going to be able to tell what was done wrong just by looking at the site.

If the code was put in properly then it will work. If not done properly then it will not work.

HINT: do not use line numbers as a reference. Use the code itself. Line numbers change between dolphin versions, so are unreliable to use as a reference point. For example. $aAuthTypes appears in several locations througout that file, so you must make sure you are at the proper one. Use the rest of the code example i provide as a visual reference.

When done, clear your dolphin cache. I noticed it is turned on. If caching in dolphin is on, then clearing the cache is a must do.

So. Restore the backup you should have made of inc/design.inc.php and try again.

Is there possibly a different way this has to be done for 7.0.8?

I've done it a few times now, haven't gone by line numbers, used exactly the code provided by cut and paste, made sure my png is named correctly and in the right file, yet nothing. 

Commenting out the drop down works but I have no indication of a button.  Caches off but still cleared, refreshed the page several times and in several browsers with no luck.

Help!

Nope. Should work in 7.0.8

Make sure button file is named fbconnectbut.png and must be placed in templates/base/images/

Check.  Right name, right location.  I must have done something somewhere else that is affecting this.

I do not know what you did wrong. Code has been tested and works fine.

I've no question about your code Deano, I am sure it is something I've gotten wrong, just can't figure out what.  Not a big worry, even the mods I have installed don't work correctly and their creators can't explain that either.

I've been thinking of scraping it out and reinstalling the whole site again.

Hi, Deano, How can I put the  facebook connect button on the splash Join page? I have tried to paste code on the root/splash.php but did not show up the facebook connect button all it only showed a question mark "?".  Do you have any clue how I can make it work.

Thanks

No. Each splash page is different. You will need to contact spash page author for help putting a button on it. It is just a image with a hyperlink.

Thank you for taking the time to find the error that I made on your free module.

oh my dear Deano, every day you grow up in my eyes 

Hi Deano,

work fine also on D7.0.9, thank for this tip!

I understand why Dolphin use the drop menu for the login, i have also the Yahoo mod. But if i whant to have the Facebook loggin button AND the Yahoo login Button instead of the drop menu, how i can do?

I try to put both line :

$sFormCode = '<div style="text-align: center; margin-top: 8px;"><a href="modules/?r=facebook_connect/login_form"><img border="0" src="' . BX_DOL_URL_ROOT . 'templates/base/images/fbconnectbut.png"></a></div>' . $oForm->getCode();

and

$sFormCode = '<div style="text-align: center; margin-top: 8px;"><a href="modules/?r=yahoo_connect/login_form"><img border="0" src="' . BX_DOL_URL_ROOT . 'templates/base/images/yhconnectbut.png"></a></div>' . $oForm->getCode();

But doesn't work...

Thank

This pretty awesome!  How do you get it to show up on the signup screen also?

The join page normally contains a login box. So it should already be there as part of that block.

Your assigning the code to the var $sFormCode twice. Your over writeing the first with the second.

You need to do something like this.

// First button
$sFormCode = '<div style="text-align: center; margin-top: 8px;"><a href="modules/?r=facebook_connect/login_form"><img border="0" src="' . BX_DOL_URL_ROOT . 'templates/base/images/fbconnectbut.png"></a></div>';
// Second button
$sFormCode .= '<div style="text-align: center; margin-top: 8px;"><a href="modules/?r=yahoo_connect/login_form"><img border="0" src="' . BX_DOL_URL_ROOT . 'templates/base/images/yhconnectbut.png"></a></div>';
// The rest of the form.
$sFormCode .= $oForm->getCode();

Does this perform a login also?  I just get this:  Sorry but a profile with this email address already exists

It does not.

It's just a button that links to the boonex facebook connect module.

It's the facebook connect module that is showing you that message.

Boogerd: I get this message too, have you solved this?

The message means exactly what is says. Sorry but a profile with this email address already exists.

But i will try to explain it further.

When you attempt to connect with Facebook connect, it is attempting to create an account using the email address it found on the facebook account your using to connect with. But it finds that the email address is already in use by another dolphin account. So because no two accounts can exist with the same email address, facebook connect cannot create it.

The boonex version of facebook connect does not have a feature to link to existing accounts based on matching email addresses. My version in the market can do that and more.

But because this issue is not related to the topic of this thread, which is creating a button to use instead of the drop down. I request you start a new topic on your issue so this thread does not get filled with so many off topic posts.

Ok Deano, you convinced me :)

I need to open a thread, but then again, shouldn't it process a login instead if the user with the same email is found, or is there some sort of token it looks for to see if this user is associated with the Fb login method?

The answer is no. And yes in that order.

The boonex version of facebook connect does not login to existing accounts based on a matching email address. My version in the market can. it has a option to do just that.

Yes the boonex version of facebook connect does keep track of facebook ID's when an account is created so it can reconnect to it after. But it does not provide a way for the member to enter their facebook ID into there existing dolphin account so they can connect with facebook. Mine has a facebook ID field in the profile that a member can use to tie their existing dolphin account with a facebook account.

You can stick a facebook id into the database manually for the boonex version in the table bx_facebook_accounts in the database, the field id_profile is the dolphin member id and the field fb_profile is the facebook ID.

Deano - Thanks for such a detailed explanation; even a newbie like myself was able to get it installed and working with the button.  My question is this, though, if you don't mind taking a moment to answer: When you click the connect with facebook button it takes you the Dolphin's join page with most of the information already populated.  Is that the idea behind the button?  I would assume that it would simply log them in, directly, without any need to complete the join form?  I assume then, that they would use the same login information to access the site directly - OR log in with that button every time they enter the site (it wouldn't create additional users would it?) I am using the most recent version of Dolphin the .9 ....and I love the mod... I just want to make sure I understand it correctly... maybe I have a return URL set wrong in my FB developer section....?

Thanks for the help from you or other members in advance!

Sorry. Your missing the point of the button. Your seem to think the button has some control of how facebook connect works. It is just a button. A link to a page. Nothing more.

On a normal dolphin install you have a drop down selector on the logon box. When you select facebook connect the selection links to yoursite.com/modules/?r=facebook_connect/login_form

If you choose to install this button, your just replacing that selector with a button. It also links to yoursite.com/modules/?r=facebook_connect/login_form

The function of the selector and the button are identical. They are just links. Nothing more.

What happens after is a function of facebook connect module. Look in the facebook connect module. You will see option in there to conttrol how it works. One of those options is to fill out the dolphin join form. Go Through those options.

So basically your question is a facebook connect question. This post was about replacing the dropdown selector with a button instead. So if you need more help with facebook connect, then please start your own support topic to ask for help.

The button also links to the default boonex version of facebook connect. It's not even my facebook connect module that your using so i am guessing you misread the first post of this topic that explains why i posted this code and what it does.

Apologies.  I did briefly skim through several of the posts, but in hindsight this was likely not the place to be attempting to tap your knowledge of how the module works.  I did, fully, understand that the information was provided for the purpose of coding a graphic image rather than the drop down.

I will take a look at your mods...  from the brief time I had yesterday - your modifications are very nice and your site is well done.

Thanks.

Sorry. I based my response on this.

That seemed to me that you expected the button to change how the module worked.

hello,

I have Dolphin 7.0.5 and installed the AddThis code facebook like button and everything is ok. But as shown in the attachment is not a miniature Like I'm giving.

Can someone help me?

Mila

 Add this to your /templates/base/_header.html for UNI template

for 3rd party template.. /templates/tmpl_yourtemplate/base/_header.html or could be _sub_header.html

just before
<title>__page_header__</title>
after
<meta http-equiv="Content-Type" content="text/html; charset=__page_charset__" />
this is what you want

<meta property="og:title" content="e-som.net">
<meta property="og:image" content="http://e-som.net/images/YOUR_LOGO_IMAGE_TITLE.png">
<meta property="og:site_name" content="E-som.NET">
<meta property="og:description" content="This information here will show on every single sharethis, twitter, or Facebook Post.">

Change to your needs of course and back up all files first!!!!!

Thank You Newton....I´ll try. 

 You can see this in action @ the 7.1 DEMO site mynewbeetle.net/7.1/

Hello, 

Newton27, i put this  meta´s in  /templates/base/_header.html...but only appear the logo of our Dolphin site. I want that to appear one miniature of what i click in "Facebook Like Button".I making  still something wrong?

Regards,

Mila

Newton27, I send a PM to you. Thank´s

Your answer is in PM..