Advertisement:

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

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 9,122
  • Gender: Male
  • Black cat rulz!
    • XinYenFon on GitHub
    • merta on LinkedIn
    • @XinYenFon on Twitter
    • wowsnips
[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 »
You can support me via Prime Gaming* or Patreon.

SMF Coding & Talks

* Prime Gaming is an extra perk of your amazon prime subscription -no extra payment required-.

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.