Social Sharing on WordPress

[rogerd]

The last couple of days have seen a couple of new social sharing options - Google +1 and the Twitter Follow Button. Add in Tweet Button and Facebook Like/Send, and you've got four little scripts to load. Then you may want to add LinkedIn sharing, a Stumble button, and other social sites in your space.

Have you found a smooth way to integrate this functionality that looks good and minimizes any impact on page loads?

[lorax]

Hey Roger,
Looks are subjective but can be packaged anyway you'd like. Typically SM icons are grouped and stuck in a sidebar, header, or footer area that repeats on all pages. Of course they don't have to.

The loading part is relatively easy if you know enough about coding. You can modify your theme to load the scripts below the content. Look for the functions.php file under the theme. Sometimes themes create a special custom functions file. The Thesis Theme uses custom_functions.php (found under /custom/.

Example modification:

// SM Scripts
function sm_scripts() {
 ?>
 <script type="text/javascript" src="pathtoscriptsource"></script>
<?php
 }
} 
add_action('wp_footer', 'sm_scripts', 5);

For more reading:
[codex.wordpress.org...]
[codex.wordpress.org...]

[rogerd]

I've seen some good plugins that integrate social tools. I'm using SexyBookmarks, but its footprint is kind of heavy. And it looks great, but I think there's also value in showing the actual Facebook, etc. buttons because that's what people are used to.

I'm not a big fan of the single button sharing tools that require you to hover or click to see your choices. I think many users miss them entirely.

[mhansen]

I like WordPress Jetpack plugin. It has quite a few different features, including the social options, and is hosted on WordPress itself.

A free account is all you need.

[Hoople]

AddThis allows you to customize what buttons appear. On one of my sites I have:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_favorites"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4d99145b15ce288d"></script>

<!-- AddThis Button END -->

There is a full list of the icons (in that single buttons pop up window) that one can add to the above like Twitter, Delicious, etc.

[lexipixel]

I've been using AddThis for a long time, (embedded in the theme files). But today I spent some time looking at the native FB Like button so I could get the "count box", (showing how many people "Liked" the page), which is something AddThis doesn't do.

One of the good things about AddThis is it uses a sprite sheet style graphics for all the buttons, so once it's loaded and cached it doesn't slow the page load on subsequent pages.

[mslina2002]

FB Like button so I could get the "count box", (showing how many people "Liked" the page), which is something AddThis doesn't do.

<a class="addthis_button_facebook_like"></a>

[lexipixel]

Thanks mslina2002. Looks like that is a fairly new feature for AddThis. Nice!

[rogerd]

Good info! Does the latest iteration of AddThis keep the like button visible, or do you have to hover/click?

[mslina2002]

rogerd, the code above keeps the like button visible with the counts of likes shown. No hover required.

[lexipixel]

Digging a little deeper into FB "Like", I am seeing that with the native (FB) code, you can specify the URL that someone is liking.

What I'm looking for is the ability to have a FB Like button on every page, but to have the URL that they're liking be the home page of the site, e.g.-

'Like' button is on:

http://www.example.com/dir/somepage.xyz

But when a user clicks "Like" is bumps up the count for:

http://www.example.com/

It seems FB now also sports a "Recommend" link... (as well as "Send" which recommends the URL to only FB friends that you choose -- not every one of your FB friends.

[developers.facebook.com...]

[rogerd]

Seems like putting a like button on one page that sends another URL might be not what the user might expect, if not a TOS violation.

One drawback to that proposed approach is that you can only get liked once by a user. If the user can like every post (all the WP plugins are set to operate that way), you can get a bunch of likes (and new referred traffic) from your subscribers and frequent readers every time you post.

[lexipixel]

Seems like putting a like button on one page that sends another URL might be not what the user might expect, if not a TOS violation.

I don't think it is... but then again, FB policies change faster than New England weather.

If you notice the tool for creating the Like button allows you to specify a URL:

[developers.facebook.com...]

From what I'm seeing, you can have a "Like" button on every page of your site all pointing to one (FB) Page, (which in-turn promotes the website).

Links to individual wall posts on that (FB) Page can then be used to promote the corresponding (WordPress) posts.

I don't think the strategy I'm attempting to employ can be accomplished with the AddThis option suggested above.

I should probably take this up in the WebmasterWorld Facebook Marketing forum since it seems we're getting more into general FB marketing than a WordPress specific issue...

[Goob]

Couldn't you change the URL path of the FB like code to your homepage?

<fb:like href="site_homepage_link" ... ></fb:like>

I didn't think it mattered what page the like button was on, but what link was in the code.

[rogerd]

I guess that raises the question: is it better to focus all likes on one page, or let users like many pages?

I'd guess if your blog/site has regular visitors who often read your new content, they would keep liking the new stuff. That would let one individual give you dozens of likes over time, with each one appearing in his feed and generating clicks.

[lexipixel]

My opinion is it's better to get a high "Like" count for a site's home page, and to use "Recommend" on individual posts.

Additionally, if you want to also use the "Send" button on posts, that will let you select just certain FaceBook Friends to make the recommendation to -- as opposed to the "Recommend" button which posts to your wall where everyone on your friends list sees every recommendation you make.

For example, I may "Like" the home page of a legal website, and may "Recommend" their forums page to everyone, but may want to "Send" the link to a good divorce lawyer to just one friend...

[rogerd]

Makes sense, lexipixel.

[lorax]

>> FB policies change faster than New England weather

I snorted coffee out my nose over that one lexipixel! I am a Vermontuh.

I wonder if the average user understands/remembers the subtle distinctions between Like and Recommend when they're not on FB. It's one thing to see and use them when you're on FB where there are a ton of visual cues to remind you of what a "like" is but another when all of the visual reminders are no longer present.

[lexipixel]

if the average user understands/remembers the subtle distinctions between Like and Recommend

The stranger thing is I've had the AddThis facebook button on every page in WordPress for more than a year using the default-

<a class="addthis_button_facebook"></a>


Yesterday I decided to click it to see what happens.

I got a page with "Share this Link" and a pull down with the following options-

Share: On your own wall
______ On a friend's wall
______ In a group
______ On your page
______ In a private message

I've spent a good 3-4 hours this week trying to decipher all the various ways one could integrate FB into a website.

Just to read up on the subject you need to:

- log into facebook
- click "About" (bottom of page)
- click "Resources" (left nav)
- click "Developers Site" (3/4 way down content area)
- click "Add Facebook to My Site" (green button top of page)

... from there your options are to just use the iframe code (listed under "Social Plugins"), or delve into the netherworld of Facebook coding and try to decipher if you should:

- use XFBML (eXtended Facebook Markup Language)
- setup Open Graph Tags
- use the Facebook JavaScript SDK
- implement Authentication & Authorization
- etc.

... and countless other incarnations of how Facebook would like you to butcher your site's code and impregnate it with all their garbage.

Worse, about 2 years ago I registered as a Facebook Developer, (I actually wrote a couple apps one for each "way" you could get something functional to happen in the "canvas area"... (but that's another story).

Now, Facebook wants me to give them either my cell phone number or a credit card number to verify I'm still myself -- OR, they won't let me generate any "Like button" code beyond the default iframe snip.

Still worse, since I don't actually want to link my website to my personal FB account (which is stripped bare of all info), and instead want to use a Facebook "Page" for the connection between my website and the facebooking community -- I tried to "switch" to "Use Facebook as a Page" after logging in -- but then when I get to the tools for generating code for their Social Plugins, I get the error message telling me I can't -- that the tools can only be used when I am logged in as myself.

Just trying to remember what I clicked, what happened, and what works or doesn't hurts my brain -- more than any other exercise in web coding or experimenting with new web toys I've come across in 15+ years.

In fact, I was actually able to download the Eclipse IDE, the Android SDK, a WordPress RSS app example, and hobble together a function WordPress (Android) app that pulls the RSS feed from my site and displays the latest 5 posts from my blog onto a smart phone with a about 1 1/2 hours of work.

Facebook hurts my brain 1000 times as severely as reading this message does for "you" (meaning whoever was unfortunate enough to read all this).

I think I'll just leave the AddThis button where it is and move on to something more productive.

[lorax]

Good info. Thanks for sharing. The FB interface is decidedly convoluted. Reminds me of another interface that's been a pain in my backside - Google's.

Perhaps the easiest thing is to take a very simple tack and see if you can implement a "like" or a "recommend" without any additional options to confuse the issue and that generates the desired outcome without further questions. Build the URL yourself if need be (probably need to sign up as a FB developer to get API access). Of course if the user isn't logged into FB, there will be the need authenticate.

[lexipixel]

The FB interface is decidedly convoluted. Reminds me of another interface that's been a pain in my backside - Google's.

For Facebook, I have to think it's intentional. They may have taken their cue from grocery stores. Put the stuff you want people to grab, (high profit items), at easy to reach level, put the lower profit items either way up high, way down low, or in blind spots in the store's shopping traffic pattern and of course place the overpriced single-serve candy bars next to the slow moving checkout lines.

For Google, I think they have grown too big with too many specialized groups working on the various parts and not communicating internally... kind of like "The Blind Men and the Elephant"...

[cfx211]

We are using iframes called from a function and tossed into a div in our header. The +1 button does not have an iframe option and that one tends to load last after the rest of the page has rendered.

[netmeg]

I'm not crazy about SexyBookmarks - had issue getting it to work properly with my custom post types, and I've never liked AddThis because it opens up a popup that's sometimes hard to get rid of. It kind of depends what you want and where you want it.

For facebook likes and tweets, on some sites I just add the custom functions for these, and on others I use a plugin called ShareThis. I like the way the buttons look better than the SexyBookmarks.

I also use the WP-OGP plugin to get the Open Graph data into the header on each page.

The +1 button - where I've implemented, I again added it to the custom functions file (using either Thesis or Genesis WP frameworks)

As far as general social media buttons (just the ones that point to your twitter account, linked in account or facebook page) I like the Social Profiles Widget for the sidebar. Nice clean icons; easy to place and implement.

[niponbharali]

Digg digg plugin is my favourite plugin.It has Updated to Google +1 button.The best thing I like about lazy loading feature that lets plugin to load after the content has loaded

[tortak]

Thanks Hoople for code ...