Adding Facebook Like Button dinamically on WordPress posts is easy, there’s a tut on it in wpbeginner, to summarize the tut, let just say that you can add like button by adding this code below on single.php file on WordPress themes
You can add this code under the title of post (the_title) or under the content (the_content), or anywhere you like actually, the code uses permalink that wrap in php url_encode, there’s a styling for the frame, by using scrolling, border and inline css.
1 2 3 4 5 6 | <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe> |
But if your posts is about a product like movies, books, clothes or anything, you could add metadata on it. Adding additional info about the posts is by using the Facebook Open Graph Protocol. I’ve stumbled to Facebook Open Graph while developing on my wife online store using WordPress in Jongkok.com.
The Open Graph protocol enables you to integrate your Web pages into the social graph. It is currently designed for Web pages representing profiles of real-world things. things like movies, sports teams, celebrities, and restaurants.
There’s an extensive explanation on what kind of additional data you could add on Open Graph Facebook.
There’s a lot of them, you could check it on the Open Graph page. but i’m only going to use the ones on this code below and for the example product i use LOLcat book
The required ones are
1 2 3 4 | <meta property="og:title" content="LOLcat Colleckshun"/> <meta property="og:type" content="book"/> <meta property="og:url" content="http://lolmart.com/product/i-can-has-cheezburger-a-lolcat-colleckshun/"/> <meta property="og:image" content="http://test-lolmart.com/wp-content/uploads/2010/05/ICHC-book1-thumb.jpeg"/> |
The recommended one
1 2 3 | <meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID"/><!-- You could use 2 user or by apps ID--> <meta property="og:site_name" content="lolmart"/> <meta property="og:description" content="The original I Can Has Cheezburger book is a favorite gift item that makes you and your friends laugh with joy.."/> |
The meta data should be put on the header section. To applied it to WordPress, each meta data, i’m going to use WordPress function in header for single posts (header.php), the final code will be look like this
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php // facebook opengraph if ( is_single() ) { ?> <meta property="og:title" content="<? single_post_title(); ?>"/> <!-- The title of product --> <meta property="og:type" content="book"/> <!-- look what type of product on opengraph --> <meta property="og:url" content="<?php the_permalink() ; ?>" /><!-- permalink --> <meta property="og:image" content="<?php echo get_post_meta($post->ID, "image", $single = true); ?>"/> <!-- image use is 3:1 ratio, i’m using custom field named “image” for this --> <meta property="fb:app_id" content="xxxxxx"/><!-- your web app id, or use user ID --> <meta property="og:site_name" content="YourWebsite.com" /><!-- your site name --> <meta property="og:description" content="<?php the_excerpt(); ?>" /> <!-- for the description, while posting a product make sure the excerpt are filled --> <? } ?> |
That’s it!
u may also like this :
One Comment
Thanks Hardien,
I’m using the thematic template with my own custom child theme. Just as a hint for your other readers. If using child themes you can put the Meta Property PHP above into your functions.php
The code should look like this
function childtheme_override_headprofile() {
$content = '' . "\n";
echo apply_filters('thematic_head_profile', $content);
if ( is_single() ) { ?>
<meta property="og:title" content=""/>
<meta property="og:url" content="" />
<meta property="og:image" content="ID, "image", $single = true); ?>"/>
<meta property="og:description" content="" />
}
Thanks again for the hint that got me going on the solution for me.
Dale