Facebook Share and Like Buttons Customization

Comment on WordPress Social Network Theme by SEO Dave.

The Facebook share and like buttons built into Stallion Responsive are using the default javascript versions of their buttons, we don’t have that level of control over their default like/share code. There are alternative button styles, but each social network has it’s own button sizes and code, it’s not easy to use their default code and have multiple buttons look good together (they have different sizes an styles which limits what works).

Basically limited to a few default sizes, so trying to hack something together from what’s part of Stallion isn’t the way to go. Best bet is build something custom or find a plugin that is close to what you want (loads of social media plugins, though they have a tendency to damage SEO).

I took a look at the site you emailed me about http://home.ijreview.com/ and it does have an interesting use of Facebook and Twitter share buttons.

The FaceBook and Twitter like/share buttons on the home page are the same code Stallion uses with a surrounding container with CSS to colour it blue (similar blue to the buttons) and hoverover styling so it looks like you can click the entire blue area. Click the blue area and it doesn’t do anything, still have to click the actual like/tweet button (same as Stallion): so looks like a big like button, but it isn’t.

The blue box is to draw your attention to the tiny buttons, interesting feature to try to encourage likes and tweets. With an Alexa rating of below 2,000 it’s a very popular site, so difficult to conclude if the number of likes/tweets are due to the design or just the sheer number of visitors: they could use the standard like format and they’ll get a lot of likes and tweets.

The huge Facebook like/share and Twitter buttons on the articles are custom buttons. Those are just text links with styling, you can do anything you like with that type of Facebook like button. As long as a social network has an option to like/share a URL via a standard text link (think they all do) that type of share button is easy to create.

Generally speaking it’s the Facebook text link share code with the WordPress permalink as the URL to share.

Something like this for Facebook:

<a href="https://www.facebook.com/sharer/sharer.php?u=<?php the_permalink(); ?>">Share on Facebook or Kittens Die!!!</a>

We have a text link and the the_permalink() part is the WordPress permalink of the page the link is on. Each social network has it’s own format for it’s share code. the Facebook version above can include extra variables like the title of the post and size of the window to open.

Issue with this from an SEO perspective is it’s a text link that passes link benefit/PR and consumes anchor text benefit: would I want a link on an article with anchor text “Share on Facebook or Kittens Die!!!”, not really, ideally wouldn’t want “Share on Facebook” either. And that’s just one like link, add Twitter, Google+, LinkedIn…. and before you know it you have a dozen links on every post wasting link benefit and anchor text benefit to the social networks!!!

The reason I went with the current Javascript and iframe code for the like/share/tweet buttons is Google doesn’t pass/waste any direct SEO benefit to iframe or javascript like buttons: no link benefit/PR is passed or wasted.

I made this decision before Google went all anal retentive on pagespeed metrics (check Google PageSpeed Insights Tool results for pages running javascript like buttons).

Creating some new share/like buttons that use the standard text link format is on my list of features to develop, but with the option to use the Stallion Link cloaking script so they aren’t as SEO damaging. If you check my author bio box I’m using standard text link format for basic image links to Facebook, Twitter, Google+ and Linkedin and they use the Stallion Link cloaking script.

Those links act like normal text links (image links) to users (click the Facebook one, takes you to my Facebook page: https://www.facebook.com/david.c.law ). Because it’s using the link cloaking script Google only sees the image, because the link is generated by CSS and javascript.

From a black hat/white hat SEO perspective there’s nothing wrong with this sort of linking. I’m not hiding the link, the alternative is to use a rel=”nofollow” tag which deletes the link benefit (damages my sites SEO). When I add a like button to Facebook I’m not voting for Facebook as a relevant resource to this article, I’m self promoting, if I had a sitewide link to four of my own sites (self promoting) on every article Google would consider that SEO iffy (blackhat SEO?) and it might count against this domains Google trust.

Is there really any difference between Facebooks javascript like button code and my Facebook javascript profile link? Only difference is my javascript is a lot less SEO performance damaging than Facebooks.

If I have the time for the Stallion Responsive 8.1 update (still trying to stick to the end of the month update release schedule) will see if I can add the option mentioned above and see if I can include something to style the links on the fly, create huge ass Facebook like links with neon pink background colours :-)

David