Adding social plugins is essential for your WordPress website.

This will make your more visible and will engage your followers further.

Just follow this simple tutorial to make it happen!

Create a Facebook App ID for Website/Business Use

If you own a business, you probably want to get a developer’s app id so you can take advantage of added functionality, features, and tools. You don’t have to be a programmer or build an application for the public. You can use these features only for your own websites, if you like. In this tutorial, we will show you how to get an app id that will allow you greater functionality when adding social plugins and much more.

You will need:

A Facebook Account, must be verified
A Facebook Page (optional)
HTML Website or self hosted WordPress installed
HTML editor (only for HTML pages)

Note: If your site was created using html pages, you will need access to a page or html/text editor such as CoffeeCup HTML editor or Notepad ++ (Microsoft OS). If you are using WordPress, you will need a widget ready theme.

STEP 1: APPLY FOR AN APP ID

Click here to get your app id. If you are not already signed in, you will be asked to do so. When applying, you will need to associate the app id with a website. So, in this case, fill in the website name and URL where you will use your social plugins. After you add the first one, you will be able to add more websites later.

If you forget to add the ending “/” on your site url, you’ll see a friendly reminder like this:

Just add your info in again and click the submit button.

You will be taken to a captcha image where you will need to enter 2 sets of letters, with a space between the words. Click the submit button.

You have completed your app id application and will now see your basic information.

STEP 2: EDIT YOUR APPLICATION SETTINGS.

When you click the Developer Dashboard link in the above image, you will be taken to your dashboard, where you see a list of your apps, or in this case your websites. If you add multiple apps or websites, the top site will always show on this page until you click on a different tab in the list on left side.

You’ll also see a set of dashboard tools where you can edit your app settings. Click on the “Edit Settings” link.

You will be taken to the “About” tab where you will need to edit the settings to meet your needs. Below you can see areas you may want to change.

We changed the User Support Address to show the support URL, added a privacy policy URL, and a “terms of service” URL.

If you have an assistant or a web master, you may want to add them to your list of Facebook friends. Once that is done, you can add him or her as a user with a certain role. Click on the “Save Changes” button after making edits.

You will be taken back to the main dashboard menu. Click to edit settings again and go to the “Website” tab in the left sidebar.

On this page, you will see info about your website. Add your domain in the “Site Domain” box and save changes.

Any time you’d like to add more websites, simply click the button in the upper right corner.

Now you’re ready to start using your app id with social plugins and in many other ways.

[divider]

Add a Facebook Comments Box to any Web Page

In this tutorial, we will show you how to add a Facebook “comment box” to html page and WordPress. We will be using the XFBML code and the App ID in this tutorial.

You will need:

A Facebook Account, must be verified
HTML Website or self hosted WordPress, installed
Access to Theme Templates or Widgets (WordPress only)
HTML editor (only for HTML pages)
Application ID (Get your app id here.)

STEP 1: DECIDE WHERE TO PUT THE COMMENTS BOX.

Before you create your code, you’ll need to decide where you want the comments box. Although you can adjust the width of the box, it’s better to keep it out of narrow sidebars. In fact, for optimum viewing, the minimum suggested box width is 350 pixels. Even at this size, the text and images can be quite cramped. The best placement is just after a post, rather in a sidebar. The app below is set at 300 pixels and you can see how 400 pixels or more would be better.

STEP 2: LOG IN TO YOUR FACEBOOK ACCOUNT.

If you haven’t already applied for your Apps Id, you should do it now. Here is the link where you can login and apply at the same time. You will see this form.

STEP 3: GET YOUR APPS ID

After you have set up your developer apps, click on the “My Apps” link at the top of the developer section.

On the next page, your apps will show in a list on the right. Click the appropriate app link. (If you will just use these apps for your site, you could just name the apps the same as your website.) On the next page, copy and paste the application id into a text file for later use.

STEP 4: CREATE YOUR BOX CODE

Once you have done that, you’ll need to go to the comment box page. Here you will add the URL where your comment will be added, the number of comments you want to see and the width of the box. We set ours at 500 pixels to go just after the content.

Click on the “Get Code” button. Highlight and copy the XFBML code. Paste it in a text file for use later.

STEP 5: EDIT YOUR XFBML CODE

When you created the code, it may have automatically added your App ID. If you only have one, you’re pretty safe. However, if you have added more than one app in your account, you will need to make sure the generated App ID is correct. So, just to be safe, use the ID you added to the file and paste it over any App ID that is showing. Make sure that you don’t add any extra spaces, especially after the equal mark and the ampersand.

STEP 6: COPY YOUR MODERATION TAGS

One of the great things about having an App ID is that it allows you to add and access additional functionality. For example since you have your ID, you can enable comment moderation by adding two meta tags. Add these tags to your text file.

Instead of typing these from here, copy and paste from the comments box plugin page.

The first tag allows you to add yourself as an admin as well as add others such as service providers. To add multiple people, just separate each ID by a comma (no spaces.)

The second tag allows you to use your App ID and add administrators from within your application settings, where you obtained your ID.

STEP 7: ADD YOUR META TAGS TO YOUR SITE

First let’s add the two meta tags. Open your web page in an HTML editor. If you are using WordPress, you will go to the theme file or a configuration area specific to your theme. Insert the meta tags just after the existing meta tags and before the end header tag.

STEP 8: ADD YOUR COMMENT BOX CODE TO YOUR SITE

In your theme template or html page, navigate to the area just below the post or content. Insert your comments box code.

Once your code is installed, ask a friend to make a comment to test things. If it is installed correctly, you should see a small settings link in the top right corner of the app. Click the link to open. You should see a similar panel as the one below.

[divider]

Add the Facebook Facepile Plugin to any Web Page

Have you been to someone’s site and seen a section with your friends’ Facebook profile pictures? The Facepile plugin may have been responsible. In this tutorial, we will show you how to add the “friends like” portion of this social plugin to html pages and in WordPress

You will need:

A Facebook Account
HTML Website or self hosted WordPress, installed
HTML editor (only for HTML pages)
Access to Theme Templates or Widgets (WordPress only)
Active App ID (optional)

Note: If your site uses html pages, you’ll need an html/text editor such as CoffeeCup HTML editor or Notepad ++ (Microsoft OS). For WordPress, you will need a widget ready theme.

STEP 1: DECIDE WHERE TO PUT THE FACEPILE IMAGES.

Facepile is a versatile social plugin that you can add almost anywhere on your site. Depending on how many images you want to show, the best placement option may be in your sidebar. To make things easier, we’ll show you to display your “Facebook Page likes” or “website likes”.

STEP 2: CREATE YOUR FACEPILE CODE.

Begin by going to the Facepile plugin page. In the code generator, you will create your “likes” code. You may choose to enter a Facebook page or a page on your website.

For a Facebook page:

Add the Facebook page URL
Add the width of the plugin
Add the number of rows
Click the “Get Code” button

Note: Facebook pages that don’t have a custom page URL, as seen above, will look something like http://facebook.com/pages/your-page-name/numbers.

For a website page:

Add the website page URL
Add the width of the plugin
Add the number of rows
Click the “Get Code” button

Note: If you will be adding the Facepile plugin to the sidebar, you may want to increase the number of rows. When adding Facepile to the main content area of your page, for instance under a post, you may want to increase the width and keep the number of rows low.

Copy and paste your code choice into a text file for later use. Both codes produce the same results – the images of the viewer’s friends who have liked your page. Click “Okay.”

If you are a bit more tech savvy and already have in place the additional codes required, you may choose to show the viewer’s friends who have signed up for or connected with your page by using your app id and this example code. Copy and paste the code of your choice into a text file for later use.

Note: According to the Facepile note, this parameter is only available in the iframe version of the Facepile. If you are using the XFBML version of the plugin, specify your application id when you initialize the JavaScript library.

STEP 3: ADD THE CODE TO YOUR HTML PAGE OR SIDEBAR.

In our first example, we add the iframe code to an html page after a post. Notice that we have increased the plugin’s width from 300 pixels to 500 pixels to coordinate with the body’s larger width. We have also added a break before and after to allow for spacing.

To do this, simply open your page in the HTML editor and scroll to the area below your content. Insert the iframe code. Save your page and upload it to your website.

Make sure you view the website and test the plugin to make sure the it’s working correctly.

STEP 4: ADD THE FACEPILE CODE TO YOUR WORDPRESS SIDEBAR

To add the code to your WordPress sidebar, you will need to add the iframe code into a widget or in the theme. We will be adding it to a widget. Simply login to your dashboard and select “Widgets” found in the Appearance section of your admin toolbar.

Open your sidebar on the right and drag the text or php widget into the appropriate area. Open the new widget in the sidebar and add your iframe code.

Click on the “Save” button. Check your Facepile plugin by opening a page in a new tab. When seeing the plugin from a viewer’s perspective, you may need to alter the sidebar width or row number. Just go back to your widget and edit the width (in two places) and/or the number of rows. If it appears correctly, click “Save”, “Close”, and log out.

Now when viewers see their friends “like” your page, they will be tempted to “like” it too!

[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]