Soma

MarkupSocialShareButtons

Recommended Posts

MarkupSocialShareButtons
 
This module outputs a list of share links for the following services by default
 
* E-Mail (kinda extra)
* Facebook
* Twitter
* Google+
* LinkedIn
* Thumblr
* Reddit (off by default)
* Pinterest (off by default)
 
Usage examples

echo $modules->MarkupSocialShareButtons->render();
 
This outputs a simple UL list with links

<ul class='MarkupSocialShareButtons cf'>
  <li class='mssb-item mssb-facebook mssb-popup'><a href='url'><i>facebook</i></a></li>
  etc ...
</ul>

Config Screen

post-100-0-26660100-1416777905_thumb.png

See more details and examples on github or modules directory

https://github.com/somatonic/MarkupSocialShareButtons

http://mods.pw/8j

  • Like 16

Share this post


Link to post
Share on other sites

@sinnut, yeah that's the purpose of why I made the module public. Donations welcome ;)

  • Like 1

Share this post


Link to post
Share on other sites

Nice!

I just did all this (build SN links) manually with a new site last week...

Look forward to checking this module out...

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for this Soma. For some reason apart from the 'email', all the other social shares are hidden. The <ul><li> is output but the inner <a> and <i> are hidden, e.g. <i class="icon-twitter">twitter</i> is hidden (CSS). 'Twitter', 'facebook', etc are not shown. Same thing happens if I use icons. The <svg> are hidden. What am I missing?

Share this post


Link to post
Share on other sites

There's nothing in my module that makes them hidden, so it must be your CSS? E-mail has no "popup" class for example. Can you verify?

Share this post


Link to post
Share on other sites

I am testing on a template with hardly any CSS at all. For good measure, I even deleted the CSS with the same results. Below is my output. See the greyed out output for the Social Shares below after email. Yes, email has no 'popup' class.

post-894-0-79517300-1416589913_thumb.png

Edited by kongondo

Share this post


Link to post
Share on other sites

I'm not seeing anything here. Well I'm innocent and it doesn't make sense as there is nothing. Have you installed ad blocker or any plugins ? What browser? 

  • Like 1

Share this post


Link to post
Share on other sites

Sorry for wasting your time!!! Triple facepalm!!!! :-[  -_-  :ph34r:  :blink: Agghhhhhhhhhhhh!!!! Bitten once again!!!! I am going to hide under a rock and will not come out soon. ABP - guilty again! :biggrin:

Your module works a treat! See example below, working together with Blog Module. Will post example code later in Blog thread...Thanks!

post-894-0-34243700-1416591180_thumb.png

  • Like 2

Share this post


Link to post
Share on other sites

No problem. I was waiting for your facepalm post :P

Looks nice!

  • Like 1

Share this post


Link to post
Share on other sites

That's great and will surely become handy soon.

May i suggest namespacing the css classes? Item, Facebook or Twitter are classnames that are potentially already beeing used across several frameworks and applications.

  • Like 2

Share this post


Link to post
Share on other sites

Sorry for wasting your time!!! Triple facepalm!!!! :-[  -_-  :ph34r:  :blink: Agghhhhhhhhhhhh!!!! Bitten once again!!!! I am going to hide under a rock and will not come out soon. ABP - guilty again! :biggrin:

That's why I use a different browser for dev than for web browsing :)

  • Like 2

Share this post


Link to post
Share on other sites

Actually I have no AB anymore since 1-2 years.


That's great and will surely become handy soon.
May i suggest namespacing the css classes? Item, Facebook or Twitter are classnames that are potentially already beeing used across several frameworks and applications.

What framework? :P

Yeah it's only half namespaced, I was about to add it but thought hmm it's so nice and short! :) The UL has the module class name, i'll add them to all classes or make it a var so it could be configured in case.

Share this post


Link to post
Share on other sites

I completely rewrote the module kinda. 

New version just committed earlier:

See readme here for more infos:

https://github.com/somatonic/MarkupSocialShareButtons

There comes now a GUI in the module config screen to select themes (with live preview), and configure all options like links and url params.

Theming has changed a little to make things easier, and the bundled themes use PNG icons instead of SVG.

Edit: updated first post too.

  • Like 4

Share this post


Link to post
Share on other sites

Just when you think you got it you see something you forgot. :)

I just commited a few corrections to descriptions and fixes and missing stuff, minor. If you already got it the moment before you may update.

Share this post


Link to post
Share on other sites

Sorry for writting this without actually downloading and trying out your module, but does it allow to add other (custom) social services?

  • Like 1

Share this post


Link to post
Share on other sites

Sorry for writting this without actually downloading and trying out your module, but does it allow to add other (custom) social services?

Did you read somewhere that it's possible? No it's not, but feel free to make suggestions what to add. There's already all available social media icons included so only a matter of adding them. https://github.com/somatonic/MarkupSocialShareButtons/tree/master/themes/black/png

Share this post


Link to post
Share on other sites

I am talking about social share buttons specific to country. There are a few of them in Russia. And it so happened they are not on the list of availiable icons )) I do not know if they are going to be important to someone outside Russia so would not suggest them.

As it is your module, I just thought that this could be possible it already has interface for extension.

Share this post


Link to post
Share on other sites
Just committed little update


- some minor fixes and improvements

- added config for what fields module searched on {title} and {text} placeholder fields

- added placeholder field „media“ => pinterest

- added services tumblr, reddit (off by default) and pinterest (off by default) 

- updated themes with {themeUrl}

- updated readme

  • Like 8

Share this post


Link to post
Share on other sites

Hi Soma, 

found a little syntax error

MarkupSocialShareButtons.js

$(function(){

    $('[name=theme]').on("change", function(){

    });
}

I think there are two missing characters?

); 

Fixed file

$(function(){
    $('[name=theme]').on("change", function(){

    });
});

Share this post


Link to post
Share on other sites

Thanks. But this script isn't used, so it's kinda leftover.

  • Like 1

Share this post


Link to post
Share on other sites

Soma, I just got around to using this module, and it's great!

It makes setting all these up SO much easier.

Thanks man.  ^-^

  • Like 1

Share this post


Link to post
Share on other sites

Thanks from me as well.

These lines in my template file plus adding alt to the img tags in the theme made my good friend the W3C validator happy.

$options = array('title' => str_replace(' ', '%20', html_entity_decode($page->headline)));
$soc = str_replace('&', '&', $modules->MarkupSocialShareButtons->render($options));
  • Like 3

Share this post


Link to post
Share on other sites

Hi Soma !!

Very nice module... help me a lot !

I'm trying to create my own theme (color) and when I call : 

$content .= $modules->MarkupSocialShareButtons->setTheme("css/color")->render();

I got 

Error: Exception: Method MarkupSocialShareButtons::setTheme does not exist or is not callable in this context (in D:\xampp\htdocs\PWGriffConvites\wire\core\Wire.php line 326)
 
#0 D:\xampp\htdocs\PWGriffConvites\site\templates\convite.php(34): Wire->__call('setTheme', Array)
#1 D:\xampp\htdocs\PWGriffConvites\site\templates\convite.php(34): MarkupSocialShareButtons->setTheme('css/color')
 
css/color are folders, and inside color folder I have theme.php and png folder also.
 
Am I doing something wrong ?
 
Thank you !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Macrura
      Field Descriptions Extended
      This module enables you to extend field descriptions by dividing short descriptions with a longer text that is revealed in a toggle.
      Modules Directory: http://modules.processwire.com/modules/field-descriptions-extended/
      Github: https://github.com/outflux3/FieldDescriptionsExtended
      Extending your field descriptions using the standard field's description field.
      Once this module is installed, it will automatically search your description field for the presence of 5 dashes (-----).
      Any content above the 5 dashes will be visible and the content below the dashes will be hidden. A 'More...' link will appear at the end of the short description which when clicked will reveal the rest of the description.
      Using Simple Markdown Editor with the description field
      If you have Simple Markdown Editor (InputfieldSimpleMDE) installed, you can enable the field description to have that editor.
      *When using Simple MDE, you can use the button (Insert Horizontal Line) instead of typing 5 dashes. More about SimpleMDE.
      Extending your field descriptions using content from a ProcessWire Page for the field description.
      You may use the content from a ProcessWire page as a field description. This would allow you to easily insert images, links, and use hanna codes.
      To use page content for your field descriptions, please follow these instructions:
      Install Select Fields module (FieldtypeFields) http://modules.processwire.com/modules/fieldtype-fields/ Create a new field using this field type, e.g. field_select. Add the field to any template you will be using for your field descriptions. Setup your help pages (for example under a settings branch) where you will store the field description content,using the template containing the Field Select. Add content to a page and select the field where that content should show. To show a short text before the link to the longer content, separate them with 5 dashes Be sure to update your settings on this page, first enable page content descriptions,then specify the name of the Select Fields field, template to search, and content field. If you create a field description using this method, please note that the description field must be blank for contexts where you want the page content to appear.
      You can freely use template context for field descriptions, but the Page Content method is not context sensitive and will display under all contexts where the description is blank.
      ----
      original post:
      This is a new module, hope to release soon, which allows extended field descriptions, in currently 2 ways.
      The main feature of the module is that you can have a short description and then a 'more...' link which drops down a longer block of text.
      This is achieved by separating the intro/visible text and the rest with 5 dashes.

      Example setup:

      the 2nd way is if you are using AdminThemeUiKit, you can show extended field instructions in a panel. The content of the panel is edited on a regular PW page. This use case would probably not be that common, but if you had a field that required some extended instructions for how to use, this could be useful; Also, since this allows you to target information and instructions down at the field level, it could reduce the amount of documentation needed on a global level, since it is a lot more context targeted.

    • By Robin S
      Breadcrumb Dropdowns
      Adds dropdown menus of page edit links to the breadcrumbs in Page Edit.

      Installation
      Install the Breadcrumb Dropdowns module. The module requires ProcessWire >= v3.0.83 and AdminThemeUikit.
      There is a checkbox option in the module config that determines if the breadcrumb dropdowns will include pages that the user does not have permission to edit.
      Features/details
      The module adds an additional breadcrumb item at the end for the currently edited page. That's because I think it's more intuitive for the dropdown under each breadcrumb item to show the item's sibling pages rather than the item's child pages. In the dropdown menus the current page and the current page's parents are highlighted in a crimson colour to make it easier to quickly locate them in case you want to edit the next or previous sibling page. If the option to include uneditable pages is selected then those pages are indicated by a reduced text opacity and the "not-allowed" cursor is shown on hover. There is a limit of 25 sibling pages per dropdown for performance reasons and to avoid the dropdown becoming unwieldy. Incompatibilities
      This module replaces the AdminThemeUikit::renderBreadcrumbs method so will potentially be incompatible with other modules that hook the same method.
       
      https://modules.processwire.com/modules/breadcrumb-dropdowns/
      https://github.com/Toutouwai/BreadcrumbDropdowns
    • By joshuag
      Hey guys, 
      Thought I would share a quick preview of Designme. A module we (Eduardo @elabx and I) are building for visually laying out your templates/edit screens. 🙂
      This is a really quick, zero polish screen grab. FYI. 
      Video #2 - UPDATE
      This new video shows the following features in Designme:
      Re-arranging fields via Drag & Drop Re-sizing fields via Dragging. Adjusting field settings - with live refresh. Working on "hidden" fields while Designme is active. Creating New fields. Deleting fields. Creating/Deleting Tabs. Dragging fields between tabs. Creating fieldsets. Tagging/Un-tagging fields. Fields without headers expand when hovered (like checkboxes). Live filtering of fields in the sidebar. Ability to adjust (all) Template settings without leaving Designme. Template File Tree Editing Template files source code with ACE Editor. Editing Multiple files with ACE Editor. (New Tabs) Saving files. Techie stuff Fields load their own js/css dependancies. *ready to use on creation (*most fields)  Everything happens via Ajax to ProcessPageEdit (via module + hooks). Designme has a JS api that you can use.  All actions trigger events.  We would love any detailed feedback on what you see so far. If you are interested in testing Designme. Let me know below. 🙂
       
       
      Video #1. 
       
    • By dreerr
      TemplateEnginePug (formally TemplateEngineJade)
       
      This module adds Pug templates to the TemplateEngineFactory. It uses https://github.com/pug-php/pug to render templates.
      doctype html html(lang='en') head meta(http-equiv='content-type', content='text/html; charset=utf-8') title= $page->title link(rel='stylesheet', type='text/css', href=$config->urls->templates . 'styles/main.css') body include header.pug h1= $page->title if $page->editable() p: a(href=$page->editURL) Edit Project on GitHub: github.com/dreerr/TemplateEnginePug
      Project in modules directory: modules.processwire.com/modules/template-engine-pug/
       
      For common problems/features/questions about the Factory, use the TemplateEngineFactory thread.
       
    • By tpr
      ProcessNetteTester
      Run Nette Tester tests within ProcessWire admin.
      (continued from here)

      Features
      AJAX interface for running Nette Tester tests, in bulk or manually display counter, error message and execution time in a table run all tests at once or launch single tests show formatted test error messages and report PHP syntax errors stop on first failed test (optional) hide passed tests (optional) display failed/total instead passed/total (optional) re-run failed tests only (optional) auto scroll (optional) include or exclude tests based on query parameters start/stop all tests with the spacebar reset one test or all tests (ctrl+click) https://modules.processwire.com/modules/process-nette-tester/
      https://github.com/rolandtoth/ProcessNetteTester