Social Share Button Outside of Element

Support
#1

Hi, I am trying to put a Share on Facebook button in my button bar. I have managed to get the code working on a standard button, but when I try to add classes to it to match my other buttons (V2) it doesn’t quite match. See the bottom “CLICK TO SHARE” button HERE.

I also tried to copy and paste the code from within the Share element button, to my properly styled button (the one with the facebook icon and the word “Share” next to the print button, but that fails.

I feel like I am very close but can’t get either to work. Any help would be much appreciated!

Thanks!

Steve

#2

Hi Steve,

To make the same, you may change this code

.ergo-button {
    background-color: rgba(255,255,255,0.4) !important;
    padding: 0.5em 0.5em 0.3em 0.5em !important;
}

with this

body .ergo-button {
    border-radius: 0.35em !important;
    font-size: 1em !important;
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25) !important;
    background-color: rgba(255,255,255,0.4) !important;
    padding: 0.5em 0.5em 0.3em 0.5em !important;
    border: 0;
    color: rgba(0,0,0,0.4) !important;
}

Hope that helps

#3

Hi Paul,

Thanks! That worked great!

I am just about there, but I had to build my new Facebook button out of a content area, and now it is about 1.5 pixels taller than the other buttons. (See here) Everything seems to match and I am beginning to suspect that it is the content area itself that is causing the problem: x-bar-content-area. It is 37.6 pixels while the adjacent buttons are 36.1 pixels. The right-hand facebook button looks perfect but doesn’t function, while the left-hand (center) button functions but is taller than the rest. If we could get the Center button to match or the right button to work that would be fantastic!

Thanks!

#4

Hi @ErgoArchitecture,

The line height of your button text is not the same. Please also add this custom CSS:

button.ergo-button span.x-anchor-text-primary {
    line-height: 15px;
    maring: 5px;
}

Hope it helps :slight_smile:

#5

Thank you, thank you, thank you! I must have spent 2 hours looking for that!

Steve

#6

You are most welcome. :slight_smile:

#7

A follow-on question: That center button had a popover (terminology may be wrong or backwards) that I deleted, but it left a tooltip:
data-x-element="extra" title="Share on Facebook"
I was about to delete that too, but I rather liked it. Is it possible to add tooltips to the other buttons? I tried placing in element CSS a variety of ways but all failed spectacularly!

Thanks!

#8

Hello Ergo,

Thanks for updating the thread.

You can take a look at following resource to add tooltips:

http://demo.theme.co/integrity-1/shortcodes/popovers-and-tooltip/

Thanks.

#9

Hi Prasant,

Yes, I had seen that, but the instructions seem to be in Latin! All kidding aside, it tells you how to modify the shortcode, but not how to add it. I have tried 36 different ways, but can’t seem to figure out how to apply the shortcode to a button. Also, this seems to use a different method than the data-x-element approach so I was concerned that the styling might be different. However, I haven’t been successful in attaching any tooltip to a button… Where on the button do I attach the code?

Thanks!

Steve

#10

Hello Steve,

In a text element, you can insert this shortcode:

[extra class="x-btn x-btn-regular" href="#example" title="Yeah, tooltip time!" info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." ] Button [/extra]

It should allow you to have a button with a tooltip. Just make sure to add the contents of the tooltip in the title attribute like this:

[extra class="x-btn x-btn-regular" href="#example" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus." info="popover" info_place="top" info_trigger="hover" info_content="Place a little extra content in here for informational purposes." ] Button [/extra]

Only plain text is allowed for the tooltip contents.

#11

Hi RueNel,

The problem that I am facing is that I can’t find any plain HTML text areas in the V2 button elements to place the code. Could you be more specific as to where they exist? In this example the Facebook share button in the center isn’t a Button element but rather a Content Area so I had a place for the code. I have tried placing the code in the button’s element css, in the link boxes, and even in the text box.

Your code seems to be creating a button in addition to the popover. To be clear, I already have V2 button elements created, working, and styled that I am simply trying to attach tooltips to. I simply want to add tooltips to the V2 buttons at the bottom of this page next to the Facebook button. I am not trying to recreate buttons from scratch. If it is not possible to add tooltips to button elements that would be good to know. If it is possible could you tell me specifically where I put the code, because it isn’t working for me in any logical place I can think of.

Thanks!

Steve

#12

Hello Steve,

The v2 button elements does not not offer any option to display a popover or tooltip. Popover and tooltip is only available in classic button elements.

Hope this explains it briefly.

#13

Yes it does. Thanks!

#14

You are most welcome!

#15

Ok, to close the loop on this for others trying to do the same thing, we were able to create a Facebook Share Button outside the social share element with the following code pasted into a Content Area element:

<button class="your-button-class" 
      href="#share"
      onclick="window.open('http://www.facebook.com/sharer.php?u=http://your.URL.com&amp;t=your title ', 'popupFacebook', 'width=650, height=270, resizable=0, toolbar=0, menubar=0, status=0, location=0, scrollbars=0'); return false;" 
      data-original-title="Share on Facebook"
    >
    <span class="x-anchor-content">
      <span class="x-graphic" aria-hidden="true">
        <i class="x-icon x-graphic-icon x-graphic-primary ::before" aria-hidden="true" data-x-icon-b="">&nbsp;&nbsp;&nbsp;&nbsp&nbsp
        </i>
      </span>
      <span class="x-anchor-text">
        <span class="x-anchor-text-primary">Share
        </span>
      </span>          
    </span>
</button>

We removed the tooltip/popover from this code to match our adjacent buttons, but this could be added back if you plan on doing a row of social share buttons.

#16

I see, thanks for sharing!

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.