WereWP » WordPress http://www.werewp.com Daily WordPress news Thu, 29 Jul 2010 15:10:18 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 How to: integrate Facebook Open Graph Protocol into your WordPress theme http://www.werewp.com/wordpress/how-to-integrate-facebook-open-graph-protocol-into-your-wordpress-theme/ http://www.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 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" 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 } 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! ;)

]]> http://www.werewp.com/wordpress/how-to-integrate-facebook-open-graph-protocol-into-your-wordpress-theme/feed/ 6 Today in WordPress world – 26/01 http://www.werewp.com/wordpress/links-for-2010-01-26/ http://www.werewp.com/wordpress/links-for-2010-01-26/#comments Tue, 26 Jan 2010 14:07:07 +0000 Jeremy http://www.werewp.com/uncategorized/links-for-2010-01-26/
  • 2010 Theme Development
    Do you want to follow the development of the future default WordPress theme, delivered to you with every installation? Then you might want to have a look at this website from time to time, to see how things are going on!
  • WordPress Theme Development Checklist Tool | wplover
    A useful checklist to keep next to you while designing WordPress themes: you can check the elements one after another and make sure you have everything before submitting your template to the directory.
    • ]]>     http://www.werewp.com/wordpress/links-for-2010-01-26/feed/ 0     On The Go: Hand drawn theme from Elegant Themes http://www.werewp.com/wordpress/on-the-go-hand-drawn-theme-from-elegant-themes/ http://www.werewp.com/wordpress/on-the-go-hand-drawn-theme-from-elegant-themes/#comments Wed, 06 Jan 2010 16:27:24 +0000 Jeremy http://www.werewp.com/?p=1092 Once again, Nick from Elegantthemes.com has released a stunning theme, graphically beautiful and packed with lots of important features.

    On The Go proposes a CMS layout with a featured section by default, but a blog layout is also available. This design is available in 4 unique color schemes, all declinations of this hand drawn style that appears in all the elements of the theme.

    Of course, the theme is full of the features common to all themes from Elegantthemes, now accessible through the new admin theme panel developed last year.

    I could say more about that theme, but I guess the best I can do is to advise you to go have a look for yourself!

    ]]> http://www.werewp.com/wordpress/on-the-go-hand-drawn-theme-from-elegant-themes/feed/ 0 WordPress 2.9 is out! http://www.werewp.com/wordpress/wordpress-2-9-is-out/ http://www.werewp.com/wordpress/wordpress-2-9-is-out/#comments Sat, 19 Dec 2009 09:28:14 +0000 Jeremy http://www.werewp.com/?p=1082 Just for the week end, and right before Christmas, Automattic makes us a great present, with the release of WordPress 2.9!

    We have been talking about 2.9 for a while now, if you followed that blog, you got to know some of the new features that will come with that release, but here is a small selection of articles in case you would want a quick summary:

    WordPress 2.9, oh so fine

    • Announcement from Matt

    Sidebar (widget area) descriptions in WordPress 2.9

    • Justin Tadlock describes the latest widget area description abilities of WordPress 2.9

    Geeky bits in WordPress 2.9

    • Joost de Valk talks about the hidden secrets of 2.9!

    Everything you need to know about WordPress 2.9’s post image feature

    • Justin Tadlock explains us all about the post image feature

    The Ultimative Guide For the_post_thumbnail In WordPress 2.9

    • Michael Preuss describes us what we can do with the new post_thumbnail function

    WordPress 2.9 Packs in Loads of Features: Hands-on Review

    • Keith Dsouza makes a tour of all 2.9 features

    Version 2.9

    • From the official codex page, all changes of WP 2.9

    So, Enjoy this new WordPress version, and do not hesitate to give your feedback after you installed. I have just made the switch here, and somehow I fell like the blog is a bit faster than before. Maybe it is a just a feeling that I have though, so let me know if you realize the same for your own blog!

    ]]>     http://www.werewp.com/wordpress/wordpress-2-9-is-out/feed/ 0     Premiumthemes.net rebrands and becomes Templatic! http://www.werewp.com/wordpress/premiumthemes-net-rebrands-and-becomes-templatic/ http://www.werewp.com/wordpress/premiumthemes-net-rebrands-and-becomes-templatic/#comments Thu, 10 Dec 2009 17:06:12 +0000 Jeremy http://www.werewp.com/?p=1066 Templatic WordPress theme club

    Do you remember Premiumthemes.net? Created by R. Bhavesh, also the creator for cssace.com, it has been one of the places to look for high quality WordPress themes for some time now.

    With frequent releases of themes for all needs (from the wedding site to the kitchen diary), it fits of the needs of everyone and also offers a club membership that will fit the needs of a lot of WordPress developers: for $249 you get access to all the themes and PSDs!

    Go have a look! If Templatic is as successful as Premiumthemes.net was, this website is going to have an impact on the theme market!

    ]]>     http://www.werewp.com/wordpress/premiumthemes-net-rebrands-and-becomes-templatic/feed/ 0     Today in WordPress world – 09/12 http://www.werewp.com/wordpress/today-wordpress-world-0912/ http://www.werewp.com/wordpress/today-wordpress-world-0912/#comments Wed, 09 Dec 2009 14:08:17 +0000 Jeremy http://www.werewp.com/?p=1059 A new theme from Elegantthemes:
    Lumin WordPress theme

    Lumin WordPress theme

    This theme comes in three different colors and seems perfect for a Portoflio site.

    Got urgent Wordpress questions?

    WordPress questionsThis new project by Darren Hoyt proposes help from pros to solve Wordpress emergency issues. You have been looking for the answers, without success? You did not have time to solve this issue and your project has to be handled by tomorrow? WPQuestions seems to be the good place to start.

    ]]>     http://www.werewp.com/wordpress/today-wordpress-world-0912/feed/ 0     Need some help coding your WordPress theme? http://www.werewp.com/wordpress/need-some-help-coding-your-wordpress-theme/ http://www.werewp.com/wordpress/need-some-help-coding-your-wordpress-theme/#comments Wed, 09 Dec 2009 09:47:29 +0000 Jeremy http://www.werewp.com/?p=1054 For all beginners with WordPress, and sometimes even for pros, a bit of help is needed when looking for a code snippet or a special WordPress function. Of course, Codex is here for that, and there are plenty of great tutorials on the Internet, but sometimes it is not enough: the information can be hard to find, or you may not have the time to look.

    In such cases, a WordPress search engine would be handy: that it where WPLookup comes in:

    Wp Lookup

    The idea is simple: using tools such as PHP Cross reference of WordPress source, from Yoast, and looking into the Codex, this search engine gives you the answers you need in just a search. And to make it even simpler, you can add it to your browser default search tools.

    To conclude, this search engine will help you find info about WordPress functions in a few seconds. And if you are looking for other tools to speed up your coding process, do not hesitate to use WPLookup in parallel with these 3 other tools:

    ]]>     http://www.werewp.com/wordpress/need-some-help-coding-your-wordpress-theme/feed/ 1     DO NOT download WordPress themes from untrusted sources http://www.werewp.com/wordpress/do-not-download-wordpress-themes-from-untrusted-sources/ http://www.werewp.com/wordpress/do-not-download-wordpress-themes-from-untrusted-sources/#comments Tue, 08 Dec 2009 22:16:07 +0000 Jeremy http://www.werewp.com/?p=1050 As WordPress is geting more and more popular, there are more and more people out there ready to take advantage of the situation and propose you free products, however these free products are not always what they seem. With the popularity increase of Premium theme markets, these shady websites can be found more and more easily, and end users end up using themes with encrypted code in them.

    So please, and I am here relaying the info published on themelab.com and wpengineer.com recently, DO NOT download WordPress themes from untrusted sources. Leland posted lots of solutions and demonstrated pretty well how dangerous it can be to trust in such websites, so do not hesitate to go have a look at his post, it could avoid you lots of issues in the future!

    ]]>     http://www.werewp.com/wordpress/do-not-download-wordpress-themes-from-untrusted-sources/feed/ 2     My Snippets WordPress Plugin http://www.werewp.com/wordpress/my-snippets-wordpress-plugin/ http://www.werewp.com/wordpress/my-snippets-wordpress-plugin/#comments Thu, 03 Dec 2009 18:05:35 +0000 Jeremy http://www.werewp.com/?p=1045 My Snippets: WordPress Plugin.

    Another great plugin from Justin tadlock, that will allow you to master your plugins better than ever!

    What this plugin does is add an extra meta box on the post editor that allows you to input custom content. This content is then displayed using the Snippet widget in any widget area you choose.

    ]]>     http://www.werewp.com/wordpress/my-snippets-wordpress-plugin/feed/ 0     Today in WordPress world – 19/08 http://www.werewp.com/wordpress/links-for-2009-08-19/ http://www.werewp.com/wordpress/links-for-2009-08-19/#comments Wed, 19 Aug 2009 14:23:19 +0000 Jeremy http://www.werewp.com/?p=876
  • 23+ Excellent Tutorials For WordPress Theme Developers

    • Here are 23 tutorials to help you get the best out of WordPress. Hacks, good use of tags, display options… This list can be interesting for everyone!

    ]]>     http://www.werewp.com/wordpress/links-for-2009-08-19/feed/ 0