Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: Antes on May 02, 2020, 12:37:30 PM

Title: [Evil Production] Responsive Social Sharers
Post by: Antes on May 02, 2020, 12:37:30 PM
Originally coded for Bastion (and RDD, and possibly for Lunarfall)... why not share with rest : )

Copy the following code at the end of the index.template.php (before closing ofc)
function template_evil_social_share () {
// We have to be in boardIndex, messageIndex or Topic... otherwise no!
global $context, $board, $topic;
if (empty($_REQUEST['action'])) {
// Output what we have...
echo '
<div id="social_evil_buttons">
<a href="https://www.facebook.com/sharer.php?u='. $context['canonical_url']. '" class="facebook"><i class="fab fa-facebook fa-2x fa-fw"></i></a>
<a href="https://twitter.com/share?text='. $context['page_title_html_safe']. '&url='. $context['canonical_url']. '" class="twitter"><i class="fab fa-twitter fa-2x fa-fw"></i></a>
<a href="https://www.reddit.com/submit?url='. $context['canonical_url']. '" class="reddit"><i class="fab fa-reddit-alien fa-2x fa-fw"></i></a>
<a href="mailto:?'. $context['page_title_html_safe']. '&body='. $context['canonical_url'].'" class="mailto"><i class="fas fa-envelope fa-2x fa-fw"></i></a>
</div>';
}
}


Ofc the CSS part, add this to the end of your index.css file
/* Social Buttons -why not- */
#social_evil_buttons {
position: fixed;
left: 0;
bottom: 40%;
display: flex;
flex-flow: row wrap;
width: 3%;
}
#social_evil_buttons a {
padding: 15px;
display: block;
flex: 1 100%;
text-align: center;
}
#social_evil_buttons a i {
vertical-align: middle;
}
.facebook {
    background: #4267B2;
}
.twitter {
    background: #1DA1F2;
}
.reddit {
background: #ff4500;
}
.mailto {
background: grey;
}


And ofc the Responsive part...
@media screen and (min-width: 240px) and (max-width: 640px) {
/* Social Evil Something */
#social_evil_buttons {
bottom: 0;
width: 100%;
flex-flow: row nowrap;
}
#social_evil_buttons a {
padding: 10px;
}
}


Now you can use the function anywhere ... but I strongly advise to load the function inside template_html_below (before body closing)

Before you ask, this is also planned to be a modification... I just need some "good" time to make this into a mod (had to deal with all these hooks/settings etc...)

Note: This requires Font-Awesome by default to work properly, otherwise you need to change the icons & respected CSS parts

Remember if something is broken, its not my fault it was working last I checked... if its working good...

Snip licensed under: MIT
Title: Re: [Evil Production] Responsive Social Sharers
Post by: humbleworld on June 18, 2020, 04:57:24 AM
I tried this but it didn't work in my site. No social media buttons.
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 01, 2020, 11:55:56 AM
Probably you do not have Font Awesome loading in your template.
Title: Re: [Evil Production] Responsive Social Sharers
Post by: Mick. on December 01, 2020, 03:17:50 PM
Possibly font awesome not loading....

add this before the </head> closing tag.

      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" />
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 03, 2020, 09:44:58 AM
Hmm, I tested it on my site (my theme has FA) but it still does not work https://www.translatum.gr/forum/index.php
Title: Re: [Evil Production] Responsive Social Sharers
Post by: Antes on December 03, 2020, 02:24:49 PM
did you echo the "template_evil_social_share()" in your index.template :)
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 03, 2020, 03:55:55 PM
That is where it is on the template....

echo '
<script>
jq(document).ready(function () {
jq(".fsOpen").click(function () {
jq("input:text:visible:first").focus();
jq("body").css("overflow", "hidden");
});
jq(".searchButton").click(function () {
jq(".fullscreen.searchBar").css("display", "block");
});
jq(".loginOpen").click(function () {
jq(".fullscreen.loginBar").css("display", "block");
});
jq(".fullscreen .fsClose").click(function () {
jq(".fullscreen").css("display", "none");
jq("body").css("overflow", "auto");
});
});
</script>
<div class="sampleClass"></div>';


function template_evil_social_share () {
global $context, $board, $topic;
if (empty($_REQUEST['action'])) {
echo '
<div id="social_evil_buttons">
<a href="https://www.facebook.com/sharer.php?u='. $context['canonical_url']. '" class="facebook"><i class="fab fa-facebook fa-2x fa-fw"></i></a>
<a href="https://twitter.com/share?text='. $context['page_title_html_safe']. '&url='. $context['canonical_url']. '" class="twitter"><i class="fab fa-twitter fa-2x fa-fw"></i></a>
<a href="mailto:?'. $context['page_title_html_safe']. '&body='. $context['canonical_url'].'" class="mailto"><i class="fas fa-envelope fa-2x fa-fw"></i></a>
</div>';
}
}

echo '
</body></html>';
}
Title: Re: [Evil Production] Responsive Social Sharers
Post by: Antes on December 03, 2020, 04:00:21 PM
The fuction itself created so once I pack this as a mod, I dont have to do "template edit"... I can inject the func. into the template, you just need to echo (actually call the template) in your template file to work. For example; this is how I am calling it in Bastion theme;

Code (Index.template) Select
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

template_evil_social_share();
echo '
</body></html>';
}
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 04, 2020, 02:22:19 AM
Right, so I got it, I had to put the chunk of code at the end of the template.
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 04, 2020, 03:32:30 AM
Now I get some errors, maybe escaping? The error points to the first line of index.template.php.

Failed to load resource: the server responded with a status of 500 ()
index.php:1 GET https://www.translatum.gr/forum/index.php 500
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 08, 2020, 07:07:19 AM
For some reason Twitter sharer seems to choke if the page title contains a pipe symbol. Maybe page_title_html_safe is not that safe?

https://www.translatum.gr/forum/index.php?topic=987994.0

<a href="https://twitter.com/share?text='. $context['page_title_html_safe']. '&url='. $context['canonical_url']. '" class="twitter" target="_blank" rel="noopener noreferrer nofollow"><i class="fab fa-twitter fa-2x fa-fw"></i></a>

I also added target="_blank" rel="noopener noreferrer nofollow" so that they open in new pages.
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 09, 2020, 07:04:53 AM
Tried adding linkedin too but it would always display the forum page (seems to choke on ?topic=)

<a href="https://www.linkedin.com/sharing/share-offsite/?url='. $context['canonical_url']. '" class="linkedin" title="Share in LinkedIn" target="_blank" rel="noopener noreferrer nofollow" ><i class="fab fa-linkedin-in fa-2x fa-fw"></i></a>
Title: Re: [Evil Production] Responsive Social Sharers
Post by: Antes on December 09, 2020, 03:49:01 PM
Interesting findings... I will take a look at them at first off-day...
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on December 16, 2020, 09:46:01 AM
Improved e-mail link by adding topic title as subject:

<a href="mailto:?subject='. $context['page_title_html_safe']. '&amp;body='. $context['canonical_url'].'" class="mailto" target="_blank" title="E-mail this page"><i class="fas fa-envelope fa-2x fa-fw"></i></a>
Title: Re: [Evil Production] Responsive Social Sharers
Post by: Kindred on December 16, 2020, 10:46:17 AM
working nicely with a few size adjustments
https://test2.turtleshellprod.com/index.php
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on February 02, 2021, 07:42:37 AM
I get multiple Undefined index: canonical_url errors all  pointing to these three lines. Any idea?


==>938: <a href="https://www.facebook.com/sharer.php?u='. $context['canonical_url']. '" class="facebook" title="Share in Facebook" target="_blank" rel="noopener noreferrer nofollow" ><i class="fab fa-facebook fa-2x"></i></a>
939: <a href="https://twitter.com/share?text='. $context['page_title_html_safe']. '&amp;url='. $context['canonical_url']. ' via @translatum" class="twitter" title="Share in Twitter" target="_blank" rel="noopener noreferrer nofollow" ><i class="fab fa-twitter fa-2x"></i></a>
940: <a href="mailto:?subject='. $context['page_title_html_safe']. '&amp;body='. $context['canonical_url'].'" class="mailto" target="_blank" title="E-mail this page"><i class="fas fa-envelope fa-2x"></i></a>
Title: Re: [Evil Production] Responsive Social Sharers
Post by: Antes on February 02, 2021, 05:59:16 PM
That is probably page is not setting the said variable in that page, is there any example for it ?
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on February 03, 2021, 03:07:57 AM
Of course my friend. Well, it is not page-specific since it applies to the whole forum. Here is one:

https://www.translatum.gr/forum/index.php?topic=983795
8: Undefined index: canonical_url
index.template.php
Line: 940
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on February 03, 2021, 12:10:01 PM
It appeared in a missing topic page "The topic or board you are looking for appears to be either missing or off limits to you."
Apparently, that page does not have a canonical. So I guess the script should have an exception for error pages.
Title: Re: [Evil Production] Responsive Social Sharers
Post by: Antes on February 04, 2021, 03:22:00 AM
yea... Update the code like this...

if (empty($_REQUEST['action']) & isset($context['canonical_url'])) {
Title: Re: [Evil Production] Responsive Social Sharers
Post by: spiros on February 05, 2021, 09:13:55 AM
Yep, that did the trick :)