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/768/bluehost-permalinks/ http://mediaforministry.org/768/bluehost-permalinks/#comments Mon, 28 Jun 2010 10:08:36 +0000 sam http://mediaforministry.org/?p=768

There is a known bug with WordPress blogs hosted on Bluehost that will crash your site and prevent you from logging into your WordPress dashboard. The bug occurs if you change the permalink settings on your site. This tutorial will show you what triggers the bug, and how to fix it.

If you’re not comfortable using an FTP client and plain text editor, which you’ll need to get your site working again, don’t trigger the bug without some help first.

Setting Permalinks – This Triggers the Bug

1. Login to your WordPress dashboard.

 

2. Expand the Settings menu and select Permalinks
   

 

3. Select either the Day and Name or Month and Name option, and then select the Save Changes button
   

 

4. From this point forward, if you try to load any part of your blog, you will receive a 404 error. You will receive this error until you fix the htaccess file.

Fixing the Bug: How to Fix the .htaccess File

1. Download the .htaccess file that is generated after saving the permalink options from the previous step. The .htaccess file is located in the folder on your server where your WordPress blog is installed. One way to do this is to use an FTP client/software to login to your Bluehost hosting account, and download the file to your computer. You can download a free FTP client here: Filezilla-project.org

 

2. Open the .htaccess file using a text editor such as the Notepad application that comes
   with Windows on a PC. For mac users, TextWrangler is a free application that works great.

   NOTE: Don’t use Microsoft Word to do this.

 

3. Add the 3rd line of code, in bold print below, to your .htaccess file as shown:

   # BEGIN WordPress
   <IfModule mod_rewrite.c>
   Options +FollowSymlinks
   RewriteEngine On
   RewriteBase /connection/
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteRule . /connection/index.php [L]
   </IfModule> 
   
   # END WordPress
   

   NOTE: The .htaccess file does NOT have a file extension (like .txt or .doc for example). Do NOT add one.

4. Save and upload the new file to your Bluehost hosting account, replacing the old
   .htaccess file.

I don’t really understand what’s actually going on with this error, or why it doesn’t seem to effect every blog on Bluehost. But this fix has worked for me in the past. Hope it works for you too.

]]> http://mediaforministry.org/768/bluehost-permalinks/feed/ 0 http://mediaforministry.org/680/google-analytics-key-features/ http://mediaforministry.org/680/google-analytics-key-features/#comments Mon, 31 May 2010 10:13:31 +0000 sam http://mediaforministry.org/?p=680

Mashable did a great post highlighting 27 features of Google Analytics. If you aren’t already using some sort of analytic tool, Google Analytics is great because it’s not only free, but it’s also easy to use.

With it, you can measure the traffic going to your ministry blog or website, and see how people are spending their time there. That information is incredibly valuable for helping you customize your site to be more useful for your audience. For example, you can tailor your blog posts around topics people you’re ministering to connect with, or know which features on your site are actually being used. Ultimately, seeing how people are using your ministry site will help you get the most return on the time and resources you invest into your site.

Here are a few of the features that I find the most helpful:

• Site Overlay

  With the site overlay, you’ll actually see how many visitors are clicking on the various parts of your ministry website. This can a really easy way to understand all of the analytics info. For example, you might see that the features getting the most attention on your website are towards the top, while objects at the bottom of the page are being ignored. With this information in hand, if there’s something you really want to call attention, you can try placing it at the top of your site.

  On one college ministry website we were working on, the site overlay showed us that nobody was using the links menu in the sidebar of the front page. Since that link menu was taking up valuable space on the front page, we got rid of it and replaced it with something people actually were clicking on.

• Bounce Rate

  The bounce rate measures how many people are landing on a particular page within your ministry website, and then leave from that same page without ever clicking through to another section of your website. What a high bounce rate means for you is that people are landing on a particular section of your site, but they aren’t sticking around to see what else your site has to offer.

  If one of your pages has a high bounce rate, you might want to adjust it to get people to explore the rest of your site. Similarly, if a page has a high bounce rate and a low landing rate, it might not hurt to stop investing time into that page, or possibly axing it.

• Compare Date Ranges

  Google Analytics lets you easily compare data from two different date ranges. This can be really helpful to your ministry by allowing you to measure the effectiveness of different marketing campaigns and outreaches your ministry does. You’ll be able to easily see which ones worked and which ones didn’t based on the web traffic they generated within certain windows of time.

Be sure to check out our tutorial if you need help – Installing Google Analytics on your ministry blog.

What are some ways you’re using Google Analytics?

Related Article: How Google Keyword Tool Makes Your Ministry Website Findable
Photo courtesy of aussiegall CC BY 2.0

]]> http://mediaforministry.org/680/google-analytics-key-features/feed/ 0 http://mediaforministry.org/573/google-analytics/ http://mediaforministry.org/573/google-analytics/#comments Mon, 10 May 2010 10:44:23 +0000 sam http://mediaforministry.org/?p=573

Google Analytics is a great, and free, tool for any Christian ministry blog and/or website. With it, you can see:

• The traffic coming to your ministry blog




• When people are going to your site, and how much time they’re spending there




• What people are clicking on when they’re visiting your ministry’s website




• Where your viewers are coming from – Google, Facebook, or from a direct link




• Which pages, articles, and links on your church or ministry site are popular


Having all of this information can help accelerate Christian ministries by increasing their effectiveness as an online resource. For example, knowing which articles from your ministry blog are attracting the most traffic can help you tailor the content of your website to your audience.

So here is one way to get Google Analytics up and running on your your ministry’s self hosted WordPress blog. For this tutorial, I’m assuming that you’re using WordPress version 2.9.

1. Use this link to get a Google Analytics account – Google.com/analytics. You can use your Gmail user name and password to log into Analytics if you’ve already got an account set up. Otherwise, you’ll have to create a new Google account.




2. Follow Google’s instructions for adding a website profile to your new account. Google allows you to create several website profiles so that you can track multiple websites with a single analytics account.




3. Take note of the Account ID for your newly created website profile. It should look something like this: UA-123456-7. You’ll need this unique account ID later.




4. Install and activate the Ultimate Google Analytics plugin. If you don’t know how to install a plugin, here’s a tutorial to help you out – WordPress Plugins




5. From the Settings menu in your WordPress Dashboard menu, select Ultimate GA




6. In the Ultimate GA settings menu, Enter the Google Analytics Account ID for your ministry blog from step 3, and then select Update Options
   
   
   

That’s it. It takes about a day for Google to start tracking your site once everything has been set up. But after that, just log back into your Google Analytics account to view all of the statistics for your site.

What are some ways that analytics have helped your church or ministry site?

]]> http://mediaforministry.org/573/google-analytics/feed/ 1 http://mediaforministry.org/488/wordpress-tip-insert-a-google-map/ http://mediaforministry.org/488/wordpress-tip-insert-a-google-map/#comments Mon, 12 Apr 2010 10:25:41 +0000 sam http://mediaforministry.org/?p=488

Embedding Google Maps onto your ministry blog is a really easy way to show people where all of your events and outreaches are happening without them navigating away from your site. Here’s a quick tutorial on how to embed a map onto your WordPress blog.

1. Go to www.maps.google.com

2. Enter the desired address in the search menu and click Search Maps



3. Select Link in the upper right hand corner to open up the Link options

4. Copy all of the code in the Paste HTML to embed in website box. This is the embed code you’ll use in the next step.



5. Install the embed code you copied in step 4 into your blog, just as you would for any other widget. Here’s a video to show you how to install a widget into a WordPress blog using WordPress version 2.9.

Have any other ideas for integrating Google, maps, and widgets into your ministry blog? Let us know.

]]> http://mediaforministry.org/488/wordpress-tip-insert-a-google-map/feed/ 0 http://mediaforministry.org/374/wordpress-blog-tutorial-installing-a-google-calendar/ http://mediaforministry.org/374/wordpress-blog-tutorial-installing-a-google-calendar/#comments Thu, 25 Mar 2010 10:16:39 +0000 sam http://mediaforministry.org/?p=374

Google Calendars are a great tool for any ministry. Multiple people can have access to updating them, and they can be easily installed onto your blog so that everyone who visits your site can be kept up to date on your ministry’s schedule of events. Managing the calendar is extremely easy since you only have to update it in one place. Every time you make a change to the calendar in Google, your blog is automatically updated.

Here’s a quick tutorial to get you started. This tutorial assumes you’ve got a self-hosted WordPress blog and are using version 2.9.

1. Go to www.google.com/calendar

2. Click on the Create an account button, or if you already have a Google Account, enter your email and password to login.


3. Enter all of the required information and agree to the terms and conditions

4. Once completed, you should see your new calendar


5. Click on the arrow by My Calendars, and select Calendar Settings


6. Select Customize the color, size, and other options from the Embed This Calendar section.


7. Use the options menu to customize how your calendar will appear on your blog. Make sure you adjust the width and height of the calendar so that it fits in the space where you’re embedding it. Also, under Calendars to Display, make sure your calendar is checked.

8. Click on the Update HTML button


9. Copy all of the code in the Copy and Paste the HTML… box. This is the embed code you’ll use to add your calendar to your blog.






10. Next, install the embed code you copied in step 9 into your blog, just as you would for any other widget. Here’s a video to show you how to install a widget into a WordPress blog using WordPress version 2.9.




Have any ideas for integrating Google and widgets into your blog? Let us know.

Related Article:
Creating a Facebook Fanpage Widget

]]> http://mediaforministry.org/374/wordpress-blog-tutorial-installing-a-google-calendar/feed/ 0 http://mediaforministry.org/415/wordpress-tip-how-to-install-a-widget/ http://mediaforministry.org/415/wordpress-tip-how-to-install-a-widget/#comments Mon, 22 Mar 2010 10:16:11 +0000 sam http://mediaforministry.org/?p=415

Widgets can add lots of dynamic content from other websites to your blog. For example, if you have a YouTube channel, a video widget would make it really easy for you to share your videos on your blog. Every time you add a new video to your channel, the widget on your blog automatically updates itself to reflect those changes. Best of all, widgets are really easy to install. Here’s a screencast that shows you how to install a widget onto your self hosted WordPress blog using WordPress v2.9

And be sure to check out www.Lifewidget.com – a great library of widgets for your ministry blog.

]]> http://mediaforministry.org/415/wordpress-tip-how-to-install-a-widget/feed/ 0