Facebook Login Page | CodingNepal

How to Use Facebook’s Profile HTML Application

HUGE Thanks to @marismith for pointing out the Profile HTML Application!

I was asked how to use the Profile HTML Application on Facebook – so I figured a post here would be of the most benefit.

While there are a lot of uses for the HTML application – I used it to create a sign up form for my opt in Marketing Newsletter. Here are the steps:

1. Open an Aweber Account
2. Create a list for your opt in newsletter, product letter or whatever you feel you need an autoresponder for.
3. Create a form for your opt in list. Keep it simple, name and email address is sufficient.
4. Click on “Get Code” – get the HTML code for the Profile HTML App not the java code
5. Copy the code into note pad
6. Go to your facebook account
7. Add the Profile HTML App to your profile (you can also add it to a page if you have one)
8. Paste the code from note pad into the box on the application page
9. Hit preview
10. If you like what you see – hit save!
11. Check, yes I want it on my profile

I want you to notice a few little things in my opt in form.

First – I don’t use “Submit” I use a fun relevant phrase on the Submit button.

Second – I highlight FREE. I want people to know there is no fee for joining the mailing list and that my newsletter is a free service for people to enjoy and learn from.

Let me know if you have any more questions! 🙂

9 Comments

Mari – you are more then welcome.. Love this app and have already gotten newsletter signups… Gotta love it! 🙂

Just super, Melissa! Thanks so much 🙂 I’m in the process of weighing using an outside mail campaign management service (a great one) – and they generate the html code to create the form fields, just as Aweber does. Now I have to go and check out the comprehensiveness of Aweber! Thanks so much for the information. I’m really growing things from the ground up and need every resource I can get.

Hi Melissa, Thanks for sharing this. I love the Profile HTML feature. It’s one thing to use it, but quite another to explain the use to someone else. Many thanks,
Tiffany-

I tried to add an opt-in to my facebook page following your steps above. Has the information (HTML profile) changed on facebook? I don’t see where I can preview it. When I clicked on “update html profile box” I don’t see it anywhere on my page. Any help you can give me is appreciated.

Hey Melissa: Thanks alot for posting this Facebook webform tutorial! After trying for hours this morning to copy the AWeber tutorial to create a Facebook fanpage webform,I finally got it(1st mistake: copied javascript.not the “raw html” 2) not clicking the “move to wall tab” button).. Using your tutorial,I was able to add a profile form. btw: After searching for “profile html application” I noticed in the list,it is called “Profile Box.” It worked anyway,so I’m off to the races,as they say!

I want to add countdown timer to my wall page but i can’t why? 🙁
i’ve it in tab but i want it in box at my main page, how can i do it. 🙁 Thanks,
Rola

Trackbacks/Pingbacks

1. A Day in the Life of a Social Networker | Web Design and Internet Marketing — [. ] How to Use Facebook’s Profile HTML Application [. ]
2. Facebook for Small Business Marketing: 5 Apps to Help You Grow Relationships with Potential Prospects | communicate value — [. ] and stay in contact with potential clients and customers. I found good step-by-step directions on how to set up…
3. How to Create a Custom Facebook Fan Page | Web Design and Internet Marketing — [. ] Red CarpetShirleyView CommentBenny GreenbergView CommentBenny GreenbergView CommentjamesView CommentMari SmithView Comment [. ]

Источник

Facebook Style Homepage Design Using HTML And CSS

Facebook is always a major source of inspiration among all the web developers every one likes facebook whether it is there homepage design, wall design etc today we are also inspired from facebook.

So, in this tutorial we will show you how to create facebook style homepage design using HTML and CSS.You may also like login with facebook using PHP.

To Create Facebook Style Homepage It Takes Only Two Steps:-

Step 1. Make a HTML file and define markup

We make a HTML file and save it with a name homepage.html

talkerscode
  
Email or Phone 

  
Password

Forgotten account?
people in your life.
Create an account
It's free and always will be.
  

  

  

  
Birthday
  
DayMonthYearWhy do I need to provide my date of birth?
  
Female Male 
By clicking Create an account, you agree to our Terms and that 
you have read our Data Policy, including our Cookie Use.
  
Create a Page for a celebrity, band or business. 
English (UK) हिन्दीਪੰਜਾਬੀاردوதமிழ்বাংলাमराठीతెలుగుગુજરાતીಕನ್ನಡമലയാളം
Sign UpLog InMessengerTalkerscodeMobileFind FriendsBadgesPeoplePagesPlacesGamesLocationsCelebritiesGroupsMomentsAboutCreate AdvertCreate PageDevelopersCareersPrivacyCookiesAdsTermsHelp
Design By TalkersCode.com

In this step we create three main div for three main homepage section header, wrapper and footer and add all the content as it is like facebook. You may also like auto post on facebook using PHP.

Step 2. Make a CSS file and define styling

We make a CSS file and save it with a name homepage_style.css

body < text-align:center; width:100%; margin:0 auto; padding:0px; font-family:"lucida grande",tahoma,verdana,arial,sans-serif; background: linear-gradient(white, #D3D8E8); >#header_wrapper < width:100%; min-width:980px; background-color:#4c66a4; >#header < width:980px; margin:0px auto; padding:0px; height:85px; >#header li < list-style-type:none; float:left; text-align:left; color:white; >#header #sitename < margin-top:25px; >#header #sitename a < color:white; text-decoration:none; font-size:30px; font-weight:900; >#header form < margin-top:15px; float:right; >#header form li < font-size:13px; margin-left:15px; >#header form li a < color:#A9BCF5; text-decoration:none; >#header form input[type=»text»] < margin-top:3px; margin-bottom:3px; width:150px; border:1px solid #08298A; height:25px; padding-left:3px; >#header form input[type=»password»] < margin-top:3px; margin-bottom:3px; width:150px; border:1px solid #08298A; height:25px; padding-left:3px; >#header form input[type=»submit»] < height:25px; margin-top:20px; background-color:#084B8A; color:white; border:1px solid #08298A; >#wrapper < margin:0 auto; padding:0px; text-align:center; width:980px; >#wrapper div < float:left; font-family: helvetica, arial, sans-serif; >#wrapper #div1 < margin-top:30px; width:590px; text-align:left; >#wrapper #div1 p < font-size:20px; font-family:arial; font-weight:bold; margin:0px; color:#0e385f; >#wrapper #div2 < margin-top:10px; width:390px; text-align:left; >#wrapper #div2 h1 < margin:0px; font-size:37px; color:#2E2E2E; >#wrapper #div2 p < font-size:18px; color:#2E2E2E; >#wrapper #div2 li < list-style-type:none; margin-top:10px; >#wrapper #div2 li #firstname < width:49%; >#wrapper #div2 li #surname < margin-left:2%; width:49%; >#wrapper #div2 li input[type=»text»] < width:100%; height:40px; border-radius:5px; padding-left:10px; font-size:18px; border:1px solid #BDBDBD; >#wrapper #div2 li input[type=»password»] < width:100%; height:40px; border-radius:5px; padding-left:10px; font-size:18px; border:1px solid #BDBDBD; >#wrapper #div2 li select < padding:4px; float:left; >#wrapper #div2 li a < margin-left:10px; width:150px; color:#045FB4; text-decoration:none; font-size:11px; display: inline-block; vertical-align: middle; line-height:15px; >#wrapper #div2 li a:hover < text-decoration:underline; >#wrapper #div2 li < color:#2E2E2E; font-size:18px; >#wrapper #div2 #terms < color:#424242; font-size:11px; >#wrapper #div2 #terms a < display:inline; margin:0px; >#wrapper #div2 li input[type=»submit»] < width:205px; height:45px; text-align:center; font-size:19px; margin-top: 10px; margin-bottom: 10px; font-family: 'Freight Sans Bold', helvetica, arial, sans-serif !important; font-weight: bold !important; background: linear-gradient(#67ae55, #578843); background-color: #69a74e; box-shadow: inset 0 1px 1px #a4e388; border-color: #3b6e22 #3b6e22 #2c5115; border: 1px solid; border-radius: 5px; color: #fff; cursor: pointer; display: inline-block; position: relative; text-shadow: 0 1px 2px rgba(0,0,0,.5); >#wrapper #div2 #create_page < color:#424242; font-size:13px; font-weight:bold; >#wrapper #div2 #create_page a < display:inline; margin:0px; font-size:13px; >#footer_wrapper < width:100%; clear:both; float:left; margin-top:30px; min-width:995px; background-color:white; text-align:left; >#footer1 < width:980px; margin:0px auto; padding:0px; border-bottom:1px solid #E6E6E6; height:30px; line-height:30px; font-size:12px; color:#848484; >#footer1 a < color:#365899; display:inline; margin-left:10px; text-decoration:none; >#footer1 a:hover < text-decoration:underline; >#footer2 < width:980px; margin:0px auto; padding:0px; font-size:12px; color:#848484; >#footer2 a < color:#365899; display:inline-block; margin:5px; margin-left:0px; min-width:80px; text-decoration:none; >#footer2 a:hover

That’s all, this is how to create facebook style homepage design using HTML and CSS.

You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Источник

How to Create Facebook Login Page in HTML and CSS

Creating a Facebook login page can be an exciting and practical project for beginner web developers because Facebook is a widely used social media platform. By recreating its login page, you can learn valuable skills in designing user interfaces that people are already familiar with.

In this blog post, I’ll guide you through how to create a responsive Facebook login page using only HTML and CSS. This project is beginner-friendly, allowing you to gain hands-on experience with these essential languages and styles.

Throughout the process, we’ll explore different HTML tags, such as headers, forms, inputs, and links. We’ll also dive into CSS properties to style our login form, including color, background, and font choice, and make it responsive for all devices.

Steps To Create Facebook Login Page HTML & CSS

To create a Facebook login page using HTML and CSS, follow these step-by-step instructions:

• Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
• Create an index.html file. The file name must be index and its extension .html
• Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file: This code includes various elements such as a header for the login page, paragraphs, a form, input fields, a button, and links. I’ve also included default form validation by using the required attribute.

        
 
 
facebook
 
Connect with friends and the world
 
around you on Facebook.
 
 
   
Login Forgot password? 
 
 
Create new account 
 
 
 
  

Next, add the following CSS codes to your style.css file to make it look like the Facebook login page. This code includes different styles for elements such as color, background, and border. Feel free to customize these styles according to your preferences.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; >.flex < display: flex; align-items: center; >.container < padding: 0 15px; min-height: 100vh; justify-content: center; background: #f0f2f5; >.facebook-page < justify-content: space-between; max-width: 1000px; width: 100%; >.facebook-page .text < margin-bottom: 90px; >.facebook-page h1 < color: #1877f2; font-size: 4rem; margin-bottom: 10px; >.facebook-page p < font-size: 1.75rem; white-space: nowrap; >form < display: flex; flex-direction: column; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); max-width: 400px; width: 100%; >form input < height: 55px; width: 100%; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 15px; font-size: 1rem; padding: 0 14px; >form input:focus < outline: none; border-color: #1877f2; >::placeholder < color: #777; font-size: 1.063rem; >.link < display: flex; flex-direction: column; text-align: center; gap: 15px; >.link .login < border: none; outline: none; cursor: pointer; background: #1877f2; padding: 15px 0; border-radius: 6px; color: #fff; font-size: 1.25rem; font-weight: 600; transition: 0.2s ease; >.link .login:hover < background: #0d65d9; >form a < text-decoration: none; >.link .forgot < color: #1877f2; font-size: 0.875rem; >.link .forgot:hover < text-decoration: underline; >hr < border: none; height: 1px; background-color: #ccc; margin-bottom: 20px; margin-top: 20px; >.button < margin-top: 25px; text-align: center; margin-bottom: 20px; >.button a < padding: 15px 20px; background: #42b72a; border-radius: 6px; color: #fff; font-size: 1.063rem; font-weight: 600; transition: 0.2s ease; >.button a:hover < background: #3ba626; >@media (max-width: 900px) < .facebook-page < flex-direction: column; text-align: center; >.facebook-page .text < margin-bottom: 30px; >> @media (max-width: 460px) < .facebook-page h1 < font-size: 3.5rem; >.facebook-page p < font-size: 1.3rem; >form < padding: 15px; >>

Conclusion and Final Words

In conclusion, creating a Facebook login page can be a helpful project for those who are new to web development. I hope that by following the steps outlined in this post, you’re able to create a responsive Facebook login page using HTML and CSS.

If you want to further enhance your skills, you can explore other beginner-friendly login form designs available on this website. These forms are great practice opportunities to improve your skills in HTML and CSS.

If you encounter any problems while creating your Facebook login page, you can download the source code files for this Facebook login page project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

Источник