Best IT Recipes

Dynamic Facebook and Meta Tags in Wordpress PHP

I am trying to add dynamic Facebook og tags to my Wordpress site. I add them to the single.php file instead of the usually recommended functions.php file, because I have the code below that for the Facebook application that I created, which needs to be executed every time someone views a single blog post, because then he goes to his Facebook that they read this particular post. I do not want to use the plugin because some of my plugins were in conflict with each other, and it was a mess to sort it out. My biggest problem is that I need the og:url tag to be dynamic, although there should also be og:title , og:description , og:image tags, etc. Here is the code that I have at the top of my single.php file:

EDIT: HERE A WORKING CODE WHICH I NOW USE. THANKS FOR EVERY HELP:

  <?php $params = array(); if(count($_GET) > 0) { $params = $_GET; } else { $params = $_POST; } // defaults if($params['type'] == "") $params['type'] = "picture"; if($params['locale'] == "") $params['locale'] = "en_US"; if($params['description'] == "") $params['description'] = "Visit Internet LOLs for the funniest humor on the web! :)"; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# internetlolsapp: http://ogp.me/ns/fb/internetlolsapp#"> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <!-- Open Graph meta tags --> <meta property="fb:app_id" content="378076268920252" /> <meta property="og:site_name" content="meta site name"/> <meta property="og:url" content="<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>"/> <meta property="og:type" content="internetlolsapp:<?php echo $params['type']; ?>"/> <meta property="og:description" content="<?php echo $params['description']; ?>"/> </head> </html> <script type="text/javascript"> function postView() { FB.api( '/me/internetlolsapp:view', 'post', { picture: '<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>' }, function(response) { if (!response) { // FAIL GRACEFULLY alert('Error occurred : No Response'); } else if (response.error) { // FAIL GRACEFULLY alert('Error occurred : ' + response.error); } else { // SUCCESS alert('View was successful! Action ID: ' + response.id); } }); } </script> </head> <body> <div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : '378076268920252', // App ID status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; // Load the SDK Asynchronously (function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js"; d.getElementsByTagName('head')[0].appendChild(js); }(document)); </script> </body> <body onload='postView()'> </html>

I am trying to execute the code located here: Dynamically generates Facebook Open Graph meta tags and it is sent to my Facebook timeline whenever I read a blog post, but for the title, it naturally publishes a “default title” and when I click the default name link on my Facebook timeline, it sends me to the url for one .php with a bunch of bullshit at the end of the url

 http://MYSITE.com/wp-content/themes/twentyeleven/single.php?fb_action_ids=10151048340001514&fb_action_types=internetlolsapp%3Aview&fb_source=other_multiline

instead of the blog url. I am wondering if it has anything to do with the URL that I placed on the 3rd line after "FB.api", but everything I tried to put there prevents the application from publishing anything at all my Facebook timeline when I read a blog post.

Any ideas how to fix this? I pulled my hair for so long. Any help would be greatly appreciated! Thanks in advance.

+7
php facebook meta-tags wordpress
Jun 17 2018-12-12T00:
source share
5 answers

I adapted a function from Facebook Featured Image and Open Graph Meta Tags ( http://www.ryanscowles.com ) and pasted it into functions.php, it works! (wordpress 3.5.1)

 <?php //function to limit description to 300 characters function limit($var, $limit) { if ( strlen($var) > $limit ) { return substr($var, 0, $limit) . '...'; } else { return $var; } } // Set your Open Graph Meta Tags function fbogmeta_header() { if (is_single()) { //getting the right post content $postsubtitrare = get_post_meta($post->ID, 'id-subtitrare', true); $post_subtitrare = get_post($postsubtitrare); $content = limit(strip_tags($post_subtitrare-> post_content),297); ?> <meta property="og:title" content="<?php the_title(); ?>"/> <meta property="og:description" content="<?php echo $content; ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>"/> <?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?> <?php if ($fb_image) : ?> <meta property="og:image" content="<?php echo $fb_image[0]; ?>" /> <?php endif; ?> <meta property="og:type" content="<?php if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>" /> <meta property="og:site_name" content="<?php bloginfo('name'); ?>"/> <?php } } add_action('wp_head', 'fbogmeta_header'); ?>
+2
Oct 21 '13 at 16:51
source share

In Wordpress, you do not need to pass this information through $_GET or $_POST . Wordpress makes it all available to you.

I can understand your desire not to use the plugin, but some of them, such as Wordpress SEO or official Facebook, can add this for you and make your life a lot easier. If not, find a simple one and split it up to see what they do.

If you really want to collapse yourself, you must set the title using template tags . You can get the message header using the_title () function. There are others for other metadata points that you are looking for.

Final note: your og:image file must be at least 50 pixels on the side, otherwise Facebook will not display it. Favicon, as you try to use, is almost always too small. See this page for full image specifications.

+1
Jun 18 2018-12-18T00:
source share

What it's worth, I use a feature from Ryan S. Cowles to do this, and it works great. It dynamically inserts data using wp_head, causing each page to load OG meta information dynamically. At any time, when one of the page links is used in the FB status field, it calls up information related to this page. I use Featured Images on all my pages, but if you do not, you can easily write a default backup.

This is in my function file:

 /* Plugin Name: Facebook Featured Image and Open Graph Meta Tags Version: 1.0 Plugin URI: http://www.ryanscowles.com Description: Automatically set the posts' Featured Image as the thumbnail and set appropriate Open Graph meta tags for sharing on Facebook. Author: Ryan S. Cowles Author URI: http://www.ryanscowles.com */ define ('pluginDirName', 'fb-featured-image'); // Allow for Facebooks markup language add_filter('language_attributes', 'add_og_xml_ns'); function add_og_xml_ns($content) { return ' xmlns:og="http://ogp.me/ns#" ' . $content; } add_filter('language_attributes', 'add_fb_xml_ns'); function add_fb_xml_ns($content) { return ' xmlns:fb="https://www.facebook.com/2008/fbml" ' . $content; } // Set your Open Graph Meta Tags function fbogmeta_header() { if (is_single()) { ?> <meta property="og:title" content="<?php the_title(); ?>"/> <meta property="og:description" content="<?php echo strip_tags(get_the_content($post->ID)); ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>"/> <?php $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id( get_the_ID() ), 'thumbnail'); ?> <?php if ($fb_image) : ?> <meta property="og:image" content="<?php echo $fb_image[0]; ?>" /> <?php endif; ?> <meta property="og:type" content="<?php if (is_single() || is_page()) { echo "article"; } else { echo "website";} ?>" /> <meta property="og:site_name" content="<?php bloginfo('name'); ?>"/> <?php } } add_action('wp_head', 'fbogmeta_header');
+1
Jul 15 '13 at 15:27
source share

To create og:url and og:title dynamics, try using

 <meta property="og:url" content="<?php echo get_permalink($post->ID); ?>"/> <meta property="og:title" content="<?php echo $post->post_title; ?>"/>

There is other data that can be used with the $post object. See here for more information http://www.rlmseo.com/blog/wordpress-post-variable-quick-reference/

0
Jun 18 '12 at 12:51 on
source share

I decided to solve this problem using the following lines of code to make dynamic og: url tags:

 <meta property="og:url" content="<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>"/> { picture: '<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>' },
0
Jun 19 '12 at 16:48
source share


More articles:


All Articles