Easy Social Sharing Links with WordPress

by Luke America on May 3, 2011

With the growth of social media, networking, and bookmarking services, it's easy to add useful “Share This Article” functionality to your WordPress blog. People often like to share/bookmark what they find on the Internet. As a result, social media websites have become a vital part Web browsing and discovering new sites. And, of course, we all like to augment our web traffic.

BONUS! As an alternative to the standard HTML mailto code, at the end of this article we also reveal secret email links for opening specific web-based clients with the subject and body pre-filled. We disclose the code for gMail, Hotmail, and Yahoo! Mail.

Today, we'll develop a useful code snippet that makes it simple for your visitors to share and/or bookmark any article on your site. We've included 15 popular social media sharing links and icons. This collection of icons presents a call-to-action using attention-sized (32 pixel) images.

Social media sharing is not only convenient for your visitors; but, it's also a good way to get even more visitors. You can view this gadget on all of our articles … just after the content … and just before the post meta data. Clicking any icon link opens a correctly sized popup window with the URL and article title pre-filled.

Let's Review the Social Media Sites

Before we delve into the code, let's do a quick review of the popular sites we've included. As a blogger, it may benefit you to join every one of these networks.

Delicious – bookmark storage and sharing
Design Float – bookmark/story sharing (voting)
Digg – very popular social news link/story sharing (voting)
Facebook – #1 social networking platform
Google Bookmarks – personal or public bookmark storage
Google Buzz – share links, photos, videos, & more (integrates with gmail)
LinkedIn – business-oriented social networking
Posterous – simple blogging/sharing platform
Reddit – social news website (voting)
StumbleUpon – community for sharing/rating Web pages, photos, and videos
Technorati – search engine for discovering blog posts
Tumblr – simple blogging/sharing platform
Twitter – #1 microblogging service utilizing instant messaging

How to Use Our Social Sharing Gadget

Follow these quick seven steps to start using this convenient social sharing utility on your blog.

Download and UNzip the 32×32 icon images.

icon_pngs_navigation.zip (size: 24.9 KB | hits: 69)
Upload the 15 PNG files to either: (a) your theme's images folder, or (b) through the Dashboard->Media facility.
Copy/Paste the source code below into your theme's functions.php file. Be SURE to get both functions: wcs_share_this() and wcs_share_this_link()
Open your theme's single.php file. Insert this code segment just above the post meta data section:

Code: PHP

<?php if (function_exists('wcs_share_this')) {wcs_share_this();} ?>

Modify the wcs_share_this() function to reflect the location to which you uploaded the 15 icon images. (May not be necessary.)
Open any article to view/test your new social sharing links.
You may want to customize the CSS and other features.

Let's Look At the Source Code

The primary function, wcs_share_this(), performs the workhorse functionality and creates the data arrays for each of the social media links.

Code: PHP (plus WordPress)Function: wcs_share_this

function wcs_share_this()
{
    // *** MUST BE USED IN THE LOOP (typically in single.php, before post meta data)
 
    // function init
    $output = '';
    $use_shortlink = 0; // 1=true
 
    // get link to article
    $page_id = get_the_ID();
    if ($use_shortlink) {$page_url = wp_get_shortlink();} // http://wp.me/...
    else {$page_url = get_permalink($page_id);}
 
    // get the title (and fix apostrophes)
    $page_title = get_the_title($page_id);
    $page_title = str_replace("&#8216;", "'", $page_title);
    $page_title = str_replace("&#8217;", "'", $page_title);
    $page_title = str_replace("&#8242;", "'", $page_title);
 
    // *** USE THIS if images are UPLOADED thru Dashboard->Media
    //$uploads_dir = wp_upload_dir();
    //$base_image_url = $uploads_dir['baseurl'] . '/';
 
    // *** USE THIS if images are UPLOADED in the current theme's images folder
    $base_image_url = get_bloginfo('template_url') . '/images/';
 
    // *** CSS CODE (personalize to your style preference)
    $msg = "Share This Article: &#8220;$page_title&#8221;<br/>";
    $msg_before = '<span style="color:#000000; font:16px/32px Tahoma, Arial, Verdana;">';
    $msg_after = '</span>';
 
    $bookmark_msg = '<br/>(Also Available: Press CTRL+D to Bookmark this Page)<br/>';
    $bookmark_msg_before = '<span style="font:small-caps 10px/15px Tahoma, Arial, Verdana;">';
    $bookmark_msg_after = '</span>';
 
    $style_box = '-moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;';
    $style_shadow = '-moz-box-shadow:0px 2px 10px #808080; -webkit-box-shadow:0px 2px 10px #808080; box-shadow:0px 2px 10px #808080;';
 
    $content_before = "<center><div style='$style_box $style_shadow margin-top:10px; margin-bottom:2px; padding-bottom:6px;'>";
    $content_after = '</div></center><br/>';
 
 
    // *** BEGIN SOCIAL LINK DATA ARRAYS
 
    // delicious init (NOTE that Delicious is updating stored links by July 2011)
    $delicious['active'] = '1';
    $delicious['image'] = 'share_delicious_32.png';
    $delicious['image_w'] = 32;
    $delicious['image_h'] = 32;
    $delicious['url'] = 'http://delicious.com/save?url=' . urlencode($page_url) . '&amp;title=' . urlencode($page_title);
    $delicious['width'] = 925;
    $delicious['height'] = 500;
    $delicious['scrollbars'] = 0;
    $delicious['title'] = 'Share on Delicious';
 
    // Design Float init
    $designfloat['active'] = '1';
    $designfloat['image'] = 'share_designfloat_32.png';
    $designfloat['image_w'] = 32;
    $designfloat['image_h'] = 32;
    $designfloat['url'] = 'http://www.designfloat.com/submit.php?url=' . urlencode($page_url) . '&title=' . urlencode($page_title);
    $designfloat['width'] = 1000;
    $designfloat['height'] = 550;
    $designfloat['scrollbars'] = 1;
    $designfloat['title'] = 'Float It';
 
    // digg init
    $digg['active'] = '1';
    $digg['image'] = 'share_digg_32.png';
    $digg['image_w'] = 32;
    $digg['image_h'] = 32;
    $digg['url'] = 'http://digg.com/submit?partner=addthis&url=' . urlencode($page_url) . '&amp;title=' . urlencode($page_title);
    $digg['width'] = 750;
    $digg['height'] = 550;
    $digg['scrollbars'] = 0;
    $digg['title'] = 'Submit to Digg';
 
    // email init
    $email['active'] = '1';
    $email['image'] = 'share_email_32.png';
    $email['image_w'] = 32;
    $email['image_h'] = 32;
    $email['url'] = 'mailto:?subject=' . rawurlencode($page_title) . '&amp;body=Here%27s an article worth reading%3A%0A%0A' . rawurlencode($page_url);
    $email['width'] = 0;
    $email['height'] = 0;
    $email['scrollbars'] = 0;
    $email['title'] = 'Send via Email';
 
    // facebook init
    $facebook['active'] = '1';
    $facebook['image'] = 'share_facebook_32.png';
    $facebook['image_w'] = 32;
    $facebook['image_h'] = 32;
    $facebook['url'] = 'http://www.facebook.com/sharer.php?u=' . urlencode($page_url) . '&amp;t=' . urlencode($page_title);
    $facebook['width'] = 550;
    $facebook['height'] = 450;
    $facebook['scrollbars'] = 1;
    $facebook['title'] = 'Share on Facebook';
 
    // google bookmarks init
    $google_bm['active'] = '1';
    $google_bm['image'] = 'share_google_32.png';
    $google_bm['image_w'] = 32;
    $google_bm['image_h'] = 32;
    $google_bm['url'] = 'http://google.com/bookmarks/mark?op=add&amp;bkmk=' . urlencode($page_url) . '&amp;title=' . urlencode($page_title);
    $google_bm['width'] = 750;
    $google_bm['height'] = 620;
    $google_bm['scrollbars'] = 0;
    $google_bm['title'] = 'Add to Google Bookmarks';
 
    // google buzz init
    $google_buzz['active'] = '1';
    $google_buzz['image'] = 'share_google_buzz_32.png';
    $google_buzz['image_w'] = 32;
    $google_buzz['image_h'] = 32;
    $google_buzz['url'] = 'http://www.google.com/reader/link?url=' . urlencode($page_url) . '&title=' . urlencode($page_title) . '&srcURL=' . urlencode($page_url);
    $google_buzz['width'] = 525;
    $google_buzz['height'] = 275;
    $google_buzz['scrollbars'] = 0;
    $google_buzz['title'] = 'Share on Google Buzz';
 
    // LinkedIn init
    $linkedin['active'] = '1';
    $linkedin['image'] = 'share_linkedin_32.png';
    $linkedin['image_w'] = 32;
    $linkedin['image_h'] = 32;
    $linkedin['url'] = 'http://www.linkedin.com/shareArticle?mini=true&url=' . urlencode($page_url) . '&title=' . urlencode($page_title) . '&ro=false&summary=&source=';
    $linkedin['width'] = 525;
    $linkedin['height'] = 375;
    $linkedin['scrollbars'] = 0;
    $linkedin['title'] = 'Share on LinkedIn';
 
    // posterous init
    $posterous['active'] = '1';
    $posterous['image'] = 'share_posterous_32.png';
    $posterous['image_w'] = 32;
    $posterous['image_h'] = 32;
    $posterous['url'] = 'http://posterous.com/share?linkto=' . urlencode($page_url);
    $posterous['width'] = 950;
    $posterous['height'] = 500;
    $posterous['scrollbars'] = 1;
    $posterous['title'] = 'Share on Posterous';
 
    // print init
    $printer['active'] = '0'; // disabled by default
    $printer['image'] = 'share_printer_32.png';
    $printer['image_w'] = 32;
    $printer['image_h'] = 32;
    $printer['url'] = 'javascript:window.print();';
    $printer['width'] = 0;
    $printer['height'] = 0;
    $printer['scrollbars'] = 0;
    $printer['title'] = 'Print the Page';
 
    // reddit init
    $reddit['active'] = '1';
    $reddit['image'] = 'share_reddit_32.png';
    $reddit['image_w'] = 32;
    $reddit['image_h'] = 32;
    $reddit['url'] = 'http://www.reddit.com/submit?url=' . urlencode($page_url) . '&title=' . urlencode($page_title);
    $reddit['width'] = 750;
    $reddit['height'] = 550;
    $reddit['scrollbars'] = 1;
    $reddit['title'] = 'Share on Reddit';
 
    // stumbleupon init
    $stumbleupon['active'] = '1';
    $stumbleupon['image'] = 'share_stumbleupon_32.png';
    $stumbleupon['image_w'] = 32;
    $stumbleupon['image_h'] = 32;
    $stumbleupon['url'] = 'http://www.stumbleupon.com/submit?url=' . urlencode($page_url) . '&amp;title=' . urlencode($page_title);
    $stumbleupon['width'] = 750;
    $stumbleupon['height'] = 450;
    $stumbleupon['scrollbars'] = 0;
    $stumbleupon['title'] = 'Share on StumbleUpon';
 
    // Technorait Favorites init
    $technorati['active'] = '1';
    $technorati['image'] = 'share_technorati_32.png';
    $technorati['image_w'] = 32;
    $technorati['image_h'] = 32;
    $technorati['url'] = 'http://technorati.com/faves?add=' . urlencode($page_url) . '&title=' . urlencode($page_title);
    $technorati['width'] = 1000;
    $technorati['height'] = 550;
    $technorati['scrollbars'] = 1;
    $technorati['title'] = 'Add to Technorati Favorites';
 
    // tumblr init
    $tumblr['active'] = '1';
    $tumblr['image'] = 'share_tumblr_32.png';
    $tumblr['image_w'] = 32;
    $tumblr['image_h'] = 32;
    $tumblr['url'] = 'http://www.tumblr.com/share/?s=&t=' . urlencode($page_title) . '&u=' . urlencode($page_url) . '&v=3&o=0';
    $tumblr['width'] = 525;
    $tumblr['height'] = 450;
    $tumblr['scrollbars'] = 0;
    $tumblr['title'] = 'Share on Tumblr';
 
    // twitter init (NOTE that Twitter is updating its user interface by June 2011)
    $twitter['active'] = '1';
    $twitter['image'] = 'share_twitter_32.png';
    $twitter['image_w'] = 32;
    $twitter['image_h'] = 32;
    $twitter_title = str_replace(' ', '+', $page_title);
    $twitter_title = str_replace('\'', '`', $twitter_title);
    $twitter['url'] = 'http://twitter.com/home?status=I+like+%22' . $twitter_title . '%22+%3A+' . wp_get_shortlink();
    $twitter['width'] = 1000;
    $twitter['height'] = 500;
    $twitter['scrollbars'] = 1;
    $twitter['title'] = 'Tweet this Article';
 
    // *** CONSTRUCT OUTPUT (arrange to your output sequence preference)
 
    // social communication
    $output .= wcs_share_this_link($facebook, $base_image_url);
    $output .= wcs_share_this_link($twitter, $base_image_url);
    // link sharing
    $output .= wcs_share_this_link($delicious, $base_image_url);
    $output .= wcs_share_this_link($digg, $base_image_url);
    $output .= wcs_share_this_link($google_buzz, $base_image_url);
    $output .= wcs_share_this_link($stumbleupon, $base_image_url);
    $output .= wcs_share_this_link($linkedin, $base_image_url);
    $output .= wcs_share_this_link($reddit, $base_image_url);
    $output .= wcs_share_this_link($designfloat, $base_image_url);
    // blogging/sharing
    $output .= wcs_share_this_link($posterous, $base_image_url);
    $output .= wcs_share_this_link($tumblr, $base_image_url);
    // personal bookmarks
    $output .= wcs_share_this_link($google_bm, $base_image_url);
    $output .= wcs_share_this_link($technorati, $base_image_url);
    // miscellaneous usage
    $output .= wcs_share_this_link($email, $base_image_url);
    $output .= wcs_share_this_link($printer, $base_image_url);
 
    // *** OUTPUT CONTENT AND EXIT
    echo $content_before;
    echo $msg_before . $msg . $msg_after;
    echo $output;
    echo $bookmark_msg_before . $bookmark_msg . $bookmark_msg_after;
    echo $content_after;
 
    /**********************************************************************
     Copyright © 2011 Gizmo Digital Fusion (http://wpCodeSnippets.info)
     you can redistribute and/or modify this code under the terms of the
     GNU GPL v2: http://www.gnu.org/licenses/gpl-2.0.html
    **********************************************************************/
}

On line 7, you can set $use_shortlink to 1 or true to use the new WordPress shortlink functionality (3.0+) . It's disabled by default.

Lines 9-12 get the current article's URL. Lines 14-18 get the article's title and correct apostrophes.

Leave the code 'as is' in lines 20-25, if you uploaded the 15 icons to your theme's images folder. However, if you uploaded them through the Dashboard->Media facility … comment 25 and UNcomment lines 21 and 22.

The container for the icons and text is developed in lines 27-40. You may want to come back later and personalize this section of code to your preferences.

Lines 43-210 construct the social media data arrays. The code was designed in this fashion so that you can add others later, if you like. As an example, let's look at the delicious array which starts at 45.

active – determines whether or not the icon/link is displayed
image – the image filename
image_w – the image width in pixels
image_h – the image height in pixels
url – the specific social media linking code
width – popup window width in pixels (set to 0 for no popup)
height – popup window height in pixels
scrollbars – whether or not to display scrollbars in the popup
title – the tooltip text

If you decide later to use different icons, simply change the values in these data arrays. You should not change the url code unless the specific social network changes their linking code.

Note that the Twitter url is processed differently. First, it automatically uses the wp_get_shortlink() function. And, it does additional encoding on the article title.

In lines 214-233, we sequence the output of the links. You can change this to put them in your preferred order. Finally, beginning at line 235, we output the container, text, icons, and links.

Now, let's review the support function, wcs_share_this_link(), which constructs the individual links.

Code: PHP (plus WordPress)Function: wcs_share_this_link

function wcs_share_this_link($array_social, $base_image_url)
{
    // get social parameters
    $active = $array_social['active'];
    $image = $base_image_url . $array_social['image'];
    $image_w = $array_social['image_w'];
    $image_h = $array_social['image_h'];
    $url = $array_social['url'];
    $width = $array_social['width'];
    $height = $array_social['height'];
    $scrollbars = $array_social['scrollbars'];
    $title = $array_social['title'];
 
    // init
    $wdw_name = 'wcs_share_this';
    $wdw_features = "scrollbars=$scrollbars,status=0,toolbar=0,location=0,directories=0,menubar=0,resizable=1,width=";
    $title = " $title ";
    $output = '';
    $style_link = 'padding:4px;';
 
    // construct links
    if ($active == true)
    {
        if ($width)
        {
            $javascript = "window.open('$url', '$wdw_name', '$wdw_features$width,height=$height');return false;";
            $output = "<a style='$style_link' rel='nofollow' onclick=\"$javascript\" title='$title'>";
        }
        else
        {
            $output = "<a style='$style_link' rel='nofollow' href='$url' title='$title'>";
        }
        $output .= "<img src='$image' width='$image_w' height='$image_h' title='$title' style='cursor:pointer' /></a>";
    }
 
    // exit
    return $output;
}

In lines 3-12, we set variable values from the social media data array. In lines 14-19, we set assorted default values. And, in lines 21-34, we construct each link … when called from the primary function.

Your visitors will appreciate the sharing convenience … and you'll enjoy the boost in traffic.

Secret Email URL's for Web-Based Clients

The email data array in wcs_share_this() is a generic mailto that uses the current system's default email client. However, there are secret email query parameters that allow you to target specific email clients.

This code will open a gMail popup regardless of the system default email client.

Code: PHP (plus WordPress)gMail popup code

    // gmail init
    $email['active'] = '1';
    $email['image'] = 'share_email_32.png';
    $email['image_w'] = 32;
    $email['image_h'] = 32;
    $email['url'] = 'https://mail.google.com/mail/?view=cm&fs=1&tf=1&source=mailto&shva=1&su=' . rawurlencode($page_title) . '&amp;body=Here%27s an article worth reading%3A%0A%0A' . rawurlencode($page_url);
    $email['width'] = 750;
    $email['height'] = 500;
    $email['scrollbars'] = 1;
    $email['title'] = 'Send via gMail';

This code will open a Hotmail popup regardless of the system default email client.

Code: PHP (plus WordPress)Hotmail popup code

    // hotmail init
    $email['active'] = '1';
    $email['image'] = 'share_email_32.png';
    $email['image_w'] = 32;
    $email['image_h'] = 32;
    $email['url'] = 'http://mail.live.com/?rru=compose&subject=' . rawurlencode($page_title) . '&amp;body=Here%27s an article worth reading%3A%0A%0A' . rawurlencode($page_url);
    $email['width'] = 850;
    $email['height'] = 550;
    $email['scrollbars'] = 1;
    $email['title'] = 'Send via Hotmail';

This code will open a Yahoo! Mail popup regardless of the system default email client. Note that we have to double-encode the body and subject. This is because Yahoo! performs a locale-specific email redirect … after decoding.

Code: PHP (plus WordPress)Yahoo! Mail popup code

    // yahoo! mail init
    $email['active'] = '1';
    $email['image'] = 'share_email_32.png';
    $email['image_w'] = 32;
    $email['image_h'] = 32;
    $email['url'] = 'http://compose.mail.yahoo.com?subject=' . urlencode(rawurlencode($page_title)) . '&amp;body=' . urlencode('Here%27s+an+article+worth+reading%3A%0A%0A') . urlencode(rawurlencode($page_url));
    $email['width'] = 750;
    $email['height'] = 500;
    $email['scrollbars'] = 1;
    $email['title'] = 'Send via Yahoo! Mail';

If you want to add these as extra social sharing options: (1) use a client-specific icon, (2) change $email in the array name to the target client name, and (3) add the $output line somewhere between lines 214 and 233.

PDF

Share This Article: “Easy Social Sharing Links with WordPress”

(Also Available: Press CTRL+D to Bookmark this Page)

Topics: Code Snippets, Gadgets, Social Media

Keywords: bookmarking services, Function: wcs_share_this, Function: wcs_share_this_link, gadget, get_bloginfo, get_permalink, get_the_ID, get_the_title, gmail query parameters, google mailto url, hotmail mailto url, hotmail query parameters, rawurlencode, secret email url links, social bookmarking, social media links, social network links, social sharing, str_replace, urlencode, wcs_share_this, wcs_share_this_link, web traffic, wp_get_shortlink, yahoo mail query parameters, yahoo mailto url

Article Link: http://wpcodesnippets.info/blog/easy-social-sharing-links-with-wordpress.html

Short Link: http://wp.me/p1nBOf-Mv

Comments

Share Your Thoughts One Response to “Easy Social Sharing Links with WordPress”

1

lou lanning says:

June 28, 2011 at 1:28 pm

Very, very useful tutorials. U B great!

(reply to this comment)

Share Your Thoughts

Recent Comments
Recent Trackbacks
- 19 of the best WordPress Plugins to use with your Multisite Network: QR Code Generator – WCS QR... -- visit site
- Qr Code Generator Jquery – GeekLogy: QR Code images anywhere on a page/post... -- visit site
- Qr-code Generator Js – GeekLogy: QR Code images anywhere on a page/post... -- visit site
- MegaTeacher | Let's start learning MegaTeacher | Let's start learning: 20 Extremely Helpful... -- visit site
- 核桃博客: 最终我选择了用下面这个文章中提到的插件来临时解决问题 http://wpcodesnippets.info/blo g/how-to-fix-the-wp-3-1-cus... -- visit site

Support Our Efforts

If you find our code useful,
a small support donation will
help us to continue churning out
tips, tricks, tweaks, and plug-ins
for our favorite blogging platform.

Click the heart to donate now ...
or here for more info.

Easy Social Sharing Links with WordPress

Let's Review the Social Media Sites

How to Use Our Social Sharing Gadget

Let's Look At the Source Code

Secret Email URL's for Web-Based Clients

Comments

Share Your Thoughts

Language Translation Options

Find It On Our Site

Google AdSense

Products Worth Looking At

Favorite Developer Resources

Developer References

Developer References

WordPress Related Sites

WordPress Related Sites

WordPress.org Information

WordPress.org Information

Website Marketing & Monetization

Website Marketing & Monetization

Recent Comments

Recent Trackbacks

Support Our Efforts