Little Gem Software

Adding Social Sharing buttons to individual blog post entries in Rapidweaver

For my [company's website][lgs] I use [Rapidweaver][rw] to build and maintain it. also Rapidweaver's blogging functionality is used.
On most blogging site you will see options to like/tweet/share individual blog posts and I wanted to be able to have this for my blog as well.
Instead of using the APIs from each of the individual providers, in my case [Facebook][fb], [Twitter][tw] and [Google+][gp], I decided to make use of the API provided by [AddThis][ad]. To incorparate AddThis into your site it requires a Javascript library to be loaded and pieces of HTML code to add the sharing buttons.
For instance the following piece of HTML code generates a Facebook like button for on specific blog post.

``

This piece of HTML code would then have to be added to every single blog post, where the attributes __addthis:url__, __addthis:title__ and __addthis:description__ would need to be changed to match the blog post you are adding the code to. But this piece of code is just for one social networking site, for Twitter and Google+ similar HTML code is required..... tailored for each blog post..... Uhm????
__I don't want to do this manually!__ Enter stage [jQuery][jq] Happy
>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
Using jQuery the tedious manual (and error-prone) labour of adding the links and getting the attribute values correct for each blog post can be taken out of my hands. We just need to perform the following steps
1. Add jQuery and AddThis libraries 1. Add custom jQuery code 1. Add custom CSS (some elements don't play nice and have to be put in their proper place) 1. Add one line to each blog post entry
## Custom Header
Add the following two lines of code as Custom Header (Page Inspector -> Header -> Header) of the blog page /* Load jQuery libraries */ /* Load AddThis libraries */
![Custom Header](/resources/images/RW_Header.png "Custom Header")

## jQuery This part is where all the magic happens. Add the following piece of JavaScript/jQuery code as Custom JavaScript (Page Inspector -> Header -> JavaScript) of the blog page $(document).ready( function() { $('div .social-badges').each( function( i, obj ) { // Blog title and permalink (archive/main blog page) var permaLink = $(obj).closest('div .blog-entry').find('.blog-permalink'); var blogTitle = permaLink.text(); var blogLink = permaLink.prop('href'); // Blog title and permalink (single post) if ( blogLink == undefined ) { blogTitle = $(obj).closest('div .blog-entry').find('.blog-entry-title').text(); blogLink = $(location).attr('href'); } // Insert AddThis links $(this).append( '' ); $(this).append( '' ); $(this).append( '' ); }); });
![Custom JavaScript](/resources/images/RW_JavaScript.png "Custom JavaScript") If you want to know what this piece of jQuery is doing, jump to [Dissecting the magic](#magic).

## Custom CSS
Add the following piece of CSS code as Custom CSS (Page Inspector -> Header -> CSS) of the blog page .twitter-share-button { vertical-align: top; } /* Properly align tweet button */ iframe { vertical-align: bottom; } /* Properly align Google+ button */ div .social-badges { height: 30px } /* Fix issue with Chrome and Internet Explorer */
![Custom CSS](/resources/images/RW_CSS.png "Custom CSS")

## Additional Blog post code Add the following piece of HTML code to each end of your blog posts. The jQuery code uses this piece of HTML code to; 1. Determine title and permalink for the current blog post 1. Insert the social sharing links __Note__: Be sure to apply 'Ignore Formatting' (⌘-.) to this piece of code (pink background color)
![Ignore Formatting](/resources/images/RW_Ignore_Formatting.png "Ignore Formatting")

## End result
After following these steps (and of course exporting the changes to the webserver) the sharing buttons get added to each of the individual blog post. ![Blog post within sharing buttons](/resources/images/Blogpost_Example.png "Blog post within sharing buttons")

##Dissecting the magic When the web page has loaded search locate all __div__-tags with the class _social-badges_ $(document).ready( function() { $('div .social-badges').each( function( i, obj )
Within the found div-tags locate the nearest __div__-tag with the class _blog-entry_ and within that __div__-tag locate any tag with the class _blog-permalink_ // Blog title and permalink (archive/main blog page) var permaLink = $(obj).closest('div .blog-entry').find('.blog-permalink');
For the found tag (should be an ahref) get the text (being the blog post title) and href-property (the permalink of the post) var blogTitle = permaLink.text(); var blogLink = permaLink.prop('href');
In case the permalink is empty (we are on a page of the individual blog post itself), so we need to get document URL and the title somewhere else if ( blogLink == undefined ) { blogTitle = $(obj).closest('div .blog-entry').find('.blog-entry-title').text(); blogLink = $(location).attr('href'); }
Insert the social sharing links using the AddThis API (adding blog post title and permalink) $(this).append( '' ); $(this).append( '' ); $(this).append( '' );

##Closing statement
Before this I never really did anything with jQuery, but still was able to put this little gem to work fairly quickly…. If you like this post, please share it with your friends using the sharing buttons below Winking [lgs]: http://www.littlegemsoftware.com "Little Gem Software" [rw]: http://www.realmacsoftware.com/rapidweaver/overview/ "Rapidweaver" [ad]: http://www.addthis.com/ "AddThis" [jq]: http://jquery.com/ "jQuery" [st]: http://yourhead.com/stacks/ "Stacks" [fb]: http://facebook.com/ "Facebook" [tw]: http://twitter.com/ "Twitter" [gp]: https://plus.google.com/ "Google+"


LGS Logo
Little Gem Software
Copyright © 2017 Little Gem Software. All Rights Reserved.