SoloCodigo

INSTALLATION

  1. Unpack the FacebookCommenters archive.
  2. Copy the contents of FacebookCommenters/mt-static into /path/to/mt/mt-static/
  3. Copy the contents of FacebookCommenters/plugins into /path/to/mt/plugins/
  4. Login to your Movable Type Dashboard which will install the plugin.
  5. Navigate to the Plugin Settings on the blog you wish to integrate Facebook Connect.
  6. Create a Facebook Application to represent your site.
   6a. Go to http://www.facebook.com/developers/editapp.php to create a new application.
   6b. Enter a name for your application in the Application Name field.
   6c. Click the Optional Fields link to see more entry fields.
   6d. Keep all of the defaults, except enter a Callback URL. This URL should point to
       the top-level directory of the site which will be implementing Facebook Connect
       (this is usually your domain, e.g. http://www.example.com, but could also be a
       subdirectory).
   6e. You should include a logo that appears on the Facebook Connect dialog. Next to
       Facebook Connect Logo, click Change your Facebook Connect logo and browse to an
       image file. The logo can be up to 99 pixels wide by 22 pixels tall, and must be
       in JPG, GIF, or PNG format.
   6f. Click Submit to save your changes.
   6g. Take note of the API Key and Secret as you'll need these shortly.
  7. Within your blog's Plugin Settings, input the API Key and Secret from Facebook.
  8. Edit your templates to include Facebook Connect tags and customize the display.
  9. Enable "Facebook" as a Registration Authentication Method via
     Preferences -> Registration and ensure that User Registration is allowed.
  10. Republish your blog for all of the changes to take effect.


TEMPLATE CODE

To add basic support for Facebook Connect, place the following tag in your Header template
before the closing "head" tag.  This will enable Facebook Connect on your blog, but will not
customize the display of your comments.

  <mt:GreetFacebookCommenters>

To display a Facebook user's profile photo next to their comment, you will have to use a
Comment Detail template which includes userpics.  The following template should work in most
cases and
http://www.movabletype.org/documentatio ... rpics.html is a
useful guide to adding userpics to your templates.

Código: Text

1.   <div class="comment"<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
2.       <div class="inner">
3.           <div class="comment-header">
4.               <div class="user-pic<mt:if tag="CommenterAuthType" eq="Facebook"> comment-fb-<$MTCommenterUsername></mt:if>">
5.  
6.               <mt:if tag="CommenterAuthType" eq="Facebook">
7.                   <a href="http://www.facebook.com/profile.php?id=<$MTCommenterUsername>" class="auth-icon"><img src="<$MTCommenterAuthIconURL size="logo_small"$>" alt="<$mt:CommenterAuthType$>"/></a>
8.                   <fb:profile-pic uid="<$MTCommenterUsername>" size="square" linked="true"><img src="http://static.ak.connect.facebook.com/pics/q_default.gif" /></fb:profile-pic>
9.  
10.               <mt:else>
11.                   <mt:if tag="CommenterAuthIconURL">
12.                       <a href="<$MTCommenterURL>" class="auth-icon"><img src="<$MTCommenterAuthIconURL size="logo_small"$>" alt="<$mt:CommenterAuthType$>"/></a>
13.                   </mt:if>
14.                   <img src="<$MTStaticWebPath>images/default-userpic-50.jpg" />
15.               </mt:if>
16.               </div>
17.  
18.               <div class="asset-meta">
19.                   <span class="byline">
20.                   <mt:if tag="CommenterAuthType" eq="Facebook">
21.                       By <span class="vcard author"><fb:name uid="<$MTCommenterUsername>" linked="true" useyou="false"><a href="http://www.facebook.com/profile.php?id=<$MTCommenterUsername>"><$MTCommenterName></a></fb:name></span> on <a href="#comment-<$MTCommentID$>"><abbr class="published" title="<$MTCommentDate format_name="iso8601"$>"><$MTCommentDate$></abbr></a></span>
22.  
23.                 <mt:else>
24.                     By <span class="vcard author"><mt:if tag="CommenterURL"><a href="<mt:CommenterURL>"><$MTCommentAuthor default_name="Anonymous" $></a><mt:else><mt:CommentAuthorLink default_name="Anonymous" show_email="0"></mt:if></span><MTIfNonEmpty tag="CommentAuthorIdentity"><$MTCommentAuthorIdentity$></MTIfNonEmpty> on <a href="#comment-<$MTCommentID$>"><abbr class="published" title="<$MTCommentDate format_name="iso8601"$>"><$MTCommentDate$></abbr></a></span>
25.                 </mt:if>
26.                   </span>
27.               </div>
28.           </div>
29.           <div class="comment-content">
30.               <$MTCommentBody$>
31.           </div>
32.       </div>
33.   </div>
34.  
35.  

STYLES

While you don't need to customize any of the CSS styles, there are many CSS classes which
can be tweaked to adjust the display of comments.

.comment-friend {
  background-color: #c3cddf;
}