Simple Machines Community Forum

Customizing SMF => Tips and Tricks => Topic started by: shadav on June 18, 2020, 12:18:39 PM

Title: Add The AddToAny Share Buttons
Post by: shadav on June 18, 2020, 12:18:39 PM
I don't see where this has been discussed so I'll share here how I did it on my site

I find it a bit less intrusive looking then other share sites codes

you can find the codes and all kinds of customization options on the addtoany.com site

but here I have done the work for you ;)

this will add a centered floating share buttons to the bottom of the page

there will be 3 main buttons shown

facebook, twitter, and whatsapp
and then a + button to show ALL the other options in a pop-up, I have even alphabetized all the other options (yes my ocd got the better of me)
after sharing (or canceling) it will display Thanks for sharing

this will share whatever page you are on (if that page is allowed for guests/bots otherwise it'll give either a 403 error or db error on the share link)

in your theme in use
index.template.php
at the very very end
find
?>
before add
echo '<style type="text/css">
.a2a_floating_style.a2a_default_style {background: transparent;}
</style>
<script type="text/javascript">

var a2a_config = a2a_config || {};
a2a_config.thanks = {
    postShare: true,
    ad: true
};

a2a_config.onclick = 2;
a2a_config.show_title = 1;
a2a_config.num_services = 10;
a2a_config.orientation = "up";

a2a_config.color_main = "F66B1F";
a2a_config.color_border = "F66B1F";
a2a_config.color_bg = "003200";
a2a_config.color_link_text = "F66B1F";
a2a_config.color_link_text_hover = "FFAC63";

a2a_config.prioritize = ["amazon_wish_list", "aol_mail", "balatarin", "bibsonomy", "bitty_browser", "blinklist", "blogger", "blogmarks", "bookmarks_fr", "box_net", "buffer", "care2_news", "citeulike", "copy_link", "design_float", "diary_ru", "diaspora", "digg", "diglog", "diigo", "douban", "draugiem", "dzone", "email", "evernote", "facebook", "facebook_messenger", "fark", "flipboard", "folkd", "google_gmail", "google_bookmarks", "google_classroom", "hacker_news", "hatena", "houzz", "instapaper", "kakao", "kik", "kindle_it", "known", "line", "linkedin", "livejournal", "mail_ru", "mastodon", "mendeley", "meneame", "mewe", "mix", "mixi", "myspace", "netvouz", "odnoklassniki", "outlook_com", "papaly", "pinboard", "pinterest", "plurk", "pocket", "print", "printfriendly", "protopage_bookmarks", "pusha", "qzone", "reddit", "rediff", "refind", "renren", "sina_weibo", "sitejot", "skype", "slashdot", "sms", "stocktwits", "svejo", "symbaloo_bookmarks", "telegram", "threema", "trello", "tuenti", "tumblr", "twiddla", "twitter", "typepad_post", "viadeo", "viber", "vk", "wanelo", "wechat", "whatsapp", "wordpress", "wykop", "xing", "yahoo_mail", "yoolink", "yummly"];

</script>
<div class="a2a_kit a2a_kit_size_20 a2a_floating_style a2a_default_style" style="bottom:0px; left:50%; transform:translateX(-50%);">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>
';


you can change the colors however you like in the above code by editing the
a2a_config.color_main = "F66B1F";
a2a_config.color_border = "F66B1F";
a2a_config.color_bg = "003200";
a2a_config.color_link_text = "F66B1F";
a2a_config.color_link_text_hover = "FFAC63";


as stated there are a lot of customization options on their site, so feel free to edit the above to suit your needs

if you'd like to see examples
http://shadav.com/forum/
http://askthemuslims.com/forum/
Title: Re: Add The AddToAny Share Buttons
Post by: Deaks on June 21, 2020, 06:40:45 AM
going to have to try this out
Title: Re: Add The AddToAny Share Buttons
Post by: Shambles on June 21, 2020, 07:22:59 AM
Quote from: shadav
if you'd like to see examples
http://shadav.com/forum/
http://askthemuslims.com/forum/

Your websites are down :P
Title: Re: Add The AddToAny Share Buttons
Post by: shadav on June 21, 2020, 09:27:30 AM
Quote from: Shambles on June 21, 2020, 07:22:59 AM
Quote from: shadav
if you'd like to see examples
http://shadav.com/forum/
http://askthemuslims.com/forum/

Your websites are down :P

yeah my host is well....um no!!!! Time to get a new one.....
they decided to upgrade the server and well somehow lost half of my databases and who knows about the files....I'm also currently locked out of my ftp and cpanel due to errors....and it's been 2 days and nada from them..... ugggg..... you do get what you pay for.....it's a shame because until the past month or so they were ok for a cheap host...
Title: Re: Add The AddToAny Share Buttons
Post by: Antechinus on June 21, 2020, 05:48:11 PM
Sounds like fun.
Title: Re: Add The AddToAny Share Buttons
Post by: shadav on June 21, 2020, 06:15:30 PM
Quote from: Antechinus on June 21, 2020, 05:48:11 PM
Sounds like fun.

oh it gets even more fun....
the backups that I do have are all corrupt....
ug  >:(
so well, yep, I've lost pretty much everything....trying to dig through older backups, so pretty much everything for the past year is gone....

and my host instead of acknowledging anything, suspended/deleted my account
Title: Re: Add The AddToAny Share Buttons
Post by: Antechinus on June 21, 2020, 06:29:45 PM
Best of luck finding a good backup, then.
Title: Re: Add The AddToAny Share Buttons
Post by: Mick. on June 21, 2020, 06:31:57 PM
I think you should serve the classes from the theme css file instead of inline classes in the code. You know, that's bad practice.
Title: Re: Add The AddToAny Share Buttons
Post by: Antechinus on June 21, 2020, 06:43:34 PM
It works. It's just harder to maintain if you want to change anything. Not sure if this add-on requires inline styles or not (would have to test it to find out).
Title: Re: Add The AddToAny Share Buttons
Post by: shadav on June 21, 2020, 06:45:53 PM
Quote from: Mick. on June 21, 2020, 06:31:57 PM
I think you should serve the classes from the theme css file instead of inline classes in the code. You know, that's bad practice.

I was thinking about that....I just did it how they said to do it but then after I posted this I thought it would be better to move all of that to the themes stylesheet
(but then my host issues started so well that'll have to wait)

but thank you for bringing it up :)  once I get my sites back up and running, I'll update this to be more "compliant"
Title: Re: Add The AddToAny Share Buttons
Post by: Mick. on June 21, 2020, 06:52:46 PM
Quote from: shadav on June 21, 2020, 06:45:53 PM
Quote from: Mick. on June 21, 2020, 06:31:57 PM
I think you should serve the classes from the theme css file instead of inline classes in the code. You know, that's bad practice.

I was thinking about that....I just did it how they said to do it but then after I posted this I thought it would be better to move all of that to the themes stylesheet
(but then my host issues started so well that'll have to wait)

but thank you for bringing it up :)  once I get my sites back up and running, I'll update this to be more "compliant"
No worries....nothing wrong serving css direct from codes.... still works just fine; it just it would trigger errors when testing xhtml pages. That's all.