• I wanted a solution to add a Facebook Like Button to every image in a WordPress Photo Gallery for a voting contest and I used the gallery shortcode function in WordPress to accomplish it. Do you know of a better way to do this? The result is a Facebook Like button beneath each caption on the photo gallery page.

    Add this to your functions.php file.

    [php]

    // Filter gallery shortcodes to include Facebook Like button
    function fb_gallery_shortcode($attr) {
    global $post, $wp_jerm665_locale;

    static $instance = 0;
    $instance++;

    // We’re trusting author input, so let’s at least make sure it looks like a valid orderby statement
    if ( isset( $attr[‘orderby’] ) ) {
    $attr[‘orderby’] = sanitize_sql_orderby( $attr[‘orderby’] );
    if ( !$attr[‘orderby’] )
    unset( $attr[‘orderby’] );
    }

    extract(shortcode_atts(array(
    ‘order’      => ‘ASC’,
    ‘orderby’    => ‘menu_order ID’,
    ‘id’         => $post->ID,
    ‘itemtag’    => ‘dl’,
    ‘icontag’    => ‘dt’,
    ‘captiontag’ => ‘dd’,
    ‘columns’    => 3,
    ‘size’       => ‘thumbnail’,
    ‘include’    => ”,
    ‘exclude’    => ”
    ), $attr));

    $id = intval($id);
    if ( ‘RAND’ == $order )
    $orderby = ‘none’;

    if ( !empty($include) ) {
    $include = preg_replace( ‘/[^0-9,]+/’, ”, $include );
    $_attachments = get_posts( array(‘include’ => $include, ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => $order, ‘orderby’ => $orderby) );

    $attachments = array();
    foreach ( $_attachments as $key => $val ) {
    $attachments[$val->ID] = $_attachments[$key];
    }
    } elseif ( !empty($exclude) ) {
    $exclude = preg_replace( ‘/[^0-9,]+/’, ”, $exclude );
    $attachments = get_children( array(‘post_parent’ => $id, ‘exclude’ => $exclude, ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => $order, ‘orderby’ => $orderby) );
    } else {
    $attachments = get_children( array(‘post_parent’ => $id, ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => $order, ‘orderby’ => $orderby) );
    }

    if ( empty($attachments) )
    return ”;

    if ( is_feed() ) {
    $output = "\n";
    foreach ( $attachments as $att_id => $attachment )
    $output .= wp_jerm665_get_attachment_link($att_id, $size, true) . "\n";
    return $output;
    }

    $itemtag = tag_escape($itemtag);
    $captiontag = tag_escape($captiontag);
    $columns = intval($columns);
    $itemwidth = $columns > 0 ? floor(100/$columns) : 100;
    $float = is_rtl() ? ‘right’ : ‘left’;

    $selector = "gallery-{$instance}";

    $output = apply_filters(‘gallery_style’, "
    <style type=’text/css’>
    #{$selector} {
    margin: auto;
    }
    #{$selector} .gallery-item {
    float: {$float};
    margin-top: 10px;
    text-align: center;
    width: {$itemwidth}%;            }
    #{$selector} img {
    border: 2px solid #cfcfcf;
    }
    #{$selector} .gallery-caption {
    margin-left: 0;
    }
    </style>
    <!– see gallery_shortcode() in wp-includes/media.php –>
    <div id=’$selector’ class=’gallery galleryid-{$id}’>");

    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr[‘link’]) && ‘file’ == $attr[‘link’] ? wp_jerm665_get_attachment_link($id, $size, false, false) : wp_jerm665_get_attachment_link($id, $size, true, false);

    $output .= "<{$itemtag} class=’gallery-item’>";
    $output .= "
    <{$icontag} class=’gallery-icon’>
    $link
    </{$icontag}>";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
    $output .= "
    <{$captiontag} class=’gallery-caption’>
    " . wptexturize($attachment->post_excerpt) . ‘
    <br /><iframe src="http://www.facebook.com/plugins/like.php?href=’ . get_attachment_link($id) . ‘&amp;layout=button_count&amp;show_faces=true&amp;width=125&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:125px; height:21px;" allowTransparency="true"></iframe>

    </{$captiontag}>’;
    }
    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
    $output .= ‘<br style="clear: both" />’;
    }

    $output .= "
    <br style=’clear: both;’ />
    </div>\n";

    return $output;
    }
    add_filter(‘post_gallery’, ‘fb_gallery_shortcode’, 10, 2);

    [/php]

    This entry was posted on Monday, October 25th, 2010 at 2:17 pm and is filed under WordPress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
  • 0 Comments

    Take a look at some of the responses we have had to this article.

  • Leave a Reply

    Let us know what you thought.

  • Name(required):

    Email(required):

    Website:

    Message: