Configuring Social Sharing buttons (which ones, and where they are visible)

Service: Hoop.la

Is there a place in Hoop.la where I can configure which Social Sharing buttons are presented to members?

Can I turn them on/off per module (e.g. On in Forums/ Off in Calenders).

Can I do this at the group level?

If I have to show/hide the Social Sharing  with CSS, what is the CSS ID or Class that I have to manipulate?

Thanks,

ST

Original Post

Activity Stream

Topic Assigned

This topic has been assigned to Jonmark Weber by Jonmark Weber.

Hello ST,

In order to hide the share buttons for specific social networks you will need to use CSS to prevent them from displaying.  I would recommend that you use your browser's inspector to find the ID of the button you would like to hide so that you can base your CSS on that.  For example, the Facebook share button is a link (a element) with an ID of "shareOnFACEBOOK".

You mentioned potentially restricting it so that it hides for certain content types or shows for certain content types.  If you look at the DOM you will notice that Hoop.la includes a lot of classes on the body element to enable you to target things exactly like this.  So for example; all of the topic pages include a class on the body for "h-page-with-content-of-type-FORUM_TOPIC".  With that information you can construct CSS selectors to show/hide the Facebook share button.

Showing for everything but Forum Topics:

.h-page-with-content-of-type-FORUM_TOPIC #shareOnFACEBOOK {
display: none;
}


Showing only for Forum Topics:

body:not(.h-page-with-content-of-type-FORUM_TOPIC) #shareOnFACEBOOK {
display: none;
}


I hope that helps, please let me know if I can help you any further with this.

Jonmark

Thank you Jonmark.

This is great information. Someday it would be nice to configure this kind of thing in the Control Panel at the group level.

You wrote:
If you look at the DOM you will notice that Hoop.la includes a lot of classes on the body element to enable you to target things exactly like this.

Is there an easy way to identify what group I'm in with CSS? I'd like to apply the rules by group if possible.

I've done some things with sessionStorage, but I'd prefer not to have to write and maintain more JavaScript to deal with the Social Sharing buttons.

 Thank you,

 

ST

Hello ST,

I would strongly recommend looking at the classes that are defined on the body of your pages.  As I mentioned, Hoop.la includes MANY marker CSS classes on the body which can be used to toggle features or customize the appearance of your pages.  For your site, for example, you can see that all pages within the "Bose Pro Portable" group include a "h-page-for-group-portable" class on the body element. 

Using that class you should be able to use similar CSS selectors to what I provided above to accomplish what you want.  There should be no need for Javascript to achieve any of this.

Please let me know if I can be of any further assistance,

Jonmark

Question Answered

This action was taken by Jonmark Weber.
To follow up on this question, please click here.
×
×
×
×
×