[MGNLDEMO-105] Social Sharing Component Created: 23/Sep/15  Updated: 15/Apr/16  Resolved: 29/Oct/15

Status: Closed
Project: Magnolia Demo Projects
Component/s: None
Affects Version/s: 0.7
Fix Version/s: 0.8

Type: Story Priority: Major
Reporter: Christopher Zimmermann Assignee: Federico Grilli
Resolution: Fixed Votes: 0
Labels: None
Remaining Estimate: 0d
Time Spent: 1d 2.5h
Original Estimate: Not Specified

Attachments: PNG File Screen Shot 2015-09-23 at 4.59.14 PM.png    
Issue Links:
Relates
relates to MTE-53 Social Share Component Open
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: Travel Demo
Sprint: Basel 16
Story Points: 5

 Description   

Create a component for Social Sharing using the AddToAny service, and use it in the demo.
(AddToAny is a good choice because it requires no registration and is known to load fast - other popular social sharing services are known to slow page loading.)

Context: This feature will eventually be part of MTE, but we implement it in the demo first as a there is strong demand, and this gives a chance to try it out.

Why: Social Sharing comes up on almost every RFP. While one can explain that it is easy to do - it is such a standard feature of the web today that it should be included in a believable convincing demo.

Configurable by parameters should be:

  • roundCorners: square or rounded corners, with false as default.

Configurable by dialog should be

  • size: 48, 32, 24 or 16 pixel icons, with 32 as default.
  • float: true or false, with false as default
  • vertical: true or false, with false as default
    (The above settings are all applied as classes on the main div see: https://www.addtoany.com/buttons/customize/floating_share_buttons)
  • checkboxes for which services to provide buttons for:
  • facebook (default)
  • twitter (default)
  • google_plus (default)
  • pinterest
  • linkedin
  • email
  • reddit
  • stumbleupon

The following basic AddToAny code can be used in the component:
(Note the style clause should only be added if author chooses "square corners".)

<!-- AddToAny BEGIN -->
<style type="text/css">
.a2a_svg, .a2a_count { border-radius: 0 !important; }
.a2a_menu, .a2a_menu_find_container { border-radius: 0 !important; }
</style>
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
<a class="a2a_dd" href="https://www.addtoany.com/share_save"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_google_plus"></a>
</div>
<script type="text/javascript" src="//static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->

Usage in demo:

The component should be made available in the main area of the standard page, and in the responsive columns component.
It should actually be included on the Careers page - above the "Current openings" text/image.
The component should be made available and actually be included on the tour-type and destination page, just above the Tour List component.
The component should be included on the Tour page in the following way: The Tour Detail component should be altered to include an area (named "summary"?) directly after the

[#if tour.body?has_content]
                <div class="body">${tour.body!}</div>
            [/#if]

.
This area should have all the basic MTE components available. It should include the Social Sharing component. (See attached screenshot)



 Comments   
Comment by Christopher Zimmermann [ 28/Oct/15 ]

The /travel/tour-type and /travel/destination pages have a problem on mobile/narrow screens - the social buttons block the menu.
Two options I can imagine:

  • floating on the right side.
  • leaving the buttons off of these pages for now.
Comment by Philip Mundt [ 28/Oct/15 ]

Alternative solution: add a relatively low z-index to the social-sharing css class.

Comment by Christopher Zimmermann [ 28/Oct/15 ]

I think Philip's suggestion is the way to go.

Comment by Ilgun Ilgun [ 29/Oct/15 ]

Default ones are clickable, however whatsapp for instance is not clickable.

Comment by Federico Grilli [ 29/Oct/15 ]

True it doesn't work on desktop but it does on a mobile phone with WA installed. I guess we have no control over this.

Generated at Mon Feb 12 05:16:21 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.