Not a developer? Go to MovableType.com

Plugin and Theme Directory

Facebook Connect Commenters v1.2.1

By Six Apart
Posted December 16, 2008, in Communities.

Details

The Facebook Connect Commenters plugin for Movable Type allows commenters to login to your blog using their Facebook account. It makes use of the Facebook Connect APIs to provide a rich user experience. Commenters are able to automatically bring their name, profile photo, and friends with them when commenting on a blog running this plugin.

All of this profile information respects a user's privacy settings from Facebook; if they only share their profile photo with their friends then it won't be displayed publicly on a blog. Once a Facebook user has logged in, comments left from other Facebook users will display additional data. Profile photos and names that were hidden publicly will now be displayed assuming the logged in user is able to see them on Facebook.com. Additionally, comments left from friends of the user on Facebook will be highlighted.

After leaving a comment, the Facebook user will be given the option to share with their friends on Facebook that they commented on the blog post. This in turn should help others discover your blog.

PLEASE NOTE: Facebook Connect currently requires pre-approval in order for you to launch your blog integration. As long as you are using the standard blog plugin, this should be painless and quick - it should take just a few days at the most.

Check here to see if Facebook Connect is available for launch with out approval: http://wiki.developers.facebook.com/index.php/Facebook_Connect_Launch_Plans

If approval is required, go here to submit your blog with Facebook Connect: http://www.facebook.com/connect/submit_site.php

Prerequisites

  • JSON::XS 2.0 or greater.
  • jQuery 1.2.x (bundled with MT 4.25 or greater)

The Facebook Commenters plugin ships with all of the other external libraries you should need to run it.

Installation

  1. If you are installing this plugin on Movable Type 4.1, then you will need to download, install and link in your templates the jQuery javascript framework. This can be done by adding the following in between <head> and </head> of all of your templates/pages.

    Note: if you are linking directly to Google Code as the above example does, then you will not need to download jQuery separately.

  2. Unpack the FacebookCommenters archive.

  3. Copy the contents of FacebookCommenters/mt-static into /path/to/mt/mt-static/

  4. Copy the contents of FacebookCommenters/plugins into /path/to/mt/plugins/

  5. Login to your Movable Type Dashboard which will install the plugin.

  6. Navigate to the Plugin Settings on the blog you wish to integrate Facebook Connect.

  7. Create a Facebook Application to represent your site.

    1. Go to http://www.facebook.com/developers/editapp.php to create a new application.
    2. Enter a name for your application in the Application Name field.
    3. Click the Optional Fields link to see more entry fields.
    4. 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).
    5. 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.
    6. Click Submit to save your changes.
    7. Take note of the API Key and Secret as you'll need these shortly.
  8. Within your blog's Plugin Settings, input the API Key and Secret from Facebook.

  9. Edit your templates to include Facebook Connect tags and customize the display.

  10. Enable "Facebook" as a Registration Authentication Method via Preferences -> Registration and ensure that User Registration is allowed.

  11. Republish your blog for all of the changes to take effect.

Template Code

Embedding the Javascript into the Header

To add basic support for Facebook Connect, you will need to add a non-trivial amount of Javascript into the HTML <head> of your web page. You have two choices in how to do this: the first is quick and easy and what most people should do, the second is designed for people who need to specify javascript manually.

Using the GreetFacebookCommenters Slug (recommended)

A single template tag can be added to the HTML <head> of your web site. This one simple tag will output all the javascript the average Movable Type user will need. It is designed to work with Movable Type's default javascript.

<$mt:GreetFacebookCommenters$>

Hand Coding the Javascript

Some users who prefer to hand edit their javascript code, or integrate with another toolkit like jQuery can use some derivative of the following javascript code fragment.

<script type="text/javascript">
/* <![CDATA[ */
window.api_key = '<$mt:FacebookApplicationID$>';
window.xd_receiver_url = '<$mt:StaticWebPath$>plugins/FacebookCommenters/xd_receiver.html';
function facebook_send_story() {
  send_story('<$mt:EntryPermalink$>','<$mt:EntryTitle encode_js="1"$>','<$mt:FacebookStoryTemplateID$>');
}
$(document).ready( function () {
  if ( window.location.hash && window.location.hash.match( /^#_logout/ ) ) {
    facebook_logout();
    return;
  }
  apply_commenter_data();
});
/* ]]> */
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript" src="<$mt:StaticWebPath$>plugins/FacebookCommenters/fbconnect.js"></script>
<script type="text/javascript" src="<$mt:StaticWebPath$>plugins/FacebookCommenters/signface.js"></script>

Displaying Facebook Profile Userpics

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/documentation/designer/publishing-comments-with-userpics.html is a useful guide to adding userpics to your templates.

<div class="comment"<mt:IfArchiveTypeEnabled archive_type="Individual"> id="comment-<$mt:CommentID$>"</mt:IfArchiveTypeEnabled>>
    <div class="inner">
        <div class="comment-header">
            <div class="user-pic<mt:If tag="CommenterAuthType" eq="Facebook"> comment-fb-<$mt:CommenterUsername$></mt:If>">

            <mt:If tag="CommenterAuthType" eq="Facebook">
                <a href="http://www.facebook.com/profile.php?id=<$mt:CommenterUsername$>" class="auth-icon"><img src="<$mt:CommenterAuthIconURL size="logo_small"$>" alt="<$mt:CommenterAuthType$>"/></a>
                <fb:profile-pic uid="<$mt:CommenterUsername$>" size="square" linked="true"><img src="http://static.ak.connect.facebook.com/pics/q_default.gif" /></fb:profile-pic>

            <mt:Else>
                <mt:If tag="CommenterAuthIconURL">
                    <a href="<$mt:CommenterURL$>" class="auth-icon"><img src="<$mt:CommenterAuthIconURL size="logo_small"$>" alt="<$mt:CommenterAuthType$>"/></a>
                </mt:If>
                <img src="<$mt:StaticWebPath$>images/default-userpic-50.jpg" />
            </mt:If>
            </div>

            <div class="asset-meta">
                <span class="byline">
                <mt:If tag="CommenterAuthType" eq="Facebook">
                    By <span class="vcard author"><fb:name uid="<$mt:CommenterUsername$>" linked="true" useyou="false"><a href="http://www.facebook.com/profile.php?id=<$mt:CommenterUsername$>"><$mt:CommenterName$></a></fb:name></span> on <a href="#comment-<$mt:CommentID$>"><abbr class="published" title="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></abbr></a></span>

                <mt:Else>
                    By <span class="vcard author"><mt:If tag="CommenterURL"><a href="<$mt:CommenterURL$>"><$mt:CommentAuthor default_name="Anonymous" $></a><mt:Else><$mt:CommentAuthorLink default_name="Anonymous" show_email="0"$></mt:If></span><mt:IfNonEmpty tag="CommentAuthorIdentity"><$mt:CommentAuthorIdentity$></mt:IfNonEmpty> on <a href="#comment-<$mt:CommentID$>"><abbr class="published" title="<$mt:CommentDate format_name="iso8601"$>"><$mt:CommentDate$></abbr></a></span>
                </mt:If>
                </span>
            </div>
        </div>
        <div class="comment-content">
            <$mt:CommentBody$>
        </div>
    </div>
</div>

The plugin's root directory also has an example file comment_detail.mtml.example, which is the default Comment Detail template module of the Community Blog template set included in MT 4.23 that also has the functionality to add Facebook userpics described above. If you are using the default template module without any changes, you can overwrite /path/to/mt/addons/Community.pack/templates/blog/comment_detail.mtml with this file, and refresh the template from the Template Listing screen.

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;
}

Requirements

On Movable Type 4.3x, you must upgrade the HTTP::Message module to the latest version available.

Compatibility

Movable Type versions: 4.35.1

License

Perl Artistic


Back

44 Comments

Johny on June 13, 2012, 1:11 p.m. Reply

Six Apart, thank’s for you efforts and such a great plugin. But to my mind “Disquss” commenting system is much more functionally and appreciate…

Anyway thank’s! I like but use Disquss)

sizegenetics on June 14, 2012, 5:01 a.m. Reply

Now this is a good plugin, most of my readers have a facebook account so this is perfect. Makes it easier for them anyway. Thanks dude.

mick on June 25, 2012, 8:19 a.m. Reply

Excellently written article,This is a good article which offers some helpful information for me,i will read more.I hope we can learn from each other. christian louboutin

Rybalka on June 27, 2012, 5:11 a.m. Reply

Hey, Mick I guess you are wrong with your speech here. It’s the FB plugin thread.

Manolo on June 27, 2012, 3:13 p.m. Reply

Hi Guys. I downloaded MT 5.14 and the Facebook Commenters plugin.pl file is missing. It doe not show up in Github either. I tried copying over my old plugin.pl file version 1.2 but it is not working. Any ideas?

Thanks.

Manuel

Jonatan on July 9, 2012, 7:41 a.m. Reply

It is a great plugin which helps to invite many new readers to your blog. Thanks for it.

George Ebdon on July 11, 2012, 10:27 p.m. Reply

If I have understand correctly by this plugin on every article of my blog all comments will go to the user’s facebook wall. So, it will be readable for their friends. Right?

classified ads on July 16, 2012, 7:37 a.m. Reply

That good plugIn but i’m do not understood 100%. Let me try first!

lewis lau on July 19, 2012, 8:44 p.m. Reply

I had tried posting this once but somehow it is not showing up on this page. I installed the plugins, created a Facebook app, and pointed the plugin to the app ID and secret key.

Then I am lost at #8, where it tells me to “Edit your templates to include Facebook Connect tags and customize the display.”

What tag should I include, and to which template specifically?

I am also lost on #9, as I can not find anywhere in my MT5.01 to “Enable “Facebook” as a Registration Authentication Method via Preferences -> Registration and ensure that User Registration is allowed.”

I have added under the section of MAIN INDEX - is this correct?

Sorry for such an amateurish question. Hope someone call help me here.

Lewis Lau lewislau.com

emdro

emdro on April 1, 2016, 9:11 a.m. Reply

Best plugin ever for facebook. Great job ! Christophe http://www.emdro.com

tubidymp3

tubidymp3 on May 18, 2016, 2:41 p.m. Reply

Great job, I am also waiting if you can build a plugin to have functionality of twitter comments or google+

newstart028

newstart028 on July 6, 2016, 7:03 a.m. Reply

TagLastUpdated, and so on. 192.168.1.1

www.viejasfollando.xxx

www.viejasfollando.xxx on August 11, 2016, 2:29 p.m. Reply

I love this plugin!

rahulkhanna

rahulkhanna on September 28, 2016, 10:01 a.m. Reply

navratri wishes

navratri images

dandiya songs

Angelina

Angelina on October 1, 2016, 12:42 p.m. Reply

Discover affordableMatlab help online plus any statistical assignment you need help with online

gista januri

gista januri on November 4, 2016, 9:54 a.m. Reply

useful plugin that can be installed in the cara mengobati gatal pada bibir vagina and obat keputihan gatal

Andrew Steven

Andrew Steven on November 21, 2016, 3:46 p.m. Reply

Thank you for this particular website. I study your current document and also I really like this. I write about with my colleagues and the man is rather satisfied. Carry on and post, I bookmark your web site and also I visit all the time. In the event you need look into my website: free paypal money

Andre Turnes

Andre Turnes on December 20, 2016, 10:53 a.m. Reply

thanks for your details information 7th february valentine week

Andrew Steven

Andrew Steven on January 26, 2017, 8:31 a.m. Reply

I enjoy many those posting! I study many post is indeed great. I found a lot of our text using Yahoo search. Take a look at my websites is perfect like you: ">http://www.addpaypalmoney.com/”> add money to paypal , I work a lot to make the following article. Once again be thankful to you and stay with generate! Success!

Andrew Steven

Andrew Steven on February 15, 2017, 9:15 a.m. Reply

borderlands 2 hacks pc is a top hack. Some things about this: One additional great thing on our creation is the anti-ban platform , it really is incorporated into software program and is vitally important when you can implement our hack day by day ! Each time should you want accessories or possibly another thing may easily comeback and even download and read when you remove in the telephone or PC . Sure every one our appk is operating at PC similar to however is yet performing PC , Mobile computing devices ,Tablets , Mac , Windows or maybe Linux . Many equipment .

luckypatcherapk

luckypatcherapk on February 24, 2017, 5:30 p.m. Reply

Are there any kind of usage instances of this anywhere? I have numerous MT3 installments that utilize lots of appropriate fields linking in between access. I wish to see some use instances prior to plunging into the upgrade. Particularly, I want to see just how personalized fields from one blog(Lucky Patcher App Download for iPhone) site can be referenced from one blog to one more using a customized area link. It’s not clear that this is also possible.

hotstarapp

hotstarapp on February 28, 2017, 10:50 a.m. Reply

thanks for this wonderful tool. I have used it on my sites. https://wp.me/p6JfMk-C9 https://wp.me/p6JfMk-C9 https://wp.me/p6JfMk-C9 https://wp.me/p6JfMk-lU https://wp.me/p6JfMk-lU

supert

supert on March 7, 2017, 10:58 p.m. Reply

Thanks for the development of this plugin works perfectly

novinhas peladas xvideos xvideos caiu na net

PeterZeilstra

PeterZeilstra on March 12, 2017, 10:23 a.m. Reply

Excellent code, thank you!

Regards, Peter from Hoverboard kopen

malaikaarora238

malaikaarora238 on March 20, 2017, 5:08 a.m. Reply

was looking for this information, thanks to the author of the post, I am glad to join your community! brocade blouse designs

hardik bhatt

hardik bhatt on April 1, 2017, 6:40 a.m. Reply

Nice and informative post. thanks to share with us. Happy to Read. SBI EMS Login

Hikari Studio

Hikari Studio on April 12, 2017, 3:53 p.m. Reply

It is a great plugin which helps to invite many new readers to your blog. Thanks for it.

http://hikaristudio.vn/pages/trang-diem-co-dau

Radjapov

Radjapov on April 15, 2017, 4:43 a.m. Reply

It was wondering if I could use this write-up on my other website, I will link it back to your website though.Great Thanks. download software

Dai Hai Thuy

Dai Hai Thuy on April 15, 2017, 11:17 a.m. Reply

Máy lọc không khí là một sản phẩm có chức năng làm sạch không khí và tiêu diệt bụi bẩn, vi khuẩn cùng những chất gây mùi khó chịu.

Hiện trên thị trường Online như Google, hay Facebook đang có nhiều comment về vấn đề sức khỏe do bị ảnh hưởng bởi không khí ô nhiễm, bởi thế, nếu các bạn đang lăn tăn về sản phẩm này, có thể liên hệ tới Đại Hải Thủy. Chúng tôi khuyên bạn nên sử dụng máy làm sạch không khí từ Sharp, rất đa dạng mẫu mã và tính năng đang rất được người dùng facebook đặt mua online. https://daihaithuy.vn/may-loc-khong-khi-dan-dung/may-loc-khong-khi-sharp

vongdeotayhelo

vongdeotayhelo on April 21, 2017, 3:48 p.m. Reply

Thanks for share. My website is http://vongdeotayhelo.vn/

Andrew Steven

Andrew Steven on April 25, 2017, 10:52 a.m. Reply

Madden Mobile cheats no survey was made for your current mobile, this can be a stunning generator what can transform your life, since if you are using generator the gaming more useful to play. Don`t hold back and also take right now is 100% definitely doing work!

Gach Lat Nen

Gach Lat Nen on May 8, 2017, 7:22 a.m. Reply

Thanks for the development of this plugin works perfectly gach lat nen

Prashant Tyagi

Prashant Tyagi on May 18, 2017, 1:25 a.m. Reply

Its indeed very good article thanks for share happy to read bobibanking

simdeptailoc

simdeptailoc on May 29, 2017, 5:02 a.m. Reply

Cuộc sống hiện đại ngày càng phát triển, mỗi người trong chúng ta đếu sở hữu cho riêng mình ít nhất một chiếc điện thoại, phục vụ cho nhiều mục đích khác nhau cũng như là nhu cầu nghe gọi. Có thể nói, sim điện thoại và điện thoại di động đã trở thành một phần của cuộc sống hàng ngày. Và điều tất nhiên, nhu cầu sử dụng sim số đẹp cũng tăng cao. Nhưng cũng chính vì thế, mà không phải lúc nào bạn cũng tự tìm được một số đẹp, bởi vì đơn giản là ai cũng săn số đẹp, và số đã đẹp thì giá cũng… “đẹp” theo đó. Hãy cùng xem một số “mẹo” tìm và lựa chọn sim của những người hay xem sim nhé.

sandhya

sandhya on May 31, 2017, 9:01 p.m. Reply

Its really great article thanks for sharing you can also check best Pakistani Escorts in Dubai for enjoyment.

paras

paras on June 20, 2017, 11:30 a.m. Reply

Fourth of July Quotes

joelle

joelle on June 14, 2017, 8:41 a.m. Reply

De plus en plus de designers sont adeptes de la sensualité du dos et, par conséquent, cette année, ils maintiennent une autre des tendances de l’année dernière qui a présenté de robe de mère de mariée avec les dos découverts avec vertigineux décolletés qui montrent une partie très féminine du corps de la femme.

binasa

binasa on July 3, 2017, 12:21 a.m. Reply

(Of course, changes may occur based on game situations, and being able to quickly change this on the fly is a great feature of this app. web site! Jesus directed His Disciples to God by referring them to His God as their God, and His Father as their Father.

Khan Saab

Khan Saab on July 20, 2017, 6:20 a.m. Reply

This is awesome article.I recently start using Sarahah App and I am in love with it.I want all readers of Movabletype to send me feedback so that I can improve myself.I have also linked Sarahah Snapchat.

Leave a Comment