Customizing SMF > Tips and Tricks

[Evil Production] Responsive Social Sharers

(1/1)

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)

--- Code: ---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>';
}
}
--- End code ---

Ofc the CSS part, add this to the end of your index.css file

--- Code: ---/* 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;
}
--- End code ---

And ofc the Responsive part...

--- Code: ---@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;
}
}
--- End code ---

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

Navigation

[0] Message Index

Go to full version