16
Jan, 2012

ShareBar Extended is a new section for the PageLines Framework theme for WordPress and replaces the default PageLines ShareBar. It adds social sharing icons for Google+, Pinterest, Facebook, Twitter, StumbleUpon, Reddit, Delicious, Digg, LinkedIn, and Email and is configured within the PageLines admin interface.

Installation

Installing the zip file

Installing the zip file

First, make sure you have installed and activated the PageLines Sections plugin. This plugin must be activated before any sections will work. Just visit the PageLines Store within your WordPress admin to activate.

ShareBar Extended installation depends on your method of purchase. Here are some tips:

  • When purchased through your WordPress admin (easiest method), just visit PageLines -> Store -> Sections -> Your Added Sections, and activate.
  • When purchased from PageLines.com, upload the original zip file to PageLines -> Store -> Sections -> Get New Sections -> Upload. Afterward, activate the section in the “Added” tab.

Choose Where it Displays

Activate the section

Activate the section

After you have installed and activated ShareBar Extended, visit PageLines -> Drag & Drop -> Select Template Area and highlight the “Content Area”. The “Content Area Types” which can use the ShareBar Extended section are:

  • Template (Default, 1, 2, 3, 4, 5)
  • Blog
  • Blog Post
  • Author
  • Tag
  • Archive
  • Category
  • Search
  • 404 Error
  • Custom Page

(I don’t know why you’d want a social ShareBar on some of these pages but that’s your choice, not mine. ;))

Choose the content area type(s) you want the ShareBar Extended section on, then move the ShareBar Extended box to the left side to activate it (see image above). Don’t forget to move the default ShareBar to the right side to deactivate it (otherwise you will have two ShareBars).

Set the Options

Set the options

Set the options

The ShareBar Extended options are located at PageLines -> Site Options -> ShareBar Extended. These options allow you to choose which sharing icons display in the ShareBar, text alignment, icons alignment, the “call to action” text, text font, text font size, and text font color. You can even add ShareBar Extended to your post excerpts!

Note: If you enable all sharing icons while having a narrow-width content area, your ShareBar may wrap to two lines. If this happens, change the Post Footer Social Sharing Text sentence to something a little different. Shortening the sentence by a word or two usually does the trick.

Customizing with CSS

If you’re like me and customize everything with CSS, you may find this information handy.

//-CHANGES THE BACKGROUND COLOR AND TEXT COLOR PLUS CHANGES MARGINS/PADDING-//
#page .section-sharebar-extended {
background-color: #FFFFFF; //background color
color: #000000; //font color
margin: 10px; //margin
padding: 10px; //padding
}

Change Log

  • 1.0: Initial release.
  • 1.1: PageLines Framework 2.1 update removed the original share bar. This release adds it back in and is updated to work with 2.1. Post Footer Social Sharing Text is now part of this section since it was also removed as part of the framework update. Stylesheet added since the framework update removed padding between icons.
  • 1.2: Code cleanup thanks to Simon @ PageLines.
  • 1.3: Corrected Pinterest URL to properly pass the post title and post URL to the Pinterest description field.
  • 1.31: Pinterest URL fix.
  • 1.5: Major overhaul of the section. Added a separate admin tab located at PageLines -> Settings -> ShareBar Extended in order to avoid conflicts with the default PageLines sharebar. Enabled cloning. Added all new icons. Added share by email option. Added font family (uses GoogleFonts), font size, added font color for sharing text. Also added “float” options to provide positioning options. Also changed internal coding to avoid conflicts with the default PageLines sharebar. You will need to visit the new admin panel to re-save your options.
  • 1.51: Fixed a coding error that I forgot to remove before releasing new version.
  • 1.52: Fixed another coding error related to Pinterest image sharing.
  • 1.6: Added the ability to use in post excerpts.
  • 1.62: Bug fix.
  • 1.63: Allowed use in all PageLines content sections.
  • 1.7: Code changed for compatibility with PageLines Framework v2.3. Code cleanup for correct ampersand usage in URLs. Added hover effect on social icons. Added alt value to Share by Email image.
  • 1.8: Email sharing now includes post/page title in email subject and post/page url in email body (props Sterling B!).
  • 1.81: Pinterest and Google JavaScripts will now only load in the head of pages when needed, instead of all pages (props Adam!). Font usage is all better now.

Thanks for Stopping By!

If you have any questions, feature requests, or bugs to report, please leave a comment below. Enjoy!