Dynamic Facebook og Meta Tags in Wordpress PHP

2019-01-24 11:46发布

站内问答 / PHP
991 5 5

I am trying to add dynamic Facebook og meta tags to my Wordpress site. I am adding them to single.php instead of the usually recommended functions.php file because I have code below that for a Facebook app I've created that needs to execute every time someone views an individual blog post because it then posts to their Facebook timeline that they've read that particular post. I don't want to use a plugin because some of my plugins used to conflict with each other and it was a mess to get that straightened out. My biggest problem is that I need the og:url tag to be dynamic, though the og:title, og:description, og:image, etc. should be as well. Here is the code I have at the top of my single.php file:

EDIT: HERE IS THE WORKING CODE I AM NOW USING. THANKS FOR EVERYONE'S 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 follow the code located here: Generating Facebook Open Graph meta tags dynamically and it DOES post to my Facebook timeline whenever I read a blog post, but for the title it of course posts "default title" and when I click the "default title" link on my Facebook timeline, it sends me to the URL for single.php with a bunch of nonsense 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 post URL. I'm wondering if it has anything to do with the URL I put in the 3rd line after "FB.api", but anything else I've tried putting there prevents the app from posting anything at all on my Facebook timeline when I read a blog post.

Any ideas how to fix this? I've been pulling my hair out for days with this. Any help would be most appreciated! Thanks in advance.

5条回答
走好不送
2楼-- · 2019-01-24 12:24

With Wordpress, you don't need to pass this information via $_GET or $_POST. Wordpress makes all this available to you.

I can understand your desire not to use a plugin, but some of them like Wordpress SEO or the official Facebook can add this for you and make your life a lot easier. If not, find a simple one and take it apart to see what they're doing.

If you really want to roll your own, you should be setting the title using template tags. You can retrieve a posts title via the the_title() function. There are others for the other metadata points you're looking for.

A final note: Your og:image file needs to be at least 50px on a side or Facebook won't display it. A Favicon, like you're trying to use, is almost always too small. See this page for the full image specifications.

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2019-01-24 12:30

I ended up solving it by using the following lines of code to make the Facebook og:url tags dynamic:

<meta property="og:url" content="<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>"/>

{ picture: '<?php echo 'http://internetlols.com'.$_SERVER['REQUEST_URI']; ?>' },
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
4楼-- · 2019-01-24 12:32

I adapted a function from Facebook Featured Image and Open Graph Meta Tags(http://www.ryanscowles.com) and pasted it on 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');
?>
查看更多
0人赞 添加讨论(0) 举报
一纸荒年 Trace。
5楼-- · 2019-01-24 12:35

For what its worth, I use a function from Ryan S. Cowles to do this and it works perfectly. It inserts the data dynamically with the wp_head hook making every page load the OG meta info dynamically. Anytime one of your page links is used in the FB status box, it calls the info relating to that page. I use Featured Images on all of my pages but if you don't you could easily write in a default fallback.

This is in my functions 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's 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');
查看更多
0人赞 添加讨论(0) 举报
劫难
6楼-- · 2019-01-24 12:42

To make the og:url & og:title dynamic, try using this

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

There is also other data that is avilable via the $post object. See here for more info http://www.rlmseo.com/blog/wordpress-post-variable-quick-reference/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)