wordpress custom field output after the_content

Question

What I want to do is output a custom field content (which is a button with a dynamic link that's being inserted in the value of the custom field of each posts) right after the_content and before the plugins.

This is the code for the custom field:

<div class="button">
  <a href="<?php echo get_post_meta($post->ID, 'Button', true); ?>">
    <img src="<?php echo get_template_directory_uri() . '/images/button.png'; ?>" alt="link" />
  </a>
</div>

On wordpress codex I also found this example of how to apply a filter to the_content in order to obtain something similar to what I want. This is the code:

add_filter( 'the_content', 'my_the_content_filter', 20 );
function my_the_content_filter( $content ) {
if ( is_single() )
    // Add image to the beginning of each page
    $content = sprintf(
        '<img class="post-icon" src="%s/images/post_icon.png" alt="Post icon" title=""/>%s',
        get_bloginfo( 'stylesheet_directory' ),
        $content
    );
// Returns the content.
return $content;
}

The problem is I don't know PHP and I have no idea how am I supposed to edit the above code to apply on my specific case.

I modified it a bit and I manage to list the button, but only before the_content and without the PHP that enables the custom field.

add_filter( 'the_content', 'my_the_content_filter', 20 );
function my_the_content_filter( $content ) {

if ( is_single() )
    // Add button to the end of each page
    $content = sprintf(
        '<img class="button-link" src="%s/images/button.png" alt="Link" title=""/>%s',
        get_bloginfo( 'stylesheet_directory' ),
        $content
    );
// Returns the content.
return $content;
}

You can see the output here: http://digitalmediaboard.com/?p=6583 (it's the top-right 'show-me' button)

Answer 1

$content .= sprintf(...); // will add the button right after content.

In your example

// Add button to the end of each page
$content = sprintf(
    '<img class="button-link" src="%s/images/button.png" alt="Link" title=""/>%s',
    get_bloginfo( 'stylesheet_directory' ),
    $content
);

change it to

$lnk=get_bloginfo( 'stylesheet_directory' );
$content .= '<img class="button-link" src=$lnk."/images/button.png" alt="Link" title=""/>';

to add new content/button right after content. Also you need to add some css style for that button to be placed according to your desired need within/after content.

I think you can easily edit the index.php and can add the code you've provided with your question right after content.

Update:

add_filter( 'the_content', 'my_the_content_filter', 20 );
function my_the_content_filter( $content ) {
    if ( is_single() )
    {
        global $post;
        $imgLnk=get_bloginfo( 'stylesheet_directory' );
        $pgLnk=get_post_meta($post->ID, 'Button', true);
        $content .= '<a href="'.$pgLnk.'"><img class="button-link" src=$lnk."/images/button.png" alt="Link" title=""/></a>';
    }
    return $content;
}

Answer 2

Just a minor modification to the above code. The previous 'img' attribute was outputting an 'image not found' icon (the question mark) on Safari. I simply replaced the 'img' with 'span' and added the image as background in CSS.

add_filter( 'the_content', 'my_the_content_filter', 0 );
function my_the_content_filter( $content ) {
    if ( is_single() )
    {
        global $post;
        $pgLnk=get_post_meta($post->ID, 'Button', true);
        $content .= '<div id="button-link"><a href="'.$pgLnk.'" target="_blank"><span class="button-link"></span></a></div>';
    }
    return $content;
}