Transcript

00:00 time to integrate facebook commenting
00:02 directly on our wrapper websites
00:11 hey everybody joe orcman here and in
00:13 this video we're gonna teach you how to
00:15 integrate facebook's commenting system
00:18 directly under your rapidweaver websites
00:20 and we're going to use the new comments
00:22 2 stacks that recently got shipped now
00:25 this stack set implements both disqus
00:28 and facebook however in this video we're
00:30 just going to be reviewing how to
00:32 implement the facebook commenting system
00:35 okay now we're going to show you how to
00:37 integrate the comments on a static web
00:39 page such as like a product page or
00:41 something so that you know your users
00:43 can interact on a static web page
00:46 and then we're going to show you how to
00:48 integrate facebook commenting directly
00:50 into total cms blog okay this is so you
00:53 can have a full-blown commenting system
00:56 powered by facebook on your total cms
00:58 blog really cool very powerful let's
01:01 jump in and see how easy it is
01:04 so here i am inside the comments demo
01:07 file that ships with the stack
01:09 and what you'll notice inside the stacks
01:11 libraries we have the fb comment stack
01:14 that is obviously the facebook comments
01:16 stack there's also the fb count stack
01:18 which we'll look at in a little bit
01:20 so in this example we're going to be
01:21 implementing the facebook comments on a
01:23 static web page again this could be a
01:26 product page it could be a services page
01:28 again it's just a static normal web page
01:30 where you can add a comment thread this
01:32 is a great way to spark conversations
01:34 with your customers and have it all
01:37 encapsulated on your website and what's
01:39 great with facebook comments is we'll
01:41 see in a little bit it also gets you a
01:43 little bit of facebook sharing um on the
01:45 social network so once you add this
01:47 stack to your page you'll notice inside
01:49 the settings you have facebook username
01:52 the purpose of this is so that this is
01:54 going to be the username that is the
01:56 administer
01:58 of the facebook comments this allows you
02:00 to moderate comments and edit them and
02:02 maybe delete some comments or things of
02:04 that nature right so this is going to be
02:06 your facebook username that you want to
02:09 use to edit your comments you obviously
02:11 have to be logged into facebook for that
02:13 to work okay again this is your actual
02:16 personal username not your company
02:18 facebook page name or anything like that
02:20 it has to be your actual username
02:23 next up is the page url and this is
02:26 going to be the url
02:28 to this page okay the page that this
02:31 comment is going to be tied to
02:34 so if you want to ever access or or
02:37 reference this comment thread again
02:40 you have to reference the exact same
02:42 page url
02:46 next the number of posts defines by
02:48 default how many posts are going to be
02:49 shown on page load you can obviously
02:51 paginate through them right so you can
02:53 say more comments and more comments
02:55 next is going to be the locale so you
02:57 can change the actual facebook interface
03:00 in terms of what language is shown
03:02 you can change some of these sort by
03:04 right auto lets facebook determine what
03:07 comments you can then do time or reverse
03:09 time for sorting your comments
03:12 and lastly you can also have a dark
03:14 theme by default it's going to be a
03:16 light theme okay for light-colored
03:18 websites if you have a darker colored
03:20 website you're going to want to use the
03:21 dark theme
03:23 so if we preview this page you'll see
03:24 that the comments actually do work
03:26 inside rapidweaver7 uh which is nice um
03:29 obviously i'm not logged into facebook
03:31 from within wrap weaver so we don't see
03:33 the moderation tab here okay
03:35 but what's really great here is that
03:37 when a user adds a comment you'll also
03:39 notice there is a also post on facebook
03:42 post here okay
03:44 let's show you exactly what that means
03:46 so here we are on the comments preview
03:49 site and i'm on the facebook comment
03:51 stack demo page
03:53 and you'll notice that here because i'm
03:54 logged into facebook on this particular
03:56 browser um i have a moderation tool and
03:59 if you were to click on that you'll see
04:00 that it takes me to the facebook
04:02 moderation page for this particular
04:05 comment thread so then i can approve or
04:07 i can hide up various posts i can report
04:09 some posts as spam so on and so forth so
04:13 now back to the preview site if i go
04:15 ahead and post a comment and then what
04:17 i'm also going to do is i'm going to
04:19 check also post on facebook
04:21 and i'm going to click post
04:23 so if we go ahead and look at my
04:25 facebook feed we'll see that because i
04:27 checked that little check mark
04:29 it posted the comment to my thread
04:33 along with a link to that page on my
04:36 feed
04:37 so that means when your visitors
04:38 actually comment on your
04:40 posts and they check that box
04:43 they will actually be posting to their
04:45 timeline along with the link to your web
04:48 page
04:50 so now that we've implemented the
04:52 facebook comments what if we wanted to
04:54 actually display the count for all of
04:56 those comments on a different web page
04:59 right
04:59 that's what the fb count stack that we
05:01 saw in the stacks library is for
05:03 when you add that stack to your page
05:06 you'll see that we have a few settings
05:07 here that are pretty obvious
05:10 the first is going to be page url this
05:12 url needs to match the same exact url
05:16 that you entered in to the facebook
05:18 comments stack
05:20 the label is the actual label that will
05:23 be added after the number
05:25 so if you want five comments two
05:27 comments so on and so forth okay then we
05:30 added a bunch of options for alignment
05:33 um what fonts are available so we
05:35 integrate with foundation as well as
05:37 font pro or the default inherits from
05:39 your theme that you're using
05:42 and the style also integrates with
05:44 foundation as well as font pro as well
05:46 as some custom styles as well
05:49 now i have noticed that facebook does
05:52 keep the comment count pretty accurate
05:55 and pretty quick
05:56 but if at times you ever post a comment
05:59 and you notice that the count isn't
06:00 exactly perfect give it a few minutes
06:02 and it will probably update itself okay
06:06 and obviously as we see here when you
06:08 click on the comments link it actually
06:10 takes you to the url that's defined
06:13 inside the settings for that comment
06:15 stack
06:16 so that pretty much does it for
06:17 implementing
06:19 facebook comments on a static web page
06:22 right again these are going to be static
06:23 web pages that you're going to build
06:24 with stacks so it's going to be um you
06:27 know a product page or a services page
06:29 or an about us page or something of that
06:30 nature right
06:32 what we're going to dive into now
06:34 is integrating facebook comments into
06:36 your total cms blog
06:38 and what's really awesome about this is
06:40 that total cms takes care of a lot of
06:42 the background stuff for us so that we
06:44 get unique individual comment threads
06:46 for every single blog post so let's jump
06:50 in and see how easy that is
06:52 so inside the same comments to demo
06:54 files you'll notice that there is a
06:55 facebook blog page
06:57 and this page you'll see that there is a
06:59 blog list stack
07:01 now here i'm not going to review how to
07:03 implement total cms or any of the
07:05 settings for the cms here okay
07:08 go ahead and check out a lot of the
07:09 videos that we have already made for
07:11 total cms blog
07:13 but
07:14 what you will notice is inside the blog
07:16 list stack
07:18 there is a new child stack here so when
07:20 you click on plus
07:22 you will see that there is a new
07:23 facebook account stack
07:26 now this is the child stack that you're
07:28 going to want to use you are not going
07:30 to use the fb count stack that is inside
07:32 the stacks library you should be using
07:35 the facebook count child stack inside
07:37 blog list
07:39 now the reason for this is that total
07:41 cms takes care of a lot of the settings
07:43 that we see in the background as you see
07:45 here there is no page url to configure
07:48 the reason is because the blog takes
07:50 care of that for us
07:52 all you need to do is configure what you
07:53 want your label to be and some of the
07:55 style options
07:57 and you're done
07:59 and you'll notice in preview that we
08:01 have nice comment counts for every
08:03 single blog
08:04 right
08:05 in our blog list
08:08 now on our blog post page we need to
08:11 embed the facebook comment thread right
08:14 so inside the blog post stack
08:17 you will notice that just like the blog
08:19 list there is a new child stack and it
08:21 is called facebook comments again you're
08:24 going to want to use this facebook
08:25 comments child stack and not the fb
08:29 comments stack that is inside the stacks
08:30 library
08:33 the reason for that is this facebook
08:34 comments stack
08:36 actually has a lot of automation just
08:38 like we have in blog list you do not
08:40 need to configure the page url
08:42 right you just need to set the base
08:44 things such as fb username the number of
08:46 posts you want to display
08:48 and your theme options so what your
08:50 locale order and theme light or dark
08:53 theme is going to be and that's all that
08:55 you need to worry about
08:57 so as you see
08:58 implementing facebook comments is really
09:01 simple with these new stacks right just
09:04 drag and drop adding a few little key
09:06 things and especially with the blog
09:08 integration the stack does all the hard
09:10 work for you
09:11 right
09:12 and really i like the facebook comments
09:15 i have to say i'm surprised because um
09:17 the the post to facebook thing gets you
09:19 some social sharing right um some
09:21 interaction on facebook with your users
09:24 right so i think it's a really big win
09:26 it's a nice clean comment thread so i
09:28 hope this video helped you out i hope
09:30 that you you know go ahead and implement
09:32 facebook and give it a shot um and get
09:34 some social sharing going get some you
09:36 know interaction on facebook with your
09:37 customers and hopefully you'll get a
09:39 little bit more traffic because you have
09:41 comment stacks um that integrate
09:44 directly into facebook so i hope you
09:46 learned some things out of this video i
09:47 hope you enjoy the comment stacks and
09:50 happy weaving bye
10:06 you"}]