Advertisement:

Author Topic: [Evil Production] Responsive Social Sharers  (Read 2274 times)

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 9,138
  • Gender: Male
    • XinYenFon on GitHub
    • @XinYenFon on Twitter
[Evil Production] Responsive Social Sharers
« 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)
Code: [Select]
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
Code: [Select]
/* 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...
Code: [Select]
@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
« Last Edit: May 03, 2020, 04:33:09 AM by Antes »

Offline humbleworld

  • Sr. Member
  • ****
  • Posts: 922
    • @tubagboholcom on Twitter
    • bohol
Re: [Evil Production] Responsive Social Sharers
« Reply #1 on: June 18, 2020, 04:57:24 AM »
I tried this but it didn't work in my site. No social media buttons.

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #2 on: December 01, 2020, 11:55:56 AM »
Probably you do not have Font Awesome loading in your template.

Online Mick.

  • Customizer
  • SMF Hero
  • *
  • Posts: 5,371
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [Evil Production] Responsive Social Sharers
« Reply #3 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" />

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #4 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

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 9,138
  • Gender: Male
    • XinYenFon on GitHub
    • @XinYenFon on Twitter
Re: [Evil Production] Responsive Social Sharers
« Reply #5 on: December 03, 2020, 02:24:49 PM »
did you echo the "template_evil_social_share()" in your index.template :)

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #6 on: December 03, 2020, 03:55:55 PM »
That is where it is on the template....

Code: [Select]
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>';
}

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 9,138
  • Gender: Male
    • XinYenFon on GitHub
    • @XinYenFon on Twitter
Re: [Evil Production] Responsive Social Sharers
« Reply #7 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>';
}

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #8 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.

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #9 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.

Code: [Select]
Failed to load resource: the server responded with a status of 500 ()
index.php:1 GET https://www.translatum.gr/forum/index.php 500

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #10 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

Code: [Select]
<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
Code: [Select]
target="_blank" rel="noopener noreferrer nofollow" so that they open in new pages.

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #11 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=)

Code: [Select]
<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>

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 9,138
  • Gender: Male
    • XinYenFon on GitHub
    • @XinYenFon on Twitter
Re: [Evil Production] Responsive Social Sharers
« Reply #12 on: December 09, 2020, 03:49:01 PM »
Interesting findings... I will take a look at them at first off-day...

Offline spiros

  • Language Moderator
  • SMF Hero
  • *
  • Posts: 1,926
  • Gender: Male
  • A different point of view
    • spiros.doikas on Facebook
    • doikas on LinkedIn
    • @greektranslator on Twitter
    • Greek Translation
Re: [Evil Production] Responsive Social Sharers
« Reply #13 on: December 16, 2020, 09:46:01 AM »
Improved e-mail link by adding topic title as subject:

Code: [Select]
<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>

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 59,817
  • Gender: Male
    • Kindred-999 on GitHub
Re: [Evil Production] Responsive Social Sharers
« Reply #14 on: December 16, 2020, 10:46:17 AM »
working nicely with a few size adjustments
https://test2.turtleshellprod.com/index.php
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."