Recent site activity
WEB PUBLISHING‎ > ‎SBI‎ > ‎

Face It

SBI Built-In Module: Face It!



 
Note: Socialize It! must be activated first before being able to use Face It!


Face It! allows:
  • visitors to Like your page OR your (entire) site
  • your visitors to add comments (to bottom of those pages)
  • you to add th og:image meta tag to the head section of your pages.
    This is the (thumbnail 180x180px) image that will appear on the wall of anyone who Likes your site or page AND leaves a comment with that Like.







Using Face It! for Uploader Your Own HTML

(ref: Face It! Like Buttons - from SBI Help)
I. Create your Like buttons
II. Add Like buttons to Face It!





I. Create your Facebook Like Buttons

Facebook Social Plugin Like Button link
Note:
The FB Like Buttons are available in various layouts (sizes).  You will create one layout/size type at a time, get code and then create another if you want different sized Like buttons for different locations on your pages.

2) In the left column > click on "Like Button" text link 

3) You should now be in the "Like Button" page where you can create and customize your Like Button


URL to Like: enter your site's full domain name
e.g. http://www.jewelrymaking-beads-library.com/  

Send Button: optional.  Enables someone to send via email. (I unchecked).



fb like button get code


Layout Style:

There are 3 styles you can choose from - different sizes.  Depending on the layout you choose, SBI will only allow them to be placed at certain page locations.
  • standard - only top or bottom (just above Socialize It! bar) of center content column. To be used if you want to have Page likes (cf. Site likes)

  • button_count - only at top or bottom (just above Socialize It! bar) of center content column OR top or bottom of third (right) column.  Suitable for Site likes.

  • box_count - at top or bottom of ANY of the 3 columns (left, center, right) of your SBI pages.  Suitable for Site likes.
Note: 
It is better to only have Site like buttons if you are just starting out and/or have low traffic.
You can always add a Standard FB Like button for your content pages later.


Width:
  • for standard - 450px
  • for button_count or box_count - 
    - if block-built pages, 130 px for navigation (left) col & 225px for right col
    - if custom CSS 3-column template - 180 px (for left and right cols)

SideNote:
I am using the box_count layout -  At above and below my NavBar, for SITE like; no "Send".
And the standard layout - at bottom of Center Content Column, for PAGE likes, followed by Commenting.


Show Faces
Recommended - uncheck  (normally too long)

The rest of the options are pretty self-explanatory. (I chose Verdana for the font)
When done, click Get Code

In the pop-up box, click XFBML

Copy code from box 1 > paste into Notepad
Copy code from box 3 > paste into Notepad, immediately after the above


Facebook Like Button - copy code


You now have the code for one (layout) type of FB Like button.
Repeat this process for each (layout) type Like button you want.  You can have up to 3 (layout) types.


II. Adding your Like Buttons to SBI's Face It!

SBI Site Central > All Pages > Face It!

You will see that FaceIt allows you to have 3 FB Like buttons.
When you activate each, you will see a text box for each where you can paste the code of the FB Like buttons.

SBI FaceIt location selection


Activate a button. Paste the like button code from your Notepad.  

Depending on which like-layout you are pasting in the text box, the Location drop-down box will change.
e.g. if you paste in the code for a Standard (long) Like button, then the only page locations SBI allows is
  • Top of Content OR
  • Bottom of Content

Select the location.
Select if the Like button is to like the Site or like the Page.


SBI recommends using a Standard (long) FB Like button at the Bottom of Content Column for PAGE (not SITE)likes.




Repeat process for each of the Buttons you want to use, using the relevant code you got when Creating your Facebook Like buttons (as per above).

After you finish with your buttons in FaceIt, we move on to ..

Add Facebook Commenting to Your Pages

Facebook Social Plugin Comments
If you want to allow visitors to leave comments, then we need to go over to Facebook Social Plugins Page again.

NOTE: Leave your SBI FaceIt page open.  We will come back to this when we have the code.


Again in the left column, click on the Comments text link.





You will then be in the "Comments" page where you can set this up.

Facebook Social Plugins - customise Comments
URL to comment on:

As before, enter your site's full domain name
e.g. http://www.jewelrymaking-beads-library.com/  

(SBI will automatically convert this to a PAGE url when FaceIt's commenting is enabled)


Number of posts:  start with 5.  You can change later.  This is global - affects all your pages.

Width: use 450 px (as this is most likely to be in the center Content column)

Color Scheme: (I chose light)

Then Get Code

A pop-up window appears.  Click XFBML

As with the code for the Like buttons above, copy the code from box 1 and box 3.  Paste into Notepad, the latter immediately after the former.

------------------
Now go back to your SBI Site Central > All Pages > FaceIt (which should still be left open)
SBI FaceIt - set up Commenting

Under the Add Facebook Commenting to Your Pages box:
  • Activate = Yes

  • You can edit the intro text (basic html allowed)

  • In next box, paste the code you just got (from your Notepad)

  • Where: either All Pages or Home
    (I chose All Pages)

The next box is optional but RECOMMENDED (so you can moderate the comments and get rid of trash/spam etc.)

In the next box ("Add Facebook AppID ..") you can either:
  • enter your AppID  (*Recommended - can moderate all the comments at one place)  
    or


  • your Facebook account personal (not your FB page) Facebook ID.
    Your Facebook ID is either your FB username (if you have more than 25 friends) or profile ID (a string of digits)
    (can moderate comments page by page)



* AppID

Using your AppID is recommended.  This method allows you to moderate all the comments at one place rather than having to do it page by page.  But for this, you need to become a Facebook Developer with Facebook and then Create an App on Facebook.

Once you are a Facebook Developer, then we can create our Comment Moderation App.

(You should be logged into your personal facebook and at the Facebook Developers > Apps page)

Create New App
1) Click on "+Create New App" (top right)
2) a popup window appears
Facebook Developer - New App popup

3) App Display Name:
give a recognizable name (and designate site if you are going to use for more than one site)
e.g. jem Comment Mod

4) App Namespace:
just ignore

5) Tick the "I agree ..."

6) Continue

7) enter Security Check characters > Submit

8) In the next page (Apps > jem Comment Mod > Basic), for
App Domain: your domain name (without the http://www.)
e.g. jewelrymaking-beads-library.com

9) Select the Category and sub-Category (if applicable)

10) Under Select how your app integrates with Facebook, 
select Website and enter your site URL (with http://www.)

Facebook Developer - Comment app


11) Save Changes

12) copy the AppID and the App Secret and keep it in a safe place.

13) go to http://developers.facebook.com/tools/comments to review/edit Moderation Settings

14) click on your new app (left hand column) > Settings
Facebook Developers - Comments Moderation Tool

Facebook Developer - Edit Comment Settings
15) A Edit Comment Settings window will pop up.

Moderators: (add name/username of an additional someone who will help you moderate the comments.  You don't need to add yourself - as the developer, you already are a moderator)

Moderaton Mode: leave as default unless you need tight control

Blacklisted words: select "Standard Facebook restrictions"

(any comment that contains words within the restrictions will be always be held in moderation for your approval before it is visible to public)

Other login providers: Tick.  This will allow visitors with other logins (e.g. Yahoo!, AOL, Hotmail) to leave comments on your site.

Grammar filter: leave as default (Ticked)

Comments Composer: leave as default (collapse)

16) Save

17) Back to SBI: take your AppID and paste into your
SBI Site Central > All Pages > FaceIt > Add Facebook Commenting to your pages > Add a Facebook AppId .. (text box)

Note: Check for accuracy and that there are no trailing spaces.


18) Final part of setting up FaceIt 
- Upload your Facebook Thumbnail image

This is to be a 180x180px image - representative of your SBI site. This is what will show on user's wall when they comment at your SBI site.

19) to save, click "FaceIt" button 



Tip:
In future to make changes to your Comment App that you created, return to https://developers.facebook.com/apps > Edit Settings

Important Note

(directly from SBI - 
http://help.sitesell.com/face-it-thumbnail.html)

If you change your thumbnail image, the quickest way to let Facebook know about the new image is to go to...

Paste in a URL from one of your pages (copy it from the address bar of your browser). Then click on the Debug button.

That forces Facebook to visit that page, picking up your new thumbnail image, which it will then apply to all of your pages.



For Upload Your Own HTML method


SBI Instructions of uploader:

NOTE: If you upload HTML pages and want to add the Like buttons to your pages, you must do that yourself in the HTML. Simply add the appropriate ***FACEBOOK-LIKE1*** ***FACEBOOK-LIKE2*** and/or ***FACEBOOK-LIKE3*** tag(s) to your HTML files or to SBI! Include files.

If you want to add the Commenting feature to your pages, add the ***FACEBOOK-COMMENT*** tag to your HTML files or to an SBI! Include file.




SelfNote:
My FaceIt fb buttons are as follows:
Button 1: box_count layout, above NavBar - Site like 
      => ***FACEBOOK-LIKE1*** into z-top-nav.shtml
Button 2: box_count layout, below NavBar - Site like 
      => ***FACEBOOK-LIKE2*** into z-bottom-nav.shtml
Button 3: standard layout, bottom of center Content column - Page like 
      => ***FACEBOOK-LIKE3*** into socialize-it.shtml
Commenting Placement: (as SBI recommends to be above ***SOCIALIZEIT*** if using 3-col style template)
      => ***FACEBOOK-COMMENT*** into socialize-it.shtml (I put Commenting below ***FACEBOOK-LIKE3***)

Then Quick Upload the affected include files.


N.B.: Include files chosen based on this visual placement of includes


To Moderate Comments

Now that we have built a Facebook app ("jem Comments Mod"), to moderate all comments, you can just go directly to





Article written on 2nd February 2012


References:

  • Return to 
  • Back to top of
 

Comments