How to Add Facebook Open Graph Meta Tag to your wordpress
Description:
Adding open graph metatags to your header it’s important because every time you add a social plugin and one of your visitors will share content, or like posts or send a url a lot of information will be attached on facebook.
In this tutorial i’ll show you how to add these meta tags with bit of code without plugins.
Apply this code to your function.php template file.
The Code:
function wpc_fb_opengraph() {
$wpc_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
<meta property="fb:app_id" content="APP ID HERE">
<meta property="fb:admins" content="YOUR FB USER ID (OR USERNAME) HERE"/>
<meta property="og:image" content="<?php echo $wpc_image_url[0] ?>"/>
<?php }
add_action('wp_head', 'wpc_fb_opengraph');
Great solution, thanks!
I need an advice, though… For the “og:description” meta tag: do you know how its content can be obtained from the post excerpt or the All-in-One-SEO’s custom description field?
Thanks in advance!
Of course; this is the code:
Remember to fill the “Excerpt” fill
Hey, I don’t know exactly where to paste this code….. Can you explain more?
Now I’m use a one plugin but not work correctly…
Btw. If I will add this code will display the image of a single post automatically?
Thanks for help, Pigi
Hey Luke, you have to paste that code in your function.php, but only after you disable the plugin.
Yes, this code will display the image. If you have 2 or 3 days i’m writing plugin that adds Facebook open graph and Google plus one to wordpress.
Your are welcome if you need other support.
Cheers, Pigi
Hey, Thx for reply, yep I’m uninstal the plugin but, look on this: http://img34.imageshack.us/img34/6879/functionsphp.jpg
Where exactly I must paste this code, you can make a special screen form me? Sorry for ask, but Im not good with html and etc.
Thanks for help,
Best, Luke
You can paste this code at the last line of function.php.
But before please tell me if the last line is something like ?> or not
I think not …
Here is end of code
// Load Video Class require_once(WEBTREATS_CLASSES . '/video.php'); // Allow Shortcodes in Sidebar Widgets add_filter('widget_text', 'do_shortcode'); // If WP 3.0 or > include supprot for wp_nav_menu() if(webtreats_check_wp_version()){ add_theme_support( 'menus' ); } // Redirect To Theme Options Page on Activation if ($_GET['activated']){ wp_redirect(admin_url("admin.php?page=$page_handle&upgraded=true")); }so…?
In your header.php i can see two facebook meta tag:
you must remove that two lines, add under the third
<meta property="og:title" content="<?php the_title(); ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" /> <meta property="fb:app_id" content="APP ID HERE"> <meta property="fb:admins" content="YOUR FB USER ID (OR USERNAME) HERE"/>What version of WordPress you use? you can manage the image using also custom fields, i think the problem is that your wp doesn’t support “feature images”
ok, after
// Redirect To Theme Options Page on Activation if ($_GET['activated']){ wp_redirect(admin_url("admin.php?page=$page_handle&upgraded=true")); }It could be somethings like:
// Redirect To Theme Options Page on Activation if ($_GET['activated']){ wp_redirect(admin_url("admin.php?page=$page_handle&upgraded=true")); } // POST AFTER THIS LINE function wpc_fb_opengraph() { $wpc_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); ?> <meta property="og:title" content="<?php the_title(); ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <meta property="og:site_name" content="<?php bloginfo('name'); ?>" /> <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" /> <meta property="fb:app_id" content="APP ID HERE"> <meta property="fb:admins" content="YOUR FB USER ID (OR USERNAME) HERE"/> <meta property="og:image" content="<?php echo $wpc_image_url[0] ?>"/> <?php } add_action('wp_head', 'wpc_fb_opengraph');Yep I add this code …
and …
Btw. I must have instal any plugis of Ophen Graph Meta Yag?
Look on my code: http://imageshack.us/photo/my-images/718/myeditcode.png/
And my header: http://imageshack.us/f/811/myheadert.png/
Actually I don’t have install a an plugin of Meta ophen graph
You must help me with this….
cheers
Hey that’s what I was looking for. Thanks for sharing!!!
Hi Pigi,
I have added the code in my functions.php file, and the og: parameters are showing up in the source code as well. But the Facebook linter stubbornly refuses to find them, still reports that they are missing.
Here is my functions.php code, I added it at the end, just before <?
What do I do?
I have a youtube video embedded in a WordPress blog post. How do I add the meta tags to the single post so when I share the link to it on facebook, the video is displayed right on my Timeline?
hello rob, here is the code you need: http://www.wpcode.net/video-open-graph.html/
great, how to Change html tag for xmlns:og, xmlns:fb ? thanks ur sharing
Hello! This is kind of off topic but I need some help from an established blog.
Is it tough to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about making my own
but I’m not sure where to start. Do you have any ideas or suggestions? Thanks
Hello, what kind of help you need?