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:
- Go to http://www.facebook.com/developers/createapp.php
- Give a name to your app, validate,
- Copy the app ID that is given to you
- In the Connect tab, fill in your blog’s homepage URL in the Connect URL field, and save.
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.
83 replies on “How to: integrate Facebook Open Graph Protocol into your WordPress theme”
I’ve tried this and keep getting:
Error: b is undefined
Source File: http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php
Line: 13
Do you have any other social plugins implemented on your site already? They may be the ones causing the issue.
In order to avoid any conflicts, if you have more than one social plugins implemented on your blog, you only need to call the connect script once.
Wow… great job putting this together. I was trying to implement Open Graph on my blog, but the code wasn’t nearly as elegant as your is.
I’m getting an error though when I use this code. Everything works except for the og:image line for single posts… it causes my single post pages to crash out.
Do you have any ideas what might be crashing? The index page loads fine.
Thanks!
Cary
Weird, I don’t know what could cause this.
I see it looks ok on your own blog, it seems you’ve managed to find the issue. Could you let me know what the cause was, so that I can update my post if necessary?
Thanks, well yes and no, I finally got it to work, but only indirectly… leaving the code in for og:image continued to give me an error no matter what I did.
I finally discovered a function called catch_that_image() ( http://www.wprecipes.com/how-to-get-the-first-image-from-the-post-and-display-it ) and installed that in my functions.php file. Then I was able to make a call to that function to get the url for the first image in the post.
It’s not a thumbnail, but it works! Thanks for getting back to me! I’m still using the rest of your code, and it’s just what I needed. :)
Oh thanks for the heads up! Now I know what went wrong with the function for og:image. It will only work if you theme uses the_post_thumbnail function that was introduced with WordPress 2.9. If not, then there won’t be any thumbnail displayed, and depending on your WordPress version, you may get an error message indeed.
I have got to edit my article to correct that problem then!
[…] 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 […]
Thanks ALOT, I’ve been searching endlessly trying to find a way to incorporate OGP into WP! :-)
I’ll use this info later to make one of those websites like ‘golikeus’ to build an enormous amount of fanpages for possible cpa monetization later!
Cheers,
Jason
I was wondering, do you need to link to the FB Javascript SDK in your pages if all you want to use is the Open Graph meta tags in your header? The reason is, I don’t want any like buttons or friends displayed on my site, however I think it’s a great idea to provide the a universal meta data such as Open Graph for websites like Facebook that may use this should someone post my URL to their FB account. Does that make sense? Thanks!
Sure, you can integrate only the meta info without the Like button. I think that’s a clever idea if you want to control the way your blog info is displayed on Facebook, without adding new elements to your website!
Hi Jeremy,
Great article. One thing I didn’t get though – if I have a blog and I don’t have a corresponding facebook page for it, can I still connect that blog to open graph? What id do I send in the relevant part in the header?
Thanks.
Yuval
If you want to integrate the Like button like I explained in that article, you do not need to have a Facebook page. However, you will need to create a Facebook application (which is not public, only you will see it) in order to use the Javascript SDK. That’s this app ID that you will specify in the header.
Thanks Jeremy, Hopefully I will manage from here on.
Jeremy, great post my friend! Thank you so much for sharing this. I’m not the Facebook guru and some things here are new to me as well. Unfortunately I missed the F8 conference and didn’t catch all the new stuff that Facebook yelled that day, but yeah, the Open Graph Protocol seems quite interesting, and Facebook integrating it definitely a step forward.
What’s more interesting (in my opinion) is the Facebook Graph API, and that picture I posted yesterday was mainly based on that, which might give you a little bit more control over what Facebook posts and what it doesn’t. Besides semi-automatic (automated) posting is also an option, and as you might remember I have a project called Twibots ;)
Anyways, thanks again for the post and cheers!
~ @kovshenin
Thanks! I will stay posted on your articles about the Graph API then! ;)
Jeremy,
THANK YOU for explaining all of this. I am still trying to wrap my head around this open graph thing. Your post certainly helped!!!
Maybe you can explain the one thing I don’t seem to be able to find an answer to.
We have been running a blog since 2007 (www.theapplepress.com). About a year ago we created a facebook page (http://www.facebook.com/TheApplePress) for the blog. We are about to relaunch our website with an all new design and I’d like to integrate Open Graph and the like button at the same time.
Now, the thing I really don’t understand is how I would integrate open graph with our existing page. I understand that if I enter my admin_id that a new page would be created, correct? Is there any way I can just use my existing page? Or is that not how this open graph thing works? Just seems kind of silly to me to not be able to use an already existing Facebook page.
Also, would I still need to create a Facebook app or is it possible to just use my page_id for the like button as well?
It’s all just so confusing to me. lol
Anyway, thanks so much for putting this together. I’m about to grasp it all, I think!
@Philipp You’re welcome! :)
To answer your 2 questions:
– For Facebook insights, you can use your existing page, no need to create a new one. So you can add property=”fb:admins” content=”474225375569″ in your header.
– In order to use the FBML version of the button like I explained in my tutorial, you have to create an application and add property=”fb:app_id” content=”your_app_id” to your header. However, no need to worry about that application, it takes one minute to create (just follow the steps I have described), and you’ll never have to worry about that application again.
Thanks once again!!! With your advice I will go and try to implement the open graph header as well as a like button for every page! May hit you up with another question at some point. ;)
Also, if you’re ever in Los Angeles, will you hit me up so I can take you to dinner or something? Really appreciate the advice!
Hi Jeremy,
So I integrated the code as suggested and the “like” button shows up on the bottom of every page! I’m not 100% sure that it works correctly, however.
As a default the button always shows the like button without any numbers. When I “like” it myself to test the function, it shows as a thumbs up with “1 person” in it. However, once I refresh the page it usually changes to “2 people” all of a sudden. On the post below it even changed to “6 people” after reloading the page.
http://www.theapplepress.com/2010/08/30/ios-4-bluetooth-audio-issues-exposed-video/
It also show a much plainer version of the “like button” than the example from facbook: http://tap4.us/qar .Faces don’t show up either, even though I changed that value to “true”. Also, how are these likes getting connected to my page? I don’t see a difference.
When I publish the like to my wall by adding some text, it often also grabs the default gravatar picture instead of the featured image from the post. For this post, for example:
http://www.theapplepress.com/2010/09/03/apple-tv-price-apps-content-expectation-vs-reality/
I added all the code as you suggested. Besides I wasn’t able to find the “connect tab” in my application settings. My tabs look different than the ones in your screenshot as well. Here’s what I got:
So I just entered the address under URL in the web site tab instead.
Do you know what’s going on here? Did I make a mistake?
Here’s the code that went into my adsense.php (the section that shows up under each post):
<fb:like href="” layout=”button_count” show_faces=”true” width=”450″ action=”like” colorscheme=”light”>
The first part is from a twitter plugin. Unfortunately I can’t get those two to show up next to each other, but that’s a different problem.
Do you have any thoughts?
Would really appreciate it!
Thank you!
Philipp
Jeremy,
Please ignore the comment I posted 15 minutes ago! I made a php error. I think I got it to work for the most part. Thank you for this amazing blog!!!
Just have a few questions left:
As a default the like button usually shows 0 likes. When I hit “like” it shows with a thumbs up and 1 person liking it, as expected. However, once I refresh the page it usually changes to “2 people” all of a sudden. On the post below it even changed to “6 people” after reloading the page.
http://www.theapplepress.com/2010/08/30/ios-4-bluetooth-audio-issues-exposed-video/
It also show a much different (plainer) version of the “like button” than the example from facbook: http://tap4.us/qar.
I added all the code as you suggested. Besides that I wasn’t able to find the “connect tab” in my application settings. My tabs look different than the ones from your screenshot. Here’s the tabs I’ve got in my app settings:
So I just entered the address under URL in the web site tab instead. Was that the right thing to do? Why do my app settings look so different?
Here’s the code that went into my adsense.php (the section that shows up under each post):
<fb:like href="” layout=”button_count” show_faces=”true” width=”450″ action=”like” colorscheme=”light” ref=”post_bottom”>
The first part is from a twitter plugin. Unfortunately I can’t get those two to show up next to each other (no matter what I try they show up below each other), but that’s a different problem, I guess.
Do you have any thoughts? Have I done everything correctly? I just don’t see any likes being connected to my page. Am I supposed to?
Thanks a million!!!
Philipp
Hm! This is very strange! It seems as if the code
<fb:like href="” layout=”button_count” show_faces=”true” width=”450″ action=”like” colorscheme=”light” ref=”post_bottom”>
posted in my adsense.php gets executed as an iframe! However, when I add it through a hook before my title’s for example, it seems to be executed as xfbml.
I have both enabled right now so you can see the difference.
@Philipp:
I have had a look at your site, I’d have a few remarks:
– you will want to correct the way you inserted the code I mentioned in the head: the tag has to be used once only, so you should replace your old tag by the one I provided you.
– Unfortunately, the like button will always be hosted on Facebook site, so you have limited power over the look of it: Facebook is currently switching from the old styled button to the new one.
– About the number of likes: do not be surprised if some of your pages have more than 1 Like, it simply means that people already shared this page on facebook, before you included the Like button. The counter in fact counts both Likes and Shares.
– If you do not see the faces of the people who liked the page, it may be due to different reasons: either the faces could be there, but your div is not big enough to display it, or either of these people are your friends on Facebook, and you do not have access to their profile pictures, either you need to change the like button parameters to standard layout.
I hope that helps!
Thanks for the tutorial, very well done. Your approach for the meta tags is awesome! In my setup before, I struggled with getting all the post information outside of the loop so my and the php with it were very messy. Line 2 of your example blew me away… so simple “A caveman could do it”, yet it never occurred to me :) So now for the most part, I’ve adopted all your examples and things work great.
I’ll be bookmarking you to explore another day.
Cheers, Lee
Thanks for the comment! I am happy I could help!
Thank you Jeremy! I cleaned up the code!
This part:
is now right before the tag.
The rest of your code is within the tag. Is that correct or should I also place this before the head tag?
So excited that his is working! :)
I want a like button for each page, and I want to change the metadata for each. How can I do this?
Is there a way to do put this within a page template? Then I can just create a page template for each page.
Thanks!
This can be done by expanding the code I gave in that tutorial, and using the custom fields of WordPress. I will be publishing a tutorial about it in the next few days, stay posted!
Sounds good, thanks! I would need to change types with each page too, as they wouldn’t all be articles. I would also want to specify a specific image for each page. I’m wondering if the easiest way to do it, would be to write code in the header to get a .txt file with all the meta in it. Then create a file for each page. I’m no PHP whiz… thoughts?
Looking at it closer… I guess the easiest (in the long run), and best way, would be to modify some code like you said.
Give me a few hours, I will try to find some time to put that code together asap!
Here’s the code I use in my header. It’s dynamic to handle different meta on main page and posts. The dynamic image for the post page is handled by a function that searches for first image in post content. A person could use the new post thumbnail function if their theme is upgraded. Upgrading wasn’t a option in this case as the new feature is only valid for images uploaded AFTER activation. So this function should work in all cases. I’m posting via pastebin since I know the code will get messed up posting here.
Hope it helps someone.
Pastebin has a annoying habit of adding extra lines to code, but it should still be usable. Note that I’ve included header code and function to paste into functions.php. Details are commented. http://pastebin.ca/1954936
Lee
Hi Lee,
Will that image code work for images from a nextgen gallery? My first and only image on the page is from that plug. I was thinking of instead just creating a 50×50 image for each page, and naming it after that page. Then doing something like:
<meta property="og:image" content="/images/fb/.jpg” />
I’m a PHP and WP newb. I know bloginfo(‘name’) is for site name, how about page name? Thoughts on this?
Thanks!
Also, line #32
Is there a way to get it from page excerpt, as this only seems to apply to posts?
@Mike: the code Lee provided us won’t help you much, since it is essentially the same code than in my tutorial. Only the image grabbing is different.
If you want to add the Like button to pages with custom image and content, you need to have a few more lines. I will provide you with that code when I get some free time, in a few hours.
@Mike… As far as grabbing a image by Nextgen is concerned. I haven’t a clue! LOL I would think that as long as the plugin fires before the content is displayed and the plugin added the image to the content, the catch_that_image function would find it. Also worth mentioning. I don’t think you really have to bother resizing the images to 50×50. Facebook doesn’t seem to complain about anything I’ve thrown at it. It just scrapes the image and creates a thumb on the FB server side.
I’ve never tried to grab a excerpt on a regular WordPress page. But I can’t see in the codex that a page excerpt is called in a different way then a post excerpt. Even though posts and pages are not the same, they really act the same in so many ways. Give it a try, it couldn’t hurt. My test site is offline ATM and I’m not really keen on trying it live on my real site. Not today anyway :)
Also the “is_single” condition is above code is to test specifically for POSTS. So it won’t work on your pages. Change it to “is_page” or if you want it to work for posts and pages “! is_home AND is_single OR is_page”. I used AND rather then two &, and OR rather then two |, because I’m not sure this comment filter will let it pass. Basically if page is a page, and is not home, or is a post page… the meta will be written in the second example.
Oh! This URL is a Facebook tool that lets you see exactly what Facebook sees when it checks your submitted page. Very handy.
http://developers.facebook.com/tools/lint/
@Jeremy – Thanks!
@Lee – Thanks, I have been using that tool. I wonder if they have an offline one?
I will try your code and function for the image to see if that works with nextgen, and report back!
Doesn’t work :(
I’ll just go my custom icon route. So bloginfo(‘name’) appears to call the site name. Ideas on how to call just the one (current) page’s name? I’ve been digging, but haven’t come up with anything yet…
[…] 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 […]
I have created this to make the “type” specific to the page:
If the page is a sub-page of artist, then musician is the type. If it’s a sup-page of release, then album. Otherwise, the type is simply webpage. However it’s not working. I think because bloginfo(‘name’) isn’t the page name, but the site name?
Oops, here’s the code: http://pastebin.ca/1955016
I have just posted a new article to address your issue with pages: How to: add Like button to WordPress pages
You can use the custom fields to solve your type differences as well. I guess you’ll easily figure it out from the article!
Got this working perfectly on my website with some tinkering and help from Lee H’s comment.
Has a default set of actions, but if there’s an image in the post it uses that instead of the default avatar I’ve assigned. Seems to be working.
Would be awesome if it could detect a Vimeo embed and let Facebook users know so they can just hit ‘play’.
[…] found a great article describing how to support opengraph on your WordPress site. Simplified, opengraph can be used to […]
Hi, I read that facebook are depricating FBML:
http://developers.facebook.com/docs/reference/fbml/
Does that mean we cannot use your method here for integrating facebook features with WordPress sites? All I can seem to find is that they are “depricating FMBL in favour of iframes” so it’s not clear if what you’re using here is going to stop working when they pull the plug…
Thanks if you can shed some light.
T
No worries about that: indeed FBML will be deprecated in favour of iFrames, but:
1. “deprecated” only means that it is not going to be supported anymore, not that the different fbml tags will cease to work from one day to the other;
2. the most important FBML tags like the ones in that article will always be supported;
3. this change in Facebook roadmap concerns only the Facebook applications and Facebook fan pages so far. It means that if you built an Facebook app with FBML, or if you used the “FBML for pages” Facebook application for your fan page, you should start to look for another solution.
But for Facebook on sites, like in that tutorial, there are no changes in the near future, no worries.
OK thanks for the info Jeremy, that makes it a bit clearer.
[…] har redigerat en kod som är skriver av http://www.werewp.com/wordpress/how-to-integrate-facebook-open-graph-protocol-into-your-wordpress-th… och http://tips4php.net/2010/07/open-graph-enable-your-wordpress-blog/Okay, du måste göra två […]
[…] In dem Bericht How to: integrate Facebook Open Graph Protocol into your WordPress theme findet ihr weitergehende Infos. Verwandte Beiträge:Facebook -Gefällt mir Button- in WordPress […]
[…] How to: integrate Facebook Open Graph Protocol into your WordPress theme […]
above all other tuts i found, yours are more detail than the other. thanks for that. i dont understand what/how this open graph things work. try again and again from different tuts to the other, still i cant post to my wall with image.
fyi, i created app for Add Link to Facebook plugin to work but unfortunately i found that there is no image at all to any of my blog page. it’s only post title, excerpt/description. currently i disabled all social plugins but still have no luck.
can u guide me briefly what should i do now, somehow like “integrate Facebook Open Graph Protocol into your WordPress theme for Dummies”
=) maybe u gonna ask me to delete this and that, no worry, i’ll do it.
url to my blog: http://www.shahransams.com/blog
im using wordpress 3.1.0
hope u can help me.
@Shahran Sorry for the late reply. My guess is that you do not the “featured image” functionality introduced with WordPress 2.9. Thus this part of my tutorial will not work for you. I suggest you have a look at another article I have published about your case: http://www.werewp.com/tutorials/how-to-add-like-button-to-wordpress-pages/ That should help you out!
[…] How to: integrate Facebook Open Graph Protocol into your WordPress theme […]
[…] das descrições. A solução é usar o código PHP a seguir (baseado em um código encontrado no werewp, sendo que removi algumas funções desnecessárias e acrescentei condições para quando a imagem […]
I have an external image on a post, for that Facebook displays the first image found on the whole page. Instead how can I make it select that particular embedded image?
Thanks.
I am not sure I understand you here. Could you provide me with an example URL for your problem?
I will try to be a bit more clear. Does “og:image” property work if I have an external image on a post? I mean one which I have not uploaded with the WordPress uploader, but one that is on Picasa.
I had used the code as you said here, but when someone “like” the post always some random image from the page such as logo or something else is shown on their Facebook profile along with the link. Every other open graph property works fine.
Check this url – http://goo.gl/vfRH1. Currently I am using a code that was shown on WPbeginner to catch the first image on a post, but I guess that doesn’t help as well.
Understood. Unfortunately, if you don’t upload the image, this is not going to work properly. An image that is simply added to your post without any link to the post is not stored in the db as attached to that post, so there is no simple way to make this work I am afraid.
Ok. Thanks. Is it possible to do that by defining the image link with “thumbnail” in “Custom Fields,” or are you aware on any other method?
That would work, yes. That’s probably the best solution in your case. Insert this in the head of your theme:
https://gist.github.com/1101769
And then define the URL of the image in each one of your blog posts.
Thanks Jeremy. That did it! :)
[…] Read this post about Facebook Open Graph WordPress Integration to learn about adding proper Open Graph meta elements to the header of your site. […]
Thanks for great article. Unfortunately, I’m getting a white bar above my header, when I insert the code. Any idea what may be causing this? Thanks!
Could you give me the URL of the page where it happens? I’ll have a look at it and let you know what causes the issue. Without it, it is a bit difficult to guess.
Thanks Jeremy. I removed the open graph code for now, because of the white bar that appeared at the top of the header, so it’s not there right now. My url is panachic.com.
This post definitely cleared some things up for me, thank you. I’m in a bit of a different situation. I built my blog posts using custom fields and am wondering the best way to add a like button on the main/category pages so that users can share the content contained within a certain custom field.
One of my fields is lyrics, and I would like people to be able to share these lyrics on facebook,Is this extremely difficult to do?
It is not extremely difficult, no. You will only have to change your Open graph meta data to pull values from your custom fields instead of pulling values from your post. See my other post for example; there, I pull the og:description and the og:image from custom fields.
Simply replace metadescription with the name of your custom field to have the description coming from there.
I hope that can help!
[…] are easy ways to set this image if you are using WordPress or Drupal as your blogging / content management […]
Hello and Happy New Year! Your article seems very clear, but I still get a message about no admin data found. I added the code to my masterpage, but I have also tried to my index page. Below is the code I have. I am not a web developer by any stretch, but I am doing my best. This is a little side project I am working on.
I am afraid I won’t be able to help you much. The code you posted is not related to Facebook at all, so I am not sure what you tried to achieve with this code, sorrY.
[…] Εδώ είναι ένας εξαιρετικός οδηγός, που περιγράφει την εγκατάσταση των meta tags του Open Graph καθώς και τον κωδικό για το FB Like. Προσοχή υπάρχει ένα update στο τέλος του post. […]
I have an issue which I’m not sure how to fix. I use a plugin for reviews, which generates a global ranking table on my category pages. breaks my category pages and causes my ranking table to parse first at the top of my site, outside the template.
I don’t program so… Would there be an issue in moving around the data directly below this code? or removing that code would have what effect?
Just noticed it stripped out the code in my last post.
php if (have_posts()):while(have_posts()):the_post();endwhile;endif;
Hi, I love the information you gave in this article. I am trying to find a bit of help with facebook coding and have no idea where to look? I basically have a wordpress site (chocfudge.com.au) that I currently publish individual articles automatically onto a facebook group page using “Add link to Facebook” wordpress plugin. Works a treat except it has my name as the referrer rather than the author’s. Spoken to the plugin author who couldn’t help. Any ideas where to go to to get professional help? Thanks again
Hi, I want to achieve something like IMDB site (https://developers.facebook.com/docs/opengraph/) has done… If user like product on my site I want them to list it under users Activities and interest section on user profile … I tried some examples but if I click Like button they simply post my data to FB wall but didn’t list the data under Activities and Interest section.. Can you suggets some thing??? Thanks.
Love you tutorial!
Really helpful.
It does not look like http://opengraphprotocol.org/ is a valid URL anymore. Any ideas on how to fix the code now?
Thanks for the warning! I have updated the post with the new Open Graph URL: http://ogp.me/#types
Your code also needs to be changed where it is referencing that old website.
@Marie: Indeed! Done.
This code works on my website for attachment thumbnail images and show correct img on facebook, but how to set default img for other post without img?
Thanx,
Bojan
@Bojan: Try the following (not tested, but it should work):
Add Open Graph data to your header, with a fallback when there is no post thumbnail
Simply replace the path to your logo.
Hi,
I developed a simple but useful wordpress plugin for this purpose:
http://wordpress.org/extend/plugins/wp-open-graph-meta/
German description of the plugin:
http://omaxis.de/wordpress-plugins/wp-open-graph-meta/
Hope this helps :)