Campus Crusade for Christ is developing apps to help you engage in ministry within Facebook. Some of these apps give you, and anyone visiting your fan page, access to all of the features and functions from another website, like Starting With God. By bringing this content to your profile and fan pages, your friends can now engage in the Gospel along side you without needing to leave their Facebook ecosystem.

In this video, we’ll show you where to find our apps, install them, and how to place a tab in your navigation bar on your fan and profile pages for all to see.
 
 

Keynote New Media Labs and Campus Crusade for Christ has developed the Starting With God app for Facebook. Starting With God is a great site for anyone wanting to grow in their faith. And now you’ll be able to add all of the resources on SWG to your Facebook profile as a way to minister to your friends.

Check out this video to learn how to add the app to your profile page.

In the previous 3 parts of our series on the Facebook (FB) social plugins, we’ve shown you

• How to prep your Thesis themed WordPress site so that you can use all of the social plugins

 

• How to install the Like Button

on your blog
 

• How to install Comment Boxes

In this last tutorial, we’ll show you how to install the Like Box, which is like a small window to your FB Page. It shows visitors to your blog a quick snapshot of the activity on your FB page, and which of their friends are already fans of it. The best part is that if they’re not already a fan of your FB page, they can become one by clicking on the Like button inside the Like Box.

This plugin gives you an easy way to integrate the content and audiences of your website and your FB world. Now your Facebook page has another avenue of gaining viral popularity as the popularity of your website goes up.

For this tutorial, we’ll show you two different ways to get plugin to show up on your site. We’re also assuming that you’re using version 2.9 or later of WordPress and version 1.7 or later of the Thesis Theme, and that you’ve gone through the steps in part one of this series – How to prep your Thesis themed WordPress site so that you can use all of the social plugins.

Installing the Like Box as a Sidebar Widget

• Go to the Facebook Developer site for the Like Box.

 

• Customize by filling in the form and clicking on the Get Code button. The Facebook Page ID is the ID number for your FB Page.

  Width allows you to adjust the width of the box to match the width of the sidebar on your site. And Connections allows you to adjust how many of their Friends’ pictures a visitor will see at the bottom of the box.

  

 

• Copy the code that Facebook gives you. You can copy the iframe version or the FBML version; it doesn’t really matter. You’ll only need one of them though.

  

 

• Paste that code into your site the same way you would install a widget. Here’s a video tutorial to show you how.
   

Installing the Like Box with the Custom Functions.php File

If you want a little bit more control over where the Box appears, you can also insert it by editing your Thesis Custom_Functions.php file. Check out part 1 of this series for more details on how to do that.

To add the Like Box to the top of sidebar 2 of your site, copy and paste this code to your Thesis Custom_Functions.php file.

/* BEGIN: Facebook Like Box To Sidebars */
function add_fbpage_like_box () {
	?>
		<fb:like-box profile_id="YOUR Facebook Page ID" width="300" connections="15"></fb:like-box>
	<?php
}

add_action('thesis_hook_before_sidebar_2', 'add_fbpage_like_box');
/* END: Facebook Like Box To Sidebars */

Make sure you change the words YOUR Facebook Page ID with your actual page id. And don’t erase the quotation marks around the id number. It should look something like this:

“123456789″

For this example, we combined the code that you can get from Facebook with some extra code to make it work with Thesis and WordPress. The code that Facebook gives you starts with <fb:like href , and ends with </fb:like>

You can customize what it looks like, and what it does, with the different parameters. Just change the values for Width and Connections. For more info about customizing the button for your needs, check out Facebook’s documentation here.

That wraps up our four part series. What do you guys think? What are some ways you’re using social plugins on your site?

If you’ve been following our series on the Facebook Social Plugins, then your WordPress site should be rocking the Like Button. Check out part 1 and part 2 of this series if you’re just now joining us.

In this post, we’ll be showing you how to install the comment box. With the Facebook (FB) comment box, visitors to your site have the option of clicking the Like Button, and leaving a comment on your blog that will also be re-posted in their newsfeed. This is a great way to promote conversation and engagement on your blog.

For this tutorial, we’re assuming that you’re using version 2.9 or later of WordPress and version 1.7 or later of the Thesis Theme, and that you’ve gone through the steps in part one of this series.

We’ll also be editing the Thesis Custom_Functions.php file again. Check out part 1 of this series for more details on how to do that.

Add Comments the Bottom of Each Post

To add a Comment Box to the bottom of each of your posts, copy and paste this code to your Thesis Custom_Functions.php file.

/* BEGIN: Facebook Comment Box On Posts */
function add_fbpost_comment_box () {
	?>
		<fb:comments numposts="10" width="550"></fb:comments>
	<?
}

add_action('thesis_hook_after_post', 'add_fbpost_comment_box');
/* END: Facebook Comment Box On Posts */

The Numposts parameter in the code lets you control how many comments are visible at a time. You can also adjust the width of the box so that it matches the width of your blog posts.

Hide The Comment Box On The Home Page

The downside to adding a comment box to the bottom of every post is if you’ve got your home page set to display full posts, there will be lots of boxes cluttering up the page. It’s not a problem if your home page is set to only display teasers.

Use this code instead if you want to add a box to the bottom of each blog post that can only be seen when someone is viewing the post on it’s own page. Now, you won’t see any comments on your home page, but you will see them if you click on the link to read an individual post.

/* BEGIN: Facebook Comment Box On Posts Hidden On Home Page */
function add_fbpostpage_comment_box () {
  if (is_single()) {
	?>
		<fb:comments numposts="10" width="350"></fb:comments>
	<?
  }
}

add_action('thesis_hook_after_post', 'add_fbpostpage_comment_box');
/* END: Facebook Comment Box On Posts Hidden On Home Page */

If you’d still like to give visitors looking at your home page the opportunity to leave a comment after you’ve hidden them from the home page, use the code below. This code will add a link, that is only visible on the home page, to the bottom of your posts, prompting users to leave a comment for that post. When they click on the link, they’ll be taken to that post’s page, where they’ll be able to see the comment box.

/* BEGIN: Facebook Comment Link To Posts */
function add_fb_comment_plug() {
  if (!is_single() && !is_page()) {
	?>
	  <p class="fb-comments"><a href="<?php echo get_permalink(); ?>#fb_comments">Add a comment</a></p>
	<?
  }
}

add_action('thesis_hook_after_post', 'add_fb_comment_plug');
/* END: Facebook Comment Link To Posts */

For more info on the FB Comment box, check out Facebook’s developer site.

In part 4 of our Social Plugins series, we’ll show you how to install a Like Box to your blog.

In part 1 of our series on the Facebook Social Plugins, we showed you how to prep your site for all of the FB social plugins by installing the JavaScript SDK. From here on, using the Facebook Social Plugins on your blog is pretty easy. This tutorial will show you how to make the Like Button appear in a couple different places on your site.

For this tutorial, we’re assuming that you’re using version 2.9 or later of WordPress and version 1.7 or later of the Thesis Theme, and that you’ve gone through the steps in part one of this series.

We’ll also be editing the Thesis Custom_Functions.php file again. Check out part 1 of this series for more details on how to do that.

In both cases below, you can customize what the button looks like, and what it does, with the different parameters. For example, if you change Show Faces to false, visitors to your site won’t be able to see the profile pictures of their Facebook friends who have already clicked on the Like Button. This might be useful to keep your home page from getting too cluttered if you’re using the button with teasers. For more info about customizing this for your needs, check out Facebook’s documentation here.

Also, in each of the cases below, we’re combining the code that you can get from Facebook with some extra code to make it work with Thesis and WordPress. The code that Facebook gives you starts with <fb:like href , and ends with </fb:like>

Note that we’ve replaced the site url in the Facebook portion of the code with

<?php the_permalink(); ?>

This is necessary to make the button work with each post.

Add the Like Button to the Top of Posts

To add the Like Button to the top of each of your blog posts, copy and paste this code to the bottom of the Thesis Custom_Functions.php file.

/* BEGIN: Facebook Like Button Before Posts */

function add_fb_like_button () {
	?>
		<fb:like href="<?php the_permalink(); ?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light"></fb:like>
	<?php
}

add_action('thesis_hook_before_post', 'add_fb_like_button');
/* END: Facebook Like Button Before Posts */

Add The Like Button to Teasers

To add the Like Button to the bottom of each post teaser, on your site home page for example, copy and paste this code to the bottom of the Thesis Custom_Functions.php file.

/* BEGIN: Facebook Like Button On Teasers */
function add_fbteaser_like_button () {
	?>
		<fb:like href="<?php the_permalink(); ?>" layout="standard" show_faces="false" width="100" action="like" colorscheme="light"></fb:like>
	<?php
}

add_action('thesis_hook_after_teaser', 'add_fbteaser_like_button');
/* END: Facebook Like ButtonOn Teasers */

In part 3 of our Social Plugins series, we’ll show you how to install a Facebook Comment Box to your blog posts.

Related Article:
Facebook Social Plugins Pt 1: JavaScript SDK

Photo Courtesy of joeltelling

Recently, you may have seen the Facebook Like button on many of the websites and blogs that you frequent. They are a great way for your content to reach more people in a viral way by giving people the opportunity to post it on Facebook. Links to your various blog posts, or website, can now be effortlessly shared by anyone, and viewed by everyone in the Facebook Newsfeed. Here’s a tutorial, part 1 of a 4 part series on the Facebook Social Plugins, to show you how to get the Like Button up and running on your blog.

When it comes to Facebook’s social plugins, you have two options: use the iframe version, or use the XFBML version.

Iframe Version

The Iframe version of the Like Button is very easy to implement on a blog. Getting it working isn’t all that different from installing a widget on your site. The downside is that the iframe version of the button is stripped down in terms of features. For example, when someone clicks on the iframe version of the Like Button, they can’t add a comment. Facbook will add a single line story to their newsfeed which is very easy to ignore.

XFBML version

The XFBML version of the button allows people to add a comment when they click on the button, and lets you specify a picture to be used in the resulting Newsfeed story.

There are tons of tutorials out there for the iframe versions of the like button. This tutorial will focus on the XFBML version of the button, which will give you more flexibility and make your blog easier to notice in the Newsfeed. For the most part, there is an advantage to using the the XFBML version of all of the Facebook social plugins, and in some cases, an iframe version isn’t even available.

For this tutorial, we’re assuming that you’re using version 2.9 or later of WordPress, and version 1.7 or later of the Thesis Theme.

Step 1: Create a Facebook Application for Your Website or Blog

First, you need to create a Facebook Application for your blog. Don’t worry, you’re not creating the next version of Farmville. You’re only doing this so that you can get an App ID. You need this so that Facebook recognizes your blog whenever someone clicks on the Like Button. Think of this as registering your website as a legit online space with Facebook.

While logged in to Facebook, go to the Create an Application page.

• Enter your Site name. What you enter into this box will also be the name of the application. Just give it a short title so you know what it is. We used MediaforMinistry
• Enter the full URL to the website or Web page. We used http://www.mediaforministry.org
  NOTE: Make sure this URL exactly matches your site URL
• Select the appropriate locale
• Click through the various pages until you get to this page

The App ID is the one you need. Write this down, or copy and paste it into a blank document. You’ll need this number later. If you ever need to come back to it, you can always access your new application by going to the Developer Dashboard while you’re logged into Facebook.

You won’t be able to use this APP ID on more than one blog or website at a time because Facebook matches it to the URL you give them. If you’ve got multiple blogs, you’ll need to create multiple apps to get the unique ID’s.

Step 2: Install the Facebook JavaScript SDK

If you’re curious, you can read more about the JavaScript SDK here.

We’re about to edit your Thesis custom_functions.php file. You can edit this file from Thesis’s interface, or you can download it with an FTP client and edit it from your computer desktop with a plain text editor. Be sure not to use Microsoft Word to edit the .php file.

Also, now would be a good time to create a backup of your custom_functions.php file, just to be safe. You’ll need to use an FTP client to download your custom_functions.php file, and create the backup. The Thesis custom_functions.php file can be found in the Custom folder of your Thesis theme folder. Don’t confuse the custom_functions.php file with the functions.php file.

To edit the custom_functions.php file from within Thesis, first click on Custom File Editor from the Thesis options menu in the WordPress Admin Dashboard. It’s in the column on the left side of your WordPress dashboard.

On the next screen, select custom_functions.php from the pull down menu at the top of the screen, and click on the green button labeled Edit Selected File.

Copy and paste this code into the bottom of your custom_fuctions.php file and save your changes.

/* BEGIN: Facebook Javascript SDK Code */

function script_facebook(){
	?>
		<div id="fb-root"></div>
		<script>
		  window.fbAsyncInit = function() {
			FB.init({appId: 'YOURAPPID', status: true, cookie: true,
					 xfbml: true});
		  };
		  (function() {
			var e = document.createElement('script'); e.async = true;
		e.src = document.location.protocol +
		  '//connect.facebook.net/en_US/all.js';
		document.getElementById('fb-root').appendChild(e);
		  }());
		</script>
	<?
}

add_action('thesis_hook_before_html','script_facebook');

add_filter('language_attributes', 'add_og_xml_ns');

function add_og_xml_ns($content) {
  return ' xmlns:og="http://opengraphprotocol.org/schema/" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');

function add_fb_xml_ns($content) {
  return ' xmlns:fb="http://www.facebook.com/2008/fbml" ' . $content;
}

/* END: Facebook Javascript SDK Code */

This code has a few lines added to the bottom of it that you won’t find in the JavaScript SDK that Facebook provides. From our testing of the Like Button though, they’re needed to make Facebook’s social plugins work with WordPress and the Thesis Theme.

Notice the 4th line in the code where it says ‘your app id’
Replace the words your app id with the application id you got from the previous step. It should look something like this: ’123456787654321′

Make sure you Don’t erase the single quotation marks surrounding the app id

Step 3: Tell Facebook What Image To Use For Your Newsfeed Stories

When someone adds a comment after clicking on the like button, Facebook posts a full story in their newsfeed that includes an image from your site. If you don’t specify which image you want to use, Facebook will just pull an arbitrary one from your site.

• Find the Additional Scripts box located in the Thesis Site Options menu.
  
• Paste the code below into the Additional Scripts box, and save your changes. Make sure you replace the words Your Logo Image URL with the actual URL for the logo you want to use.

<meta property="og:image" content="http://Your Logo Image URL"/>

Now that you’ve got the JavaScript SDK installed on your site, you’re ready to make the Like Button appear. We’ll show you how to do that in part 2 of this series.

What do you think of the Like Button?

Photo Courtesy of joeltelling

]]> http://mediaforministry.org/810/social-plugins-part1/feed/ 2 http://mediaforministry.org/746/google-analytics-facebook/ http://mediaforministry.org/746/google-analytics-facebook/#comments Mon, 21 Jun 2010 10:38:05 +0000 sam http://mediaforministry.org/?p=746

We’ve posted a few articles about Google Analytics and what it can do to help further the reach of your Christian ministry. Well, Google Analytics (GA) isn’t just for blogs and websites. The folks at Webdigi and SocialExaminer.com have figured out how to use this powerful tool with a Facebook page.

When you create a fanpage, you’ll get weekly reports, called Facebook Insights, that give you information about the types of interactions that are happening between you and your fans. The information is useful, but different from what you get with GA.

With GA, you’ll know:

• How many people visitors you’re getting on a daily basis
• What areas of your page are popular
• And what parts of the world your visitors come from

These two information sets compliment each other very well. Together, they give you a great picture of who is spending time on your fanpage, and what it is they are doing there.

Follow this link for a step by step tutorial to get you started.
How to Add Google Analytics to Your Facebook Page


And the custom image code referenced in step two of this tutorial can be found here:
Custom Image Code

One thing to note is that the tracking code you’ll be installing onto your Facebook fanpage will only work for the tab it’s installed on. For example, the tracking code you install on your main Facebook Wall page won’t gather data on your Photos tab. It will only track your main wall page. To track traffic on other parts of your Facebook page, you’ll need to go through the steps in the tutorial multiple times.

You will also only be able to track tabs/pages created with the Static FBML app, or pages, like your main Wall page, where you can place a Static FBML box.

Don’t worry, this will all make sense once you go through the tutorial.

Photo Courtesy of cpstorm CC BY 2.0

]]> http://mediaforministry.org/746/google-analytics-facebook/feed/ 0 http://mediaforministry.org/732/create-promote-facebook-pages/ http://mediaforministry.org/732/create-promote-facebook-pages/#comments Mon, 14 Jun 2010 10:10:31 +0000 sam http://mediaforministry.org/?p=732

ChurchCrunch did a great four part series on starting and promoting a Facebook page for your Christian ministry. If you’re still asking “Why would my church and/or ministry want to be on Facebook?”, ChurchCrunch sums it up like this:

“[A] Facebook Page is about community. The entire purpose for creating a Page is to engage people on a level that you may not be able to with your website alone. Your Page is an extension of your Brand, and as such must remain fresh and interactive for those engaging with it.”

Facebook really is about community. It’s a great online space for a broader level of engagement, participation, and connection with your ministry. For those already involved with your ministry, it’s an added connection point, an easy way for people to stay in touch with each other, and an easy way for people to keep up to date with your ministry. And for those who are looking for a Christian community, it makes it easier for you to be found.

ChurchCrunch’s four part series walks you through just about everything you’ll need to know to be a Facebook master. The topics they cover are:

• Starting a Page
• Basic Editing
• Different Promotion Strategies
• Customizing Your FB Site

Follow the links below, to check out the tutorial.

Creating a Facebook Page for Your Church:

• Part 1
• Part 2
• Part 3
• Part 4
]]> http://mediaforministry.org/732/create-promote-facebook-pages/feed/ 0 http://mediaforministry.org/715/facebook-training-videos-lifechurch/ http://mediaforministry.org/715/facebook-training-videos-lifechurch/#comments Mon, 07 Jun 2010 10:08:03 +0000 sam http://mediaforministry.org/?p=715

Lifechurch.tv has created a library of Facebook training videos – Training Videos from Lifechurch.tv. These videos are a great resource to anyone looking to increase the online presence of their Christian ministry, especially for those just getting started with social media. Having a Facebook page can increase the scope and reach of your Christian ministry by helping you to establish an online presence, as well as giving your ministry a deeper level of engagement and more frequent connection with the people who are involved with your church or ministry.

The videos in the library can be streamed or downloaded.

Topics covered include:

• Organizing and Promoting Events
• Customizing Your Page
• Insights and Metrics – Measuring the Success of Your Page
• Updating Your Fans
• Writing Notes
• Photos
• Videos
• Wall Updates

What are some ways your ministry is using Facebook?

]]> http://mediaforministry.org/715/facebook-training-videos-lifechurch/feed/ 0 http://mediaforministry.org/504/custom-facebook-fan-pages/ http://mediaforministry.org/504/custom-facebook-fan-pages/#comments Mon, 26 Apr 2010 10:18:57 +0000 sam http://mediaforministry.org/?p=504

Mashable recently highlighted 5 Essential Apps for Facebook Fan Pages. Here are a few ideas for how you can use the Static FBML app to maximize engagement and community on your ministry fan page.

With the Static FBML app, you can use html to customize your Fan Page. The app makes it really easy to create custom boxes on the left hand column of your main wall page that help connect your fans to your ministry beyond Facebook. For example, you could use graphic buttons in a custom box that are links to your other sites, like your ministry blog or a registration site for your next conference.

You can also create custom tabs and sub pages, making them look however you like. These new custom pages can be used to promote upcoming events, outreaches, and conferences. You can also set these tabs to be the first thing that someone sees when they land on your page. This lets you control the first impression you make on new fans, or helps you call attention to something that’s immediately happening in the moment with your ministry. Check out this fanpage for the Campus Crusade for Christ group at the University of Florida to see what I mean – CruatUF

Another huge benefit to this app is that now you can install Google Analytics onto your Fan Page. The information in the Insights that Facebook provides for fan pages is usefull, but Google Analytics can give you a much more detailed picture of who’s spending time on your page. And if you use custom tabs, you can track how many people are going to your main wall page, as well as any of your custom tabs. Here’s an article from the folks at webdigi that will get you started – Analytics for Fan Pages.

What apps do you like using on your fan page? Let us know.

Related Articles:
Featured FanPage App: Polls
Invite Your Friends, Grow Your Page

]]> http://mediaforministry.org/504/custom-facebook-fan-pages/feed/ 2