Angel with Sword

Code Samples,Social Media

Adding Twitter Share Via Attribution to Swifty Bar WordPress Plugin

10 Oct , 2015  

Tonight I discovered (via Product Hunt’s list of best WP Plugins) a really cool plugin for WordPress called Swifty Bar. It adds a floating share bar on the footer of your blog posts with a Medium-style “x many minutes to read” estimator with a visual progress bar showing you how far along you are in text. You should see it at the bottom of the screen as you read this post right now ;)

The one feature it doesn’t have is a means of attribution with the Twitter share button. This is a big pet peeve of mine and it really bothers me when I click a share button on a website and it doesn’t have this. In case you don’t know what I mean, I’m talking about adding ” by @barrywise ” or ” via @knowem” at the end of the tweet.

It bothers me for a couple reasons, but the big one is you’re robbing your readers of the value of Influencer Targeting.  Obviously in my personal case I’m not an Influencer – but you get my meaning.  Every time you tweet out someone’s name, they see it – so these authors and publishers see you tweeting about them, a little ego boost. After all, who doesn’t love to see their content shared?  Without that “via @authorname” attribution you’re losing that entire interaction, literally taking the social out of social media.

And it’s really easy to add, just a couple lines of code to change (or just 1 line if you just want to hack it quickly).  First, if you came here just to use the plugin on your own site you can hard-code whatever you want.  Just edit line 178 of public/partials/sb-bar-public-display.php and add  ” by @[YOURNAMEHERE]” after the URL:

 <li class="sbtwitter"><a href="#" data-title="<?php the_title(); ?> by @[YOURNAMEHERE]" title="Share on Twitter" class="sbsoc-tw" target="_blank" ><i class="sbicn-twitter"></i><span>Share on Twitter</span></a></li>

This will make tweets shared from your site look like this:

“Your blog post title by @yournamehere http:yoursite.com/blogpost…”

Personally I prefer having the attribution after the URL, and that’s easy to do and more modular.  So here’s the better way, requiring edits to 2 files:

First, same line 178 and file as the first, but you’re adding the “data-author” tag (it requires you to set your Twitter handle in your Users setting in WordPress, more on that below):

<li class="sbtwitter"><a href="#" data-title="<?php the_title(); ?>" data-author="<?php the_author_meta('twitter'); ?>" title="Share on Twitter" class="sbsoc-tw" target="_blank" ><i class="sbicn-twitter"></i><span>Share on Twitter</span></a></li>

Next we just add 1 line before line 33 in public/assets/js/sb-bar-public.js, creating a new line 33 and editing 34:

var postauthor = $(".sbtwitter a").data("author");
var url = 'https://twitter.com/intent/tweet?text='+posttitle+'&via='+postauthor+'&url=';

Here we are creating the postauthor variable by grabbing it from the Users > Edit > Twitter handle field, and then adding the &via= attribute to our Twitter Web Intent.  As I mentioned, you have to go to the admin section for users, click on Edit your author’s user account, and add their Twitter handle (without the @) as seen in this screen capture:

Add Twitter username to WordPress User Account

There are a couple of other variables you can add here if you want, as explained in the Twitter Web Intent API, such as related user accounts, hashtags, etc.

But that’s it – just another great example of why open source software is awesome!  All credit must go to Goran87 of http://www.itsgoran.com/ for making this plugin in the first place.

, , , , , , ,


Comments are closed.

Adding Twitter Share Via Attribution to Swifty Bar WordPress Plugin

by Barry Wise time to read: 3 min
0