{"id":893,"date":"2019-11-12T14:57:49","date_gmt":"2019-11-12T14:57:49","guid":{"rendered":"https:\/\/www.uri.edu\/styleguide\/?page_id=893"},"modified":"2021-05-05T14:49:17","modified_gmt":"2021-05-05T14:49:17","slug":"share-bars","status":"publish","type":"page","link":"https:\/\/www.uri.edu\/wordpress\/components\/share-bars\/","title":{"rendered":"Share Bars"},"content":{"rendered":"\n<p class=\"type-intro wp-block-paragraph\">Share Bars provide a way to share the current page or post on social media.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s an example share bar:<\/p>\n\n\n<div class=\"cl-wrapper cl-share-wrapper\"><div class=\"cl-share color block-level \"><div class=\"cl-share-label\">Share:<\/div><ul class=\"cl-share-buttons\"><li><a href=\"http:\/\/twitter.com\/share?text=Share Bars&amp;url=https:\/\/www.uri.edu\/wordpress\/components\/share-bars\/\" title=\"Share on X\" class=\"cl-share-twitter share-twitter\" target=\"_blank\" rel=\"nofollow noopener\">Share on X<\/a><\/li><li><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/www.uri.edu\/wordpress\/components\/share-bars\/\" title=\"Share on Facebook\" class=\"cl-share-facebook share-facebook\" target=\"_blank\" rel=\"nofollow noopener\">Share on Facebook<\/a><\/li><\/ul><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">By default, share bars show color icons for supported social media platforms on a light gray background.  Share bars can also be styled as &#8220;dark&#8221;, with light icons on a dark background:<\/p>\n\n\n<div class=\"cl-wrapper cl-share-wrapper\"><div class=\"cl-share dark block-level \"><div class=\"cl-share-label\">Share:<\/div><ul class=\"cl-share-buttons\"><li><a href=\"http:\/\/twitter.com\/share?text=Share Bars&amp;url=https:\/\/www.uri.edu\/wordpress\/components\/share-bars\/\" title=\"Share on X\" class=\"cl-share-twitter share-twitter\" target=\"_blank\" rel=\"nofollow noopener\">Share on X<\/a><\/li><li><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/www.uri.edu\/wordpress\/components\/share-bars\/\" title=\"Share on Facebook\" class=\"cl-share-facebook share-facebook\" target=\"_blank\" rel=\"nofollow noopener\">Share on Facebook<\/a><\/li><\/ul><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">A &#8220;light&#8221; option is also available, with dark icons on a light background:<\/p>\n\n\n<div class=\"cl-wrapper cl-share-wrapper\"><div class=\"cl-share light block-level \"><div class=\"cl-share-label\">Share:<\/div><ul class=\"cl-share-buttons\"><li><a href=\"http:\/\/twitter.com\/share?text=Share Bars&amp;url=https:\/\/www.uri.edu\/wordpress\/components\/share-bars\/\" title=\"Share on X\" class=\"cl-share-twitter share-twitter\" target=\"_blank\" rel=\"nofollow noopener\">Share on X<\/a><\/li><li><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/www.uri.edu\/wordpress\/components\/share-bars\/\" title=\"Share on Facebook\" class=\"cl-share-facebook share-facebook\" target=\"_blank\" rel=\"nofollow noopener\">Share on Facebook<\/a><\/li><\/ul><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Share bars support sharing on Twitter and Facebook.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Adding a Share Bar<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Currently, share bars can only be implemented by using the shortcode (see the below documentation).<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<div class=\"wp-block-group docs-section\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h1 class=\"wp-block-heading\">Technical Details<\/h1>\n\n\n\n<p class=\"wp-block-paragraph\">Share bars can be implemented with the shortcode\u00a0<code class=\"shortcode\">cl-share<\/code>.<\/p>\n\n\n\n<p class=\"code shortcode wp-block-paragraph\">[cl-share]<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Attributes<\/h2>\n\n\n\n<div class=\"wp-block-columns shortcode-attributes is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">style<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">(string) (optional) (values: <code class=\"string\">color<\/code>, <code class=\"string\">dark<\/code>, <code class=\"string\">light<\/code>)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Set the style of the icons<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(default value: <code class=\"string\">color<\/code>)<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">class<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">(string) (optional)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Set custom CSS class(es)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">(default value: none)<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Share Bars provide a way to share the current page or post on social media. Overview Here&#8217;s an example share bar: By default, share bars show color icons for supported social media platforms on a light gray background. Share bars can also be styled as &#8220;dark&#8221;, with light icons on a dark background: A &#8220;light&#8221; [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":188,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-893","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/comments?post=893"}],"version-history":[{"count":4,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/893\/revisions"}],"predecessor-version":[{"id":2969,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/893\/revisions\/2969"}],"up":[{"embeddable":true,"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/pages\/188"}],"wp:attachment":[{"href":"https:\/\/www.uri.edu\/wordpress\/wp-json\/wp\/v2\/media?parent=893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}