Wordpress Facebook like (not displaying correct photo)

6 replies
Am having a problem with my facebook like button on each post.. i cant get it to display the correct photo.. some times i draws random photos from the site or does not display one at all. i would like to have the option to choose or at least auto display the first photo
i haven't been able to find a solution to this issue and i have search a lot.
Any ideas ?
#correct #displaying #facebook #photo #wordpress
  • Profile picture of the author Unomateo
    The like button scrapes the page to get all the images and then let's the user choose which image to use... completely unreliable

    You have to use the Facebook JS api dialog to make it consistent. Basically, you would set the featured image of the post and set that for the facebook wall post.

    Let me know if you need me to set up your blog... It's not that hard, would take me about 10 mintues
    {{ DiscussionBoard.errors[4726030].message }}
  • Profile picture of the author developeroncall
    You can use the OpenGraph tag to set the photo used.

    <meta property="og:image" content="URL TO YOUR IMAGE HERE"/>

    Further instructions are here:
    developers.facebook.com/docs/opengraph/

    Hope that helps.
    {{ DiscussionBoard.errors[4726988].message }}
    • Profile picture of the author kithara
      Unomateo

      I dont like to use the features image functions because it messes up the post headline .. featured image shares the same line and so the post title gets squashed to the side ..

      developeroncall


      The OpenGraph soluton look complicated and am not really good messing g with codes

      there was an add on called facebook like fix and it was suppose to fix it but it did nothing to me.

      i need a simple solution to at least display the first image by default its been haunting me for a month now..
      maybe there is another simpler solution to this?

      Thanks very much for your reply's guys i appreciate it.
      {{ DiscussionBoard.errors[4727935].message }}
      • Profile picture of the author LakiPolitis
        Originally Posted by kithara View Post

        The OpenGraph soluton look complicated and am not really good messing g with codes

        there was an add on called facebook like fix and it was suppose to fix it but it did nothing to me.

        i need a simple solution to at least display the first image by default its been haunting me for a month now..
        That's exactly what the program you bought did. it inserts the open graph tags into the head of the document... You need to do that. Look at the source code for Website Performance, Uptime and Server Monitoring | Are We Online, our snippets are glorious!!!

        Code:
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
            <link rel="Shortcut Icon" href="images/favicon.ico" />
        
            <!-- SOCIAL MEDIA META INFO -->
            <meta property="og:type" content="website" />
            <meta property="og:url" content="http://www.areweonline.com/Default.aspx" />
            <meta property="og:image" content="http://www.areweonline.com/images/awo_Logo.jpg" />
            <meta property="og:site_name" content="Are We Online - Website &amp; Server Monitoring" />
            <meta property="fb:admins" content="1112520079" />
            <link rel="image_src" href="http://www.areweonline.com/images/awo_Logo.jpg" />
            <!-- SOCIAL MEDIA META INFO END -->
        
            <title>Website Performance, Uptime and Server Monitoring | Are We Online</title>
        
            <meta name="description" content="Are We Online is a website &amp; server monitoring service. We monitor your domains, response time, domain expirations, visible content, and review comments." />
        
            <meta name="keywords" content="Website Monitoring, Website Performance Monitoring, Yelp Comment Monitoring, Google Places Comment Monitoring, Content Checking, Server Monitoring, Website Blacklist Monitoring, website spam monitoring, website uptime monitoring, web monitoring" />
        
            <link rel="canonical" href="http://www.areweonline.com" />
        </head>
        
        <body itemscope itemtype="http://schema.org/Product">
        If you want your snippets to look good, you need to do that. It's not hard.
        {{ DiscussionBoard.errors[4730838].message }}
        • Profile picture of the author Unomateo
          I would really try to figure out how to incorporate the featured image since using that will have the least DB calls on page load.

          the og meta tag will be in the header so you have to do another DB call to get an image since it's outside the loop

          below is a script to get the first image attached to a post. Again, more DB calls = slower pages

          if (have_posts()) : while (have_posts()) : the_post();

          $args = '';
          unset($attachment);
          $image = '';
          $args = array(
          'post_type' => 'attachment',
          'numberposts' => null,
          'post_status' => null,
          'post_parent' => $post->ID
          );

          $attachment = get_posts($args);

          if ($attachment)
          {
          $image = wp_get_attachment_image_src($attachment[0]->ID, 'thumbnail');
          }
          {{ DiscussionBoard.errors[4731111].message }}
          • Profile picture of the author kithara
            Thanks for the reply's guys! but am not very familiar editing codes.. is there any plug in to do that ? i found one called Open Graph Pro that suppose to do that for you but i can get it to work...anyone knows any other? its very common problem witch everyone would eventually stumble upon ..there has to be a non code editing way..

            ps am using the latest wordpress
            {{ DiscussionBoard.errors[4735537].message }}

Trending Topics