• Welcome to Simple Machines Community Forum. Please login or sign up.

[Evil Production] Responsive Social Sharers

Started by Antes, May 02, 2020, 12:37:30 PM

Previous topic - Next topic

Antes

May 02, 2020, 12:37:30 PM Last Edit: May 03, 2020, 04:33:09 AM by Antes
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

humbleworld

I tried this but it didn't work in my site. No social media buttons.

spiros

Probably you do not have Font Awesome loading in your template.

Mick.

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" />

spiros

Hmm, I tested it on my site (my theme has FA) but it still does not work https://www.translatum.gr/forum/index.php

Antes

did you echo the "template_evil_social_share()" in your index.template :)

spiros

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>';
}

Antes

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>';
}

spiros

Right, so I got it, I had to put the chunk of code at the end of the template.

spiros

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

spiros

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.

spiros

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>

Antes

Interesting findings... I will take a look at them at first off-day...

spiros

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>

Kindred

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.<br /><br />"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

spiros

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>

Antes

That is probably page is not setting the said variable in that page, is there any example for it ?

spiros

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

spiros

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.

Antes

yea... Update the code like this...

if (empty($_REQUEST['action']) & isset($context['canonical_url'])) {

Advertisement: