| Tweet | ||
| Pin It |
At the time of writing this, Facebook’s Like
(or Share
) button acts the same as sharing or posting a URL to your wall, except you don’t have the chance to leave a comment or choose which image to include with the post.
If you post a link to your wall, Facebook will guess at which images on the page may be best suitable for the page, and allow you to choose from several of them
Facebook Image Loop
However, with the Like
button that you can add to your Thesis site, when a user clicks the button, Facebook decides which image to use, and it isn’t always the best.
In order to control this, a tag is added to the <head> of the page, specifying the image_src
for the page. There are probably WordPress plugins that do this, but with Thesis, we don’t have to use a plugin.
WordPress Screen Options
Custom Fieldsvisible. This is where we’re going to set the value. If you don’t see a section for
Custom Fields, you can click on
Screen Optionsnear the upper-right of the screen and check that box.
Next, create a new Custom Field named image_src
, and for the value, enter the full URL to the image you’d like to feature.
WordPress Custom Field for image_src
Now we’re going to get our hands dirty. Open custom_functions.php, which is saved in /wp-content/themes/thesis_xx/custom (with xx being the version number). The first thing we’re going to do is add the function to write the image_src
tag in the
function image_src() {
if (is_single() && (get_post_meta(get_the_ID(), 'image_src', true) != '')) {
echo('<link rel="image_src" href="' . get_post_meta(get_the_ID(), 'image_src', true) . '" / >' . "\n");
} // ends if (is_single() && (get_post_meta(get_the_ID(), 'image_src', true) != ''))
} // ends function image_src()
Next, add the hook, telling Thesis when to execute the function call:
add_action('wp_head', 'image_src');
Now, if the page that’s called is a single post, and the image_src
custom field is set, when a user clicks the Like
button, the specified image will be used.
If you wanted to take this a step further, add an else condition after the if block, giving a default image to use for the sharing. Or, leave it as-is and let Facebook decide.
EricNagel.com runs on the Thesis WordPress Theme
If you’re an affiliate who doesn’t understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.
If you’re more familiar with how websites work, you can use the fantastic Thesis User’s Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:
{ 1 comment… read it below or add one }
Just what I need, thank you for this writing this. I haven’t yet see any other tutorial about this, yours the first one. Previously I used a plugin to do that. Haven’t tried with your method yet will try soon.
I believe it doesn’t clash with facebook social graph right?
Eric, Thank You.
{ 1 trackback }