Google+

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 -> Added to install and activate.
  • When purchased from PageLines.com, upload the original zip file to PageLines -> Store -> Sections -> Add Sections -> Upload. 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 -> Templates -> 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 WordPress -> PageLines -> Settings -> 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.

Thanks for Stopping By!

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

Post comment as twitter logo facebook logo
Sort: Newest | Oldest

Hi - Love the Sharebar extended but when I share using FB from the homepage the text reads 

 

Miss M Make Up | Just another WordPress sitehttp://www.missm-makeup.co.uk/

Hello world!1 ReplyWelcome to WordPress. This is your first post. Edit or delete it, then start blogging! This entry was posted in Uncategorized on April 17, 2013 by MissMAdmin.

 

It doesn't do this on any other page and all of the settings included above have been changed. I've tried redoing the home page but the problem remains.

 

Obviously I'd like it to pull the text from the home page.

Suggestions welcome :-)

 

Hi, I have just installed Sharebar Extend and it is really cook and works fine. Just one thing: I have marked to have the Google+ icon displayed, but it doesn't show. Any idea why?

Thanks a lot,

Eva

grintstick 6 pts

Hi, How do I access the settings for the sharebar?  This path WordPress -> PageLines -> Settings ->  does not seem to exist!  i.e. There is no 'Settings' tab under Pagelines within Wordpress.  Any ideas?  thanks...

 

Mama-Jen 34 pts moderator

 grintstick The paths were changed in PageLines. :)  Please visit  WordPress -> PageLines -> Site Options -> ShareBar Extended.

grintstick 6 pts

 Mama-Jen Hi - Following the path above I'm afraid I still don't see ShareBar Extended listed which is strange.  Should it be under 'Website Setup', 'Colour Control' etc...? thanks...

Hi,

 

I have a couple of questions...

 

Can this be used in a widget, perhpas with shortcode?

 

Can it be shown without the text?

 

Thanks!!

Mama-Jen 34 pts moderator

Hi Glyn.

 

This is a section that you can place nearly anywhere within Drag&Drop (complete list of locations above).

 

It can be shown without text - just don't enter any ;)

GustavoQuinteros 5 pts

Hi Jenny, I need to put a bar in the sidebar. I can do it? thanks

Mama-Jen 34 pts moderator

 GustavoQuinteros This is not meant for sharing icons in a sidebar. There are several Wordpress plugins which can do this for you. :)

mmalfatti 5 pts

Hi Jenny,

first of all, congrats for this cool plugin, which I recently purchased.

 

I've been trying to figure it out myself before bothering others, but I can't seem to get things straight: facebook sharing icon is not showing, and g+ sharing does not appear at all (facebook appears in page source tough).

 

Any possible reason for this that you can think of? Maybe it's really obvious, but I can't solve it.

 

Cheers!

mmalfatti 5 pts

 mmalfatti Ok, found an error in sharebar-extended/section.php inside the facebook condition block. Solved the problem for FB.

I've also seen G+ sharing is not implemented yet.

Regards

 

Mama-Jen 34 pts moderator

 mmalfatti Can you tell me the error you found? As you can see above, the Facebook and G+ icons are showing properly and both are functional. This site uses the latest version of PageLines Framework so I can ensure everything is always working correctly.

This comment has been deleted
Mama-Jen 34 pts moderator

 joostharmsen You're very welcome!

Hi,

 

Have the plugin, but for some reason the 'email'  icon doesn't do much with gmail. It just opens a new email, without copying or adding the postlink / excerpt. 

 

Is this a bug? 

 

I have the same problem when i click on the email-icon on this site. My browser (chrome) opens a new gmailmessage, but has no link to this page.

 

Greetings!

 

Richard

Mama-Jen 34 pts moderator

Hi Richard. I haven't coded the email link to do anything else at this point other than provide a pop-up window to email. I may add further capability to this at a later date but emailing can be rather tricky and almost an entire plugin on its own. Hopefully I can get some other stuff added though. :)

BrunoBasso 5 pts

Hi Jenny, just purchased your plugin 

 

I would like to ad the extended sharebar on all of the products on my website, I'm using jigoshop e-commerce

 

I have already included the sharebar option on the drag & drop but its not showing 

 

 

Mama-Jen 34 pts moderator

 BrunoBasso I don't have a Jigoshop installation to test but I have used it with Woocommerce which is essentially the same. In the Drag&drop editor, visit the "Content Area" and then look for a "Products" page template. If you add the ShareBar there, it should work just fine. :)

ftwit 6 pts

 Mama-Jen Hi Guys, You can't add sections to Jigoshop pages - this is the message under 'Site Options' with Jigoshop installed:

 

Jigoshop Instructions. 

All pages are handled in their respective page meta settings except the main shop page, as this is an archive it requires a special meta page to control layout.

It is not possible to add sections to the shop or product content areas, you can however add sections to the header/morefoot/footer areas and hide them by default then enable them on the product archive special meta tab.

 

I'd love to use it too as the built in sharing with Jigoshop is grim and annoyingly 'old school' compared to the fabulous Extended Sharebar. Maybe you could include enabling it for the Morefoot in the next revision :)

 

Mama-Jen 34 pts moderator

 ftwit Have you checked the Drag&Drop section to be sure? Like I said, I don't have Jigoshop to test on, but using Woocommerce (which is basically the same), I see a "Product" page template as shown in this screenshot: http://i.imgur.com/y6pzJ.png

 

ShareBar Extended works with Woocommerce, no problems. :)

ftwit 6 pts

 Mama-Jen Hi Jen - yes that is exactly what I expected to see but it isn't there. I left a query on the Paglines forum about moving the sidebars for product pages and these are affected by the Default layout template but there is no adding of sections so what ever is added to the default layout just ends up as the out of the box default configuration on the front end. I wasn't aware of Woocommerce and selected Jigoshop because of its prominence in the Pagelines store - however, have to say apart from the adding of sections I am loving Jigoshop otherwise.

Thanks for the help.

Mama-Jen 34 pts moderator

 ftwit Well that's no good! I would recommend putting in a feature request with PageLines for that.

mischief_mari 5 pts

Hello Jenny, I am really interested in buying and using your sharebar to use on a Buddypress site, specifically on the main activity stream page. Will the ShareBar work on that page? Or is this not compatible with BP?

Mama-Jen 34 pts moderator

 mischief_mari Thanks for your comment! I'm honestly not sure if the ShareBar works (or does not work) with BuddyPress, however, I do know that if you have any issues at all, PageLines will gladly refund you for your purchase. :) Please let me know if you end up purchasing it and the outcome so i can add it to document above. Thanks!

td2 6 pts

hi jenny,  i just bought this and for some reason it shows up in blog template and not under blog post template. when i go to add it to blog post template, it doesn't show up as a selectable section. it is definitely installed and activated. i'm on the latest version of PL 2.2.2 and WP 3.4.1. am i missing something?

Mama-Jen 34 pts moderator

 td2 Make sure you are adding it to a "Content Area" Drag&Drop template. :)

td2 6 pts

 Mama-JenYES! Thank you!! But now I realize that the blog template (not blog post template)  doesn't have the share bar extended (looks similar but not quite the same in this case) and when I add the extended there, there is a double. How do I remove that one? You can see what I mean here: http://i.imgur.com/WrNuA.png

Mama-Jen 34 pts moderator

 td2 If you uncheck the option to show the sharebar in post exceprts, then you won't have duplicates, however, that may not be what you're wanting.

 

Adding the sharebar to the blog page will share that blog page's url only. Adding the sharebar to post excerpts will share that post's information. You can have both, or pick one - it's your choice really. :)

 

The post excerpts sharebar does not have text associated with it to remove clutter on the home page. That is why they are different.

td2 6 pts

 Mama-Jen hi again...i guess i'm confused because I don't know how to uncheck the option to show the default sharebar in post excerpts...the only options i see to uncheck or check to hide are Hide Posts Info |  Hide PostLoop |  Hide Post/Page Pagination | Hide ShareBar Extended...you can see by this screenshot here: http://i.imgur.com/rQefX.png

Mama-Jen 34 pts moderator

 td2 View the instructions above for "Set the Options"  :)

ftwit 6 pts

Hi Jenny

I've upgraded to 1.62 while I was upgrading to Pagelines 2.2 and I went in to change the icons as I have a set styled for my site but I can't seem to change the pinterest one (the google one too). Can you advise me on what I need to do.

 

Many thanks

--

Fintan

Mama-Jen 34 pts moderator

 ftwit Hi Fintan! I love how you have changed the images. They work extremely well with your site.

 

Unfortunately the Google+ image can't be changed as Google has not released a share code that they don't control the image. If I could change it, I would!

 

The Pinterest icon, you should be able to change that. Make sure ShareBar Extended is of the latest version and then simply replace the image with yours, renaming it the same.

ftwit 6 pts

 Mama-Jen Hi Jenny - Thanks! yes I'm delighted with ShareBar Extended and what it can do - using it in conjunction with styled icons really helps keep the branding on message and the design uncluttered :)

 

It turned out I had a typo in the Pinterest icon name - doh! I guess not being able to change the Google one put me on the wrong track.

 

BTW if you are interested, the social icons I'm using I got for free from http://fontfabric.com/social-media-icons-pack/ they're a typeface so super easy to use and style - Nice. Should probably donate as I love 'em.

 

Many thanks, keep up the great work!

--

Fintan

Mama-Jen 34 pts moderator

 ftwit Thanks so much for your compliments! I'm glad you are happy with the section. :)  Maybe someday I can work on adding icon sets to the plugin. Might be a nice feature!

 

Also, glad you got the Pinterest icon figured out. If if you ever come across someone who has a +1 button that actually works but isn't the normal Google button, let me know. Of course you can link to your page with any image but the +1 feature.. not so much. :-/

Hi Jenny --

 

I would like to have the sharebar appear at the end of each full-length posts on the blog page.

 

An example of what I envision: http://www.neatorama.com/

 

Notice at the end of each full-length blog entry there is a sharebar. This is what I would like to have on my blog.

 

-- David

Mama-Jen 34 pts moderator

Hi David. I added the ability to add it to the blog page (just sent v1.62 to the store), but I don't think this will help with your situation.

 

Have you tried checking the box to add it to post excerpts and seeing if it displays? If it does not, as an alternative, you can copy/paste all of your post html into the excerpt box and then that should work.

 Mama-Jen 

Checking the box to add it to post excerpts makes the sharebar appear beneath the title/clip metabar. Plus, all the CSS styling is stripped (i.e. no background color, padding, etc.) This is not my desired layout. 

 

It would be really great to easily display what happens on the blog post page (the page where individual blog posts are shown) on the blog page. The sharebar comes at the end of each post, which makes for an elegant visual break between posts as one scrolls toward the bottom of the blog page. 

 

Any advice on achieving this through CSS or other coding?

 

-- David

edwinvdv 5 pts

Hey Jenny, 

 

I would like to know if this plugin can be installed on the "old" platformPro or does it need the PageLines Framework???

 

Thanks

 

Mama-Jen 34 pts moderator

 edwinvdv This plugin is for PageLines Framework only - sorry!

JeremyThompson 5 pts

Hi Jenny, love the sharebar.  Is there any way for it to appear under the post meta but before the post content?  Thanks, Jeremy

Mama-Jen 34 pts moderator

 JeremyThompson Glad you like it. :) If you're talking about in an actual blog post, you can clone the section in Templates but I can't make it appear under the meta bar; it will appear above the title. Hopefully that will work for you!

Can this be placed into the header, footer or primary sidebar?

Mama-Jen 34 pts moderator

All of the sections are listed above. :)

Holimed 5 pts

Hi Jenny, I just activated your share bar, but i´m not quite sure I understood your the excerpt feature..

What I´m looking for is a way to to have the shares in each excerpt (i.e. on the categories page or even search page) so that anyone reading the excerpt of a post can already share it without having to click through to the entire article first.

Can i do that with your share bar? How? Currently I can only get it to work on any page in the top or bottom position..

 

Thanks,

Nikki

My latest conversation: Die Intelligenz des Baobab | Holimed

Mama-Jen 34 pts moderator

 Holimed You need to enable the option to share it in excerpts. Just check the last box which states "Add Social Icons Under Excerpts (Blog Page)".

My latest conversation: Giveaway: $25 SpaFinder Gift Card for Mother's Day from Gift Cards Rock *Ends 5/13*

Holimed 5 pts

 Mama-Jen I have that checked, still does´t show (well only on the top of the page not in each post on i.e. a category list page)..

what i´d like is something like this: <a href="http://naturalnews.com"> or also like this <a href="http://apple-blog.dk/pagelines-developer/social-excerpts/"> (though this plugin does´t currently work as sold). Can your plugin do that?

 

Thanks!

My latest conversation: Die Intelligenz des Baobab | Holimed

Mama-Jen 34 pts moderator

 Holimed The plugin works more like http://apple-blog.dk/pagelines-developer/social-excerpts/, but the social icons do not have counters (as that is not the focus of this section) and it appears below the post excerpt, not above (for cleanliness).

 

It does not work with magazine mode, you have to use the blog mode. There is not enough room for it on magazine mode.

 

Example of it in use: http://jen.staff.pagelines.com/

My latest conversation: Laundry Deals through 5/12

Holimed 5 pts

 Mama-Jen Thanks, at lease i can stop looking now.. any plans to include magazine style? or any hints to how i can get it working in magazine style?

blog style just takes up too much space.

 

appreciate any pointers, thanks,

Nikki

My latest conversation: Die Intelligenz des Baobab | Holimed

Holimed 5 pts

 Mama-Jen I´m just trying to figure out a way to style the blog mode so that I can use your plugin and noticed the following:

The share text from your plugin has completely disappeared, the images are there, text gone. any suggestion?

also, the email icon just opens up an empty email, it does´t have the post title as subject or anything else in it, any way to customize this?

thanks!

My latest conversation: Die Intelligenz des Baobab | Holimed

Mama-Jen 34 pts moderator

 Holimed You may be able to add it using a hook or something (which requires custom PHP code) but I don't have any plans to add this to the plugin as there simply isn't enough room to add it to the bottom of magazine style posts. Sorry!

My latest conversation: More Free Disney Movie Rewards Points