Blogger Tips and Design Portfolio from Lightway Web Services, Inc.
HomeBlogger TipsDesign TipsWeb HostingDomain Name RegistrationDesign PortfolioAbout This BlogContact

Tuesday, April 3, 2012

Adding the Facebook Social Plugin

With a couple easy steps, it is possible to add one of the many Facebook plug-ins to your blog or website.

1. The first step is to visit the Facebook Developer page.  There are many different options to choose from depending on what exactly you want to display on your blog from Facebook.  Once you choose the type of plug-in, you will need to customize the plug-in.

2. Facebook will also give many options of size, button names, border colors, etc...  These settings can be adjusted later if necessary.

3. After the plug-in has been chosen and customized, click the "Get Code" button.  This will bring up a window that provides the proper code to complete the installation your blog or website.

Installing the code

To install the code provided by Facebook, you'll first need to locate the tag.  The top code needs to be installed in it's entirety just below the body tag.  The second box of code will need to be pasted in the section of the website where the plug-in is to be displayed.  If the code, is being used for Blogger, you'll need to select "Layout", and then "Add a Gadget".  The proper Gadget for this code is HTML/Javascript.  Paste the code, save your work, and publish the updated page, and your Facebook plug-in should show according to the settings you chose.

Going a step further....

The Facebook plug-in can be customized more by using CSS. For example, we added a simple background color to our Facebook plug-in by adding the following code within our DIV tags.

style="background:#EDEDED;"

This code gave our plug-in a different colored background and you can add this in addition to other styles to enhance the plug-in to your liking.
Posted by Brian Kraft at 3:07 PM
Labels: BlogTips, DesignTips

1 comment:

Mommy of KraftyGang kids said...

neat! You need to turn off the CODE thing that you have to type in!! ANNNNNOYING!

April 4, 2012 at 10:37 AM

Post a Comment

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)

Popular Posts

  • Custom Navigation Tabs for Blogger Menu
  • Using the "Float" Command in CSS
  • Adding the Facebook Social Plugin
  • Adjusting Blog Widths
  • Using a Custom Domain or Subdomain for Blogger address
  • Creating the Blog Header
  • Ever Care Pool and Spa
  • Creating a Favicon
  • Oxnard Lemon Company
  • Coastal California Blueberry Farms, LLC.

Facebook

Followers

Subscribe To Blog

Posts
Atom
Posts
Comments
Atom
Comments