WereWP » facebook http://werewp.com Daily WordPress news Tue, 22 May 2012 16:18:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 How to: create a Facebook iFrame application thanks to WordPress http://werewp.com/plugins/how-to-create-a-facebook-iframe-application-thanks-to-wordpress/ http://werewp.com/plugins/how-to-create-a-facebook-iframe-application-thanks-to-wordpress/#comments Thu, 12 May 2011 18:43:15 +0000 Jeremy http://www.werewp.com/?p=1535 templatic
]]> If you are working with Facebook, you must have been slightly worried when they announced the end of the FBML for page tabs. Within a few weeks, some alternatives have been created, and you could switch from the old FBML to some new system. But to me none of these solutions seem satisfying. And let’s face it, I am too much of a WordPress fan not to imagine merging the two systems. So I took the opportunity to start working on a WordPress plugin that would make creating Facebook iFrame applications dead simple for people administrating a WordPress site.



After a few days of work, here is what I came up with: WP Facebook Applications.

This WordPress plugin is simple to use: download it, install it and activate it on your blog, and a new “FB Applications” menu will appear. There you can create a new page for your Facebook tab, and you are guided through the process in order to keep it as fast and as simple as possible.

A few options are available: you define an image non fans of your page will see, then the content they will see once they “Like” your page. And you can decide to ad a Facebook comments form below that content.

Of course, this plugin is a work in progress: I would be happy to receive all your comments, remarks, ideas and bug reports in order to improve it and add new functionality if need. I actually have a few ideas and a small to-do list for future improvements:

  • Limit the size of the images that are displayed on the Facebook pages
  • Translate the plugin in my mother tongue, I have been lazy and did not deal with i18n so far;
  • Somehow make it easier to create the app on Facebook’s side
  • Allow the choice between the landing page for the non-fans, or the content directly
  • Add more possibilites for other Facebook elements (like the comments)

What do you think? Will you be using my plugin for your next Facebook tab?

Useful links :

If you want to follow the evolutions and news about the plugin, follow me on Twitter, or subscribe to this blog!

]]> http://werewp.com/plugins/how-to-create-a-facebook-iframe-application-thanks-to-wordpress/feed/ 7 How to: add Like button to WordPress pages http://werewp.com/tutorials/how-to-add-like-button-to-wordpress-pages/ http://werewp.com/tutorials/how-to-add-like-button-to-wordpress-pages/#comments Tue, 05 Oct 2010 17:49:18 +0000 Jeremy http://www.werewp.com/?p=1418 templatic
]]> In a comment on my older post explaining how to integrate Facebook Like button into your WordPress theme, Mike was asking how to add the button into pages, instead of posts like I had explained. In that post I will propose a solution to solve that issue.

The issue with the previous tutorial was with the code included in the header: it creates custom metadata for all posts, but not for pages. In order to address that problem, we simply have to add one more condition to the header:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraphprotocol.org/schema/" <?php language_attributes(); ?>>
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
	<meta property="fb:app_id" content="your_app_id" />
	<meta property="fb:admins" content="your_admin_id" />
	<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if (is_single()) { ?>
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
	<meta property="og:type" content="article" />
	<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php } elseif (is_page()) { ?>
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:type" content="article" />
	<meta property="og:description" content="<?php echo(get_post_meta($post->ID, "metadescription", true)); ?>" />
	<meta property="og:image" content="<?php echo(get_post_meta($post->ID, "thumburl", true)); ?>" />
<?php } else { ?>
	<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
	<meta property="og:description" content="<?php bloginfo('description'); ?>" />
	<meta property="og:type" content="website" />
	<meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />
<?php } ?>

This solution makes use of the custom fields which allow you to add metadata into each post or page. It means that you will have to specifyeach metadata manually for each page, but that’s something you should already be doing for the metadescriptions of your pages anyway! ;)

Fill in the metadata in your admin panel

The custom field panel should appear at the bottom of your edit panel y default. If not, check the box in the screen options and the panel should appear. Then, you only have to fill in the info like I have done on the screenshot below.

The key name you use for each value only depends on what you set in the header. In our case, I have used “metadescription” for the description and “thumburl” for the image path.

Another way of handling images

As you may have seen on the code snippet above, there is a different way of creating the image thumbnail for posts and for pages. You can in fact use either of these techniques; one uses the_post_thumbnail function introduced with WordPress 2.9, the other makes use of the custom fields.

  • the_post_thumbnail
<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
  • custom fields
<meta property="og:image" content="<?php echo(get_post_meta($post->ID, "thumburl", true)); ?>" />

And voilà !

That should be it. No need to worry about pages anymore. I would furthermore suggest you to use the same technique to define custom meta descriptions and keywords for each of your pages. That can help your SEO to have unique descriptions for each page.

Of course, if you know of another method, do not hesitate to let me know!

]]> http://werewp.com/tutorials/how-to-add-like-button-to-wordpress-pages/feed/ 12 How to: integrate Facebook videos on your WordPress blog http://werewp.com/tutorials/how-to-integrate-facebook-videos-on-your-wordpress-blog/ http://werewp.com/tutorials/how-to-integrate-facebook-videos-on-your-wordpress-blog/#comments Thu, 19 Aug 2010 13:11:20 +0000 Jeremy http://www.werewp.com/?p=1322 templatic
]]> Facebook is getting more and more popular everywhere on the net. Thanks to the Like button and other Facebook plugins, we can now interact and share content directly from all kinds of websites to Facebook. But what about embedding videos from Facebook to your website?
We have discussed about the integration of the Open Graph and Facebook connect earlier on this blog, but today I would like to show you how to embed a Facebook video, without having to copy and paste lines of code into your editor.

For that, we will make use of the WordPress shortcodes, that are a great and easy way to add features to your blog without having to install a plugin.
The idea is quite simple: we have a look at how Facebook videos are created, and then we replicate the embedding into a new shortcode.

Facebook videos have a unique id, that you can find in your address bar when viewing a video on Facebook. That’s the only element you will need to embed a Facebook video.

Adding the shortcode to your theme

In order to add the functionnality to your WordPress install, you will need to add a few lines of code to the functions.php file of your theme. If you do not have such a file, create it. This is easy to do and friendly to reseller hosting or any hosts for that matter.

Here is the function:

<?php

//Facebook Video Shortcode
function werewp_fn_fbvideo($atts, $content = null) {
   extract(shortcode_atts(array(
      "id" => '',
   ), $atts));
   return '<object width="400" height="224" >
   <param name="allowfullscreen" value="true" />
   <param name="allowscriptaccess" value="always" />
   <param name="movie" value="http://www.facebook.com/v/'.$id.'" />
   <embed src="http://www.facebook.com/v/'.$id.'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="224">
   </embed>
   </object>';
}
add_shortcode("fbvideo", "werewp_fn_fbvideo");

?>

Add it to your file, save, and upload to your server. You’re done!

Display the video on your blog

Let’s take the example of the video of the latest addition to Facebook services, FB Places. The URL of the video is as follows: http://www.facebook.com/video/video.php/?v=10150257497405484


The only thing you will need to insert that video on your blog is the id at the end of the URL: 10150257497405484.

Then, in your visual editor, simply add the shortcode fbvideo where you want your video to appear. Of course, replace the ID by whatever video id you would like to diplay!

fbvideo id="10150257497405484"]

And that’s how it should look! Happy blogging, with one more Facebook feature on your blog!

]]> http://werewp.com/tutorials/how-to-integrate-facebook-videos-on-your-wordpress-blog/feed/ 3 How to: integrate Facebook Open Graph Protocol into your WordPress theme http://werewp.com/wordpress/how-to-integrate-facebook-open-graph-protocol-into-your-wordpress-theme/ http://werewp.com/wordpress/how-to-integrate-facebook-open-graph-protocol-into-your-wordpress-theme/#comments Wed, 02 Jun 2010 21:08:53 +0000 Jeremy http://www.werewp.com/?p=1230 templatic
]]> A few months ago, Facebook team uncovered a new major addition of the Facebook API: the support of the Open Graph protocol. Open Graph is not new but the possibility to use it to connect your website to Facebook certainly help it to get more popular.

To put it simple, by adding different meta tags into the head of your page, you give out information about the specific content you deliver, and all Facebook services, such as the share feature or the Like button, will make good use of this information. In the same way, Facebook uses these tags into profile pages, fan pages and applications.

What are the necessary tags to add to your page ?

Here are all the tags needed:

  • Title: speaks fr itself, it is the title of your page or your article. This title will appear as title when people will share your article on Facebook, or like it.
  • Description: this part will appear as the default description text when people will share your article on Facebook. In WordPress, the best is here to use different descriptions according to the page you are browsing.
  • Type: this defines the category of the information you provide on your site. Types are defined in the Open Graph protocol, and for websites three types exist: Blog, Article, Website. In order to be precise, one solution is to define a different type if you are on the homepage or if you are browsing articles
  • URL: also speaks for itself – the URL of the page.
  • Image: this image will be added to the content when people share or add a comment using the FBML like button.
  • Site_name: speaks for itself, it is the name of your website.

To implement it within your WordPress theme, locate the header.php among your theme files, and edit it with the following variables.

Before to edit the files, you will need the facebook admin id, which can found in the Facebook insights page, when clicking the “insights for your domain” button on the top right. You can also specify your app id, if you are using the like button for example (see paragraph below).
You will also need to know the path to the main logo appearing in the header of your site. If you do not have any, I encourage you to create one, and to add into the images folder of your WordPress theme.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" prefix="og: http://ogp.me/ns#" <?php language_attributes(); ?>>
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
	<meta property="fb:app_id" content="your_app_id" />
	<meta property="fb:admins" content="your_admin_id" />
	<meta property="og:url" content="<?php the_permalink() ?>"/>
<?php if (is_single()) { ?>
	<meta property="og:title" content="<?php single_post_title(''); ?>" />
	<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
	<meta property="og:type" content="article" />
	<meta property="og:image" content="<?php echo wp_get_attachment_thumb_url( get_post_thumbnail_id( $post->ID ) ) ?>" />
<?php } else { ?>
	<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
	<meta property="og:description" content="<?php bloginfo('description'); ?>" />
	<meta property="og:type" content="website" />
	<meta property="og:image" content="<?php bloginfo('template_url') ?>/path/to-your/logo.jpg" />
<?php } ?>

Then we will add the like button to your site, to show an example of the use of Open Graph data.

How to add the like button to my WordPress blog?

After adding the previous information into your header, we will need to decide of a place for the Facebook like to appear, and call Facebook Javascript SDK in order to connect our website and Facebook.*

Before that, you will need to create a Facebook application: no need to be afraid, it can be done in a few steps:

Connect URL

Next step will be to integrate the like button to our articles. For this locate and open single.php in your theme files, and add the following where you want the button to appear. If you want it to appear right after your article content for example, locate the_content fonction, and add it after:

<fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="450" action="like" colorscheme="light"></fb:like>

You can change the layout of that button by changing some of the parameters: have a look at the Facebook like plugin page for more information.

Then, in order to connect the like button to Facebook, we will need to add the reference to Javascript SDK to the footer of our theme*. For that, locate your functions.php file, and add the following line to it:

<?php
// load facebook API
add_action("wp_footer", "werewp_facebook_api");

function werewp_facebook_api()
{
	$fbapi =  "your_app_id"; // Your application ID
	echo
			"<div id=\"fb-root\"></div>
			<script>
			  window.fbAsyncInit = function() {
			    FB.init({appId: $fbapi, 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>
			";
}
?>

*As a sidenote, if you are already using some Facebook features on your site, such as a badge for example, you will have to make some changes to that badge and use only FBML code in there, as Facebook Connect is already called now.

And you’re done! The necessary information is now in the header among the other meta data, the Facebook connection is made through the Javascript SDK, and the facebook like button is added with FBML code. That’s it, nothing else is needed!
Let me know if it works, and share it with us in the comments! Thank you, and don’t forget to follow me on Twitter! ;)

Update: Following a comment from Mike, here is an extension of that tutorial to include descriptions and custom images for pages.
Lee H also pointed out a solution for those of you who use an old version of WordPress, since the above tutorial makes use of the_post_thumbnail function introduced with WordPress 2.9.

]]> http://werewp.com/wordpress/how-to-integrate-facebook-open-graph-protocol-into-your-wordpress-theme/feed/ 82 Today in WordPress world – 14/09 http://werewp.com/links/links-for-2009-09-14/ http://werewp.com/links/links-for-2009-09-14/#comments Mon, 14 Sep 2009 14:03:14 +0000 Jeremy http://www.werewp.com/uncategorized/links-for-2009-09-14/ templatic
]]>
  • How To Integrate Facebook With WordPress « Smashing Magazine
    WordPress and Facebook are two widespread online tools nowadays. Luckily for all of us, Smashing Magazine proposes us plugins and tutorials to integrate Facebook with WordPress in an easy way.
    • ]]>     http://werewp.com/links/links-for-2009-09-14/feed/ 0