Easy Social Sharing Links with WordPress

by 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.

  1. Download and UNzip the 32×32 icon images.

      icon_pngs_navigation.zip (size: 24.9 KiB | hits: 116)

  2. Upload the 15 PNG files to either: (a) your theme's images folder, or (b) through the Dashboard->Media facility.
  3. 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()
  4. Open your theme's single.php file. Insert this code segment just above the post meta data section:

  5. Code: PHP

    <?php if (function_exists('wcs_share_this')) {wcs_share_this();} ?>
  6. Modify the wcs_share_this() function to reflect the location to which you uploaded the 15 icon images. (May not be necessary.)
  7. Open any article to view/test your new social sharing links.
  8. 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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

1
2
3
4
5
6
7
8
9
10
    // 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

1
2
3
4
5
6
7
8
9
10
    // 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

1
2
3
4
5
6
7
8
9
10
    // 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.

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

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

Comments

Share Your Thoughts  One Response to “Easy Social Sharing Links with WordPress”
  1. 1
    lou lanning says:

    Very, very useful tutorials. U B great!

Share Your Thoughts

(Some editor features are restricted unless you're logged in.)

(When replying to a specific comment, your browser may require Shift+Enter instead of just Enter.)


(get a gravatar)


Notify me of followup comments via e-mail. You can also subscribe without commenting.