Module MarkupSocialShareButtons

[Soma]

@bacos where do you see/read this method of setting the theme? It's never mentioned somewhere and it's not the way to do it. That setTheme is protected and not part of public API. Read https://github.com/somatonic/MarkupSocialShareButtons#themes

[Bacos]

Hi Soma !

I saw in theme.php file.

* Alternatively from the API you can set a theme by using method ->setTheme(themename)
 * i.e. $modules->MarkupSocialShareButtons->setTheme("round")->render();
 *
 * To create your own create a file with the content of this file somewhere in your site/templates/ folder
 * This would be a subfolder, and in there a file "theme.php".
 *
 * Now you can enter the path relative from "site/templates" in the module config
 *   $modules->MarkupSocialShareButtons->setTheme("mythemes/mytheme")->render();

I guess I misunderstood this instruction !

[Soma]

Ah, thanks for the hint. I see now this is s leftover from a earlier version and forgot to change it there.

[Bacos]

You're welcome !

I think that I found the new instruction :

echo $modules->MarkupSocialShareButtons->render(array("theme" => "templates/mythemes/mytheme");

I'm gonna try it !

[Soma]

Updated module today to 1.0.3 with a small fix

- where the markup would break if there's not encoded single quotes in title or texts for linkedin and twitter. It's now using htmlspecialchars_decode() and rawurlencode().

[kater]

Great module. Love the config options (using FontAwesome).

I've added two custom fields so i can add some more information (event start/end dates).
Probably something for the next update?

thanks!

[Macrura]

hey Soma, thanks for this, it's working really well for a project i'm doing right now!

I ended up needing to add some classes to the outer wrapper...(the buttons are in a share button which opens a menu)..

i was wondering if you might consider adding a config option at some point for outer wrapper class, if you think that may be of use to others.

[Soma]

Outer wrapper? There's none, just an UL

So what I do if needed is like:

echo "<div class='wrapper'>";
echo $modules->MarkupSocialShareButtons->render();
echo "</div>";

[Macrura]

thx - right, but in my case i needed the class on the UL; i could fiddle with the CSS and see about adding those classes one level up as a wrapper like you have..

[Soma]

I see, I'll maybe have a look into but will maybe take some time. It's always a lot of work update a module with readme etc, but will put on my list.

For now I think a better approach would then be this to replace the UL wrapper class, "MarkupSocialShareButtons", with your own class or extend it:

 

$content .= str_replace("MarkupSocialShareButtons cf", "myClasses", $modules->MarkupSocialShareButtons->render());

[Macrura]

I see, I'll maybe have a look into but will maybe take some time. It's always a lot of work update a module with readme etc, but will put on my list.

For now I think a better approach would then be this to replace the UL wrapper class, "MarkupSocialShareButtons", with your own class or extend it:

$content .= str_replace("MarkupSocialShareButtons cf", "myClasses", $modules->MarkupSocialShareButtons->render());

yeah, this is totally fine with me (didn't think of doing it this way.)... leave the module!

[ceberlin]

Hi Soma, the Validator is still complaining about missing alt tags (in the theme templates)...

[tires]

Hi Soma,

great module!

But i have a problem with the facebook share button:
I want sometimes not the first but the second image to be shared on facebook.
Where can i define which image will be transferred to facebook?

Or is this managed by og-tags?
 

Thanks!!!

 

[Soma]

19 hours ago, tires said:

Hi Soma,

great module!

But i have a problem with the facebook share button:
I want sometimes not the first but the second image to be shared on facebook.
Where can i define which image will be transferred to facebook?

Or is this managed by og-tags?
 

Thanks!!!

 

Thanks. Yes the facebook grabs the image from wherever it finds it first.

[Macrura]

On 9/21/2016 at 8:03 AM, tires said:

Hi Soma,

great module!

But i have a problem with the facebook share button:
I want sometimes not the first but the second image to be shared on facebook.
Where can i define which image will be transferred to facebook?

Or is this managed by og-tags?
 

Thanks!!!

It is definitely managed by OG tags - if you have the correct meta then FB will use your specified OG image, otherwise it will search for and use the first image.

here is an example

<meta property='og:title' content='###' />
<meta property='og:type' content='website' />
<meta property='og:site_name' content='###' />
<meta property='og:locale' content='en_US' />
<meta property='og:url' content='http://www.website.com/' />
<meta property='og:description' content='###' />
<meta property='og:image' content='http://www.website.com/site/assets/files/####/image.1200x630.jpg' />
<meta property='og:image:url' content='http://www.website.com/site/assets/files/####/image.1200x630.jpg' />
<meta property='og:image:type' content='jpg' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />

 

[tires]

23 hours ago, Macrura said:

It is definitely managed by OG tags - if you have the correct meta then FB will use your specified OG image, otherwise it will search for and use the first image.

here is an example

<meta property='og:title' content='###' />
<meta property='og:type' content='website' />
<meta property='og:site_name' content='###' />
<meta property='og:locale' content='en_US' />
<meta property='og:url' content='http://www.website.com/' />
<meta property='og:description' content='###' />
<meta property='og:image' content='http://www.website.com/site/assets/files/####/image.1200x630.jpg' />
<meta property='og:image:url' content='http://www.website.com/site/assets/files/####/image.1200x630.jpg' />
<meta property='og:image:type' content='jpg' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />

 

I used the Markup SEO modul         side by side with this module.
The seo module creates die og tags automatically (and left the og:image was always blank).

I solved it by putting the og tags manually in my head.inc and fill it with:

<meta property="og:image" content="<?php echo 'http://'.$_SERVER['HTTP_HOST'].$page->myimage2->url; ?>" />
<meta property="og:image:width" content="<?php echo $page->myimage->width; ?>" />
<meta property="og:image:height" content="<?php echo $page->myimage->height; ?>" />

That works well!

Thanks an best regards!
 

[adrian]

@Soma

Using this for the first and it's awesomely flexible - thank you!

One problem is that some of the $option parameters aren't correctly overriding the defaults. So far I know that these two don't, but there might be others:

outer_wrapper_tag
item_wrapper_tag

The other suggestion I have is an option (or maybe it should just be the default) is to use the full http url to the icon images. I know this can be adjusted in the theme.php file, but it means you need a custom theme to make this work. The reason I want this is for inserting the icons into an outgoing email.

Thanks.

[danielsl]

hi !

can anyone specify where is the template located,

i feel it irritated to do

$content .= str_replace("MarkupSocialShareButtons cf", "myClasses", $modules->MarkupSocialShareButtons->render());

also i need to add other elements across the output? 

[Macrura]

it would be cool if the classes were a field in the module config, so you could add or change them

[danielsl]

I think its better to have a tpl, so its easier to redo it manually with repeaters and a single php 

[adrianmak]

it is good to have shared count of each of social media

[Marco Ro]

Hi, I can't understand why this happens:

Ex Facebook:

I tried to post the link on the facebook page and form there I can see Title, Description and the image. But If use the share button this doesn't work in the same way.

This is my options chosen for facebook:

• ?url={url} --> I see only the link (this is correct)
• ?url={url}&title={title}&text={text}&media={media}   -->  I see only the link

Ugual for Pinterest and for twitter not take any image.

• Pinterest  -->  ?media={media}&url={url}&description={text}
• Twitter --> ?url={url}&title={title}&text={text}&media={media}

 

I  try to set the {media} for take the field where is my image but probably I set it wrong.

How I can do ?

 

 

[Marco Ro]

Hi everyone!

How I can set correctly the media={media} ? Because at moment no social uploads any image, ex: on Pinterest the html output miss the SRC attribute. 

to try to set the media I try to use my image filed but doesn't work. I try in the module and also in the backend. But the page load a src={my_filed}.

Any Idea? What I can do?

Thank you

[Macrura]

@MarcoPLY,

I've never tried the media={media} parameter;

But in general the way this works is you have to have the correct markup on the page itself, meaning valid og tags and twitter card in the header. Maybe you already know this and are trying to override, but if not....

<meta property='og:image' content='bsolute/link/to/image.jpg' />
<meta property='og:image:url' content='absolute/link/to/image.jpg' />
<meta property='og:image:type' content='png' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='630' />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:site' content='your-twitter-handle' />
<meta name='twitter:title' content='Page Title' />
<meta name='twitter:description' content='Some description' />
<meta name='twitter:creator' content='your-twitter-handle' />
<meta name='twitter:image:src' content='absolute/link/to/image.jpg' />

 

[Soma]

"media" can (as any) or must be set by the options array you give the render() method.

$options = array(
	"media" => $page->image->httpUrl()
);
echo $modules->MarkupSociaShareButtons->render($options);