CODEWITHSUNDEEP
phphtml
user1617218
user1617218

Reputation:

Facebook Sharer also shows the image

I'm using this code to put a facebook share button on my wordpress site:

    <a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?><?php the_title(); ?>">
        <img src="<?php bloginfo('template_url'); ?>/images/facebook.png"/>
    </a>

the issue is that when I click on the facebook icon, it opens the window to share the post but only displays the title of the post, not the images that are in there.

it looks like this:

enter image description here

How can I fix the code to share also the image that is on the post?

Upvotes: 1

Views: 353

Answers (2)

Justin Masse
Justin Masse

Reputation: 73

You will need to use the facebook open graph meta tags as stated by rrikesh. For example:

<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="A group of U.S. Marines, under command of a renegade general, take over Alcatraz and threaten San Francisco Bay with biological weapons."/>

You can view facebooks protocal over at https://developers.facebook.com/docs/opengraphprotocol/

Also when a user places a url on facebook it caches the relevant information to speed up posts in the future. To refresh this cache use the following developer tools.

https://developers.facebook.com/tools/debug

Enjoy

Upvotes: 1

RRikesh
RRikesh

Reputation: 14381

You need open graphs tags in your header

For the image:

<meta property="og:image" content="LINK_TO_IMAGE" />

Upvotes: 1

Related Questions