Wednesday, March 20, 2013

How to Add a Facebook Like Button to Your Website or Blog!

add facebook like button, how to add facebook like button, facebook button, facebook button for website, facebook button for blog,

Have you ever asked yourself, "how do these websites have the facebook like button on them"? I know I have as a web designer this is one important aspect to have on a website because there's a multitude of uses for these buttons. Today I can going to share with you step by step how to add this button to your website or blog. We will start with how to add it to a site like Weebly and go into how to add it to Blogger as well. Please Follow this blog to get more updates!

Let's Begin:

I will be using my Facebook Fan Page for the example.

First, we need to open up this website into our browser:


Scroll down just a tad until you see this:

Step 1 - Get Like Button Code

 (?)
Send Button (XFBML Only) (?)
 
 (?)
 (?)
Show Faces (?)
 
 (?)
 (?)
 (?)


Now we need to break down what each of these items on here mean:

URL to Like: If its an Image of an item: Right Click on Image, Click Copy Image URL and Paste it inside this box

Facebook Business Page: Open up Facebook, Click on your Business Page, Copy the Website Address from above, Paste it Inside the URL to Like box. 

Once we have this general information in here we need to choose layout: Do you want a Send Button? Send Button Allows a Person to Privately Message someone on their friends list on Facebook. Yes, you really want this feature.

Layout Should be Stardard

Width: Change the width ALWAYS 450 px is too large for anything. I typically work with a 75 to 100 nothing bigger than this. It gives a nice size but not too large for people. 

Show Faces: No! Definitely do not need this feature.

Now click on Get Code!

You are going to see something like this. Now Don't Get Overwhelmed the rest of this is very easy!





Now for Weebly We will grab the Custom HTML found at the top in the Elements

For Blogger We will add a Html Gadget and embed the code there.


Once you have either one of these set up . Place the first code first, and then the second code. 

All you need to do is click in the #1 Top box Right Click and Click Copy or Control/Command C 

Paste by right clicking and hitting Paste or Control/Command V

Do the same for the 2nd Part of the code. 

You must have both to work correctly.

This is All you have to do now your finished this this one. Add more if you like. 





To receive regular updates on new blog posts please follow this blog either by google or by e-mail. 

Want to be the Next Featured Artist??? Contact us at info@ahsleychapmandesigns.com

For more information. 





2 comments:

  1. Thanks, I am going to have to study this to see if I can figure this out. I'm new at all of this. I appreciate the help!!

    http://agutandabutt.blogspot.com/

    ReplyDelete
    Replies
    1. Betty is there s a specific aspect your having a problem with? Perhaps, I could walk you through it a little better.

      Delete