Profile Picture
Duncan Hamra

Facebook Button

Simple continue with Facebook button that works with Memberstack.
Copy component
Download JSON
{"content":[{"id":"ynmaft","name":"div","parent":"cgvtsk","children":["sjqbnk"],"settings":{"_display":"inline-block"}},{"id":"sjqbnk","name":"div","parent":"ynmaft","children":["sbskrh","hkercb"],"settings":{"_cssGlobalClasses":["cmrfcx"],"_attributes":[{"id":"kadzcz","name":"data-ms-auth-provider","value":"facebook"}],"tag":"a"}},{"id":"sbskrh","name":"code","parent":"sjqbnk","children":[],"settings":{"executeCode":true,"signature":"4ebaf362040337587dd4f5b6f0785716","user_id":1,"time":1739548015,"_width":"24px","_height":"24px","_margin":{"top":"1"},"code":"facebook-round-color"},"themeStyles":[]},{"id":"hkercb","name":"text-basic","parent":"sjqbnk","children":[],"settings":{"text":"Continue with Facebook","_typography":{"text-align":"right"},"_attributes":[{"id":"xsooko","name":"data-ms-auth-connected-text","value":"Disconnect from Facebook"}]}}],"source":"bricksCopiedElements","sourceUrl":"https://duncan1.local","version":"1.12.1","globalClasses":[{"id":"cmrfcx","name":"social-button","settings":{"_padding":{"bottom":".75em","top":".75em","left":"1.25em","right":"1.25em"},"_border":{"width":{"bottom":"1","top":"1","right":"1","left":"1"},"radius":{"top":"4px","right":"4px","bottom":"4px","left":"4px"},"color":{"hex":"#dadce0"},"style":"solid"},"_background":{"color":{"hex":"#ffffff"}},"_columnGap":"12px","_alignSelf":"center","_justifyContent":"flex-start","_alignItems":"center","_direction":"row","_display":"flex","_boxShadow":{"values":{"offsetY":"1","spread":"0","blur":"2"},"color":{"hex":"rgba(0,0,0,0.05)"}},"_border:hover":{"color":{"hex":"#d2e3fc"}},"_background:hover":{"color":{"hex":"#f8faff"}},"_boxShadow:hover":{"values":{"offsetY":"1","spread":"0","blur":"3"},"color":{"hex":"rgba(66,133,244,0.15)"}},"_cssTransition":"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)","_margin":{"bottom":"1em"}},"modified":1739547206,"user_id":1}],"globalElements":[]}

Our notes on this component

If you want to add a Continue with Facebook button to your WordPress + Bricks Builder auth forms, this component is for you!

This particular Facebook Auth Button has a clean and simple UI which you’re probably quite used to seeing – and the good news is, your users probably will be, too!

This component works with the Memberstack WordPress Plugin.

This Facebook button isn’t made to be used with the native Memberstack login form – rather, this can be used with any HTML form which has Memberstack installed via attributes.

Similar components

Profile Picture
Julian Galluzzo

Log In Form (Red & Beige)

Memberstack-powered login form with working Google Auth from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"ccfhme","name":"section","parent":0,"children":["xzuswg"],"settings":{},"label":"Auth"},{"id":"xzuswg","name":"container","parent":"ccfhme","children":["yelrtm"],"settings":{}},{"id":"yelrtm","name":"block","parent":"xzuswg","children":["pmijpp","bfgzkm","yqaihj"],"settings":{"_cssGlobalClasses":["lhfzbg"]}},{"id":"pmijpp","name":"heading","parent":"yelrtm","children":[],"settings":{"text":"Log in","_cssGlobalClasses":["ziixdz"]}},{"id":"bfgzkm","name":"text-basic","parent":"yelrtm","children":[],"settings":{"text":"If you don't have an account, you can click here to sign up. If you forgot your password, you can click here to reset your password.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"yqaihj","name":"ms-brcks-form","parent":"yelrtm","children":[],"settings":{"formType":"login","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"ehrbua"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Create Account Form (Red & Beige)

Memberstack-powered sign up form from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"56c33c","name":"section","parent":0,"children":["fd3a93"],"settings":{},"label":"Auth"},{"id":"fd3a93","name":"container","parent":"56c33c","children":["9a9986"],"settings":{}},{"id":"9a9986","name":"block","parent":"fd3a93","children":["22379b","eef3b4","a7ec9a"],"settings":{"_cssGlobalClasses":["lhfzbg"]}},{"id":"22379b","name":"heading","parent":"9a9986","children":[],"settings":{"text":"Create an account","_cssGlobalClasses":["ziixdz"]}},{"id":"eef3b4","name":"text-basic","parent":"9a9986","children":[],"settings":{"text":"If you already have an account, you can click here to log in.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"a7ec9a","name":"ms-brcks-form","parent":"9a9986","children":[],"settings":{"formType":"signup","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"ehrbua"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Reset Password Form (Red & Beige)

Memberstack-powered reset password form from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"8842ff","name":"section","parent":0,"children":["c17d95"],"settings":{},"label":"Auth"},{"id":"c17d95","name":"container","parent":"8842ff","children":["85369c"],"settings":{}},{"id":"85369c","name":"block","parent":"c17d95","children":["30b86e","97175c","acffa4"],"settings":{"_cssGlobalClasses":["lhfzbg"],"_padding":{"bottom":"30"}}},{"id":"30b86e","name":"heading","parent":"85369c","children":[],"settings":{"text":"Reset password","_cssGlobalClasses":["ziixdz"]}},{"id":"97175c","name":"text-basic","parent":"85369c","children":[],"settings":{"text":"Check your email inbox to get the 6-digit code, and then enter it here along with your new password. Once your password has been changed you will be redirected to the login page.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"acffa4","name":"ms-brcks-form","parent":"85369c","children":[],"settings":{"formType":"reset-password","planAction":"add","fields":[{"type":"number","placeholder":"6 Digit Code","required":true,"customFieldId":"token","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your new password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"fubymb"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column","redirectUrl":"/reset-password","buttonText":"Reset password"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}

Nice, you've downloaded this template! Now let's get it on your website...

To use this component, go to your 'Templates', click 'Import', and upload the file you just downloaded! It's that simple. You can then copy/paste it to other sections of your website.
Close & continue

Nice, you've copied this component! Now let's paste it...

To paste this component, simply go to any Bricks page or component and click paste! Simple as that.
Close & continue