MyBB Community Forums › Resources › Tutorials v
[For 1.8] Updated How to add social sharing buttons to threads

Threaded Mode
[For 1.8] Updated How to add social sharing buttons to threads
User 6029 Offline
Posts: 1,000
Threads: 55
Joined: Nov 2006
#11
2018-10-13, 09:27 PM (This post was last modified: 2018-10-14, 09:02 AM by User 6029.)
Modified for Font Awesome 5 and correction made for the stumbleupon.com transition to mix.com

In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after

{$stylesheets}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">


 Go to your ACP --> Theme You want to edits templates -->Show Thread Templates -->showthread_ratethread

and add the following to the bottom:

<style>
.sharethread a:link {
	color: #0072BC;
	text-decoration: none;
}
.sharethread a:visited {
	color: #0072BC;
	text-decoration: none;
}
.sharethread a:hover,
.sharethread a:active {
	color: #333;
	text-decoration: none;
}
.sharethread {
     float:left;
     display: inline-block;
     vertical-align: middle;
     margin-left: 6px;
     margin-top: 6px;
}
.sharethreadspan {
     color: #333;
     padding-right: 10px;
     font-weight: bold;
}
</style>
<div class="sharethread">

<span class="sharethreadspan">Share Thread:</span>
    
<a title="Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-facebook" alt="Facebook"></i></a>

<a title="Twitter" href="http://twitter.com/home?status={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-twitter" alt="Twitter"></i></a>
    
<a href="https://plus.google.com/share?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"  target="_blank">
    <i class="fab fa-google-plus-g" alt="Google+"></i>
</a>    

<a title="Digg" href="http://digg.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-digg" alt="Digg"></i></a>

<a title="Delicious" href="http://del.icio.us/post?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fab fa-delicious" alt="Delicious"></i></a>

<a title="Reddit" href="http://reddit.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fab fa-reddit" alt="Reddit"></i></a>

<a title="Mix" href="http://www.mix.com/mixit?su=submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-mix" alt="Mix"></i></a>
    
<a title="Pinterest" href="http://pinterest.com/pin/create/button/?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank">
    <i class="fab fa-pinterest" alt="Pinterest"></i>
</a>   

<a href="mailto:?subject={$thread['subject']}&amp;body=Check out this post {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" title="Share by Email">
  <i class="fas fa-envelope" alt="Email This!"></i>
</a>

<a href="javascript:window.print()">
    <i class="fas fa-print" alt="Print Me!"></i>
    </a>

</div>


Attached Files Thumbnail(s)
   
Find
Reply
jklogic Offline
Posts: 78
Threads: 21
Joined: Jan 2019
Reputation: 0
#12
2022-05-20, 02:40 PM
This user has been denied support. This user has been denied support.
(2016-04-23, 05:58 AM)Technologx Wrote: Go to your ACP --> Theme You want to edits templates -->Show Thread Templates -->showthread_ratethread

and add the following to the bottom:

<div style="margin-top: 6px; padding-right: 10px;" class="float_left">

<strong style="float: left; padding-right: 10px;">Share Post:</strong>
	
<a title="Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="images/TechnologxShop/facebook.png" alt="Facebook" /></a>

<a title="Twitter" href="http://twitter.com/home?status={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="images/TechnologxShop/twitter.png" alt="Twitter" /></a>
	
<a href="https://plus.google.com/share?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" alt="Google+" count-layout="horizontal">
    <img border="0" src="images/TechnologxShop/google+.png" alt="Pinterest" />
</a>	

<a title="Digg" href="http://digg.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="images/TechnologxShop/digg.png" alt="Digg" /></a>

<a title="Delicious" href="http://del.icio.us/post?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><img src="images/TechnologxShop/delicious.png" alt="Delicious" /></a>

<a title="Reddit" href="http://reddit.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><img src="images/TechnologxShop/reddit.png" alt="Reddit" /></a>

<a title="StumbleUpon" href="http://www.stumbleupon.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="images/TechnologxShop/stumbleupon.png" alt="StumbleUpon" /></a>
	
<a href="http://pinterest.com/pin/create/button/?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" class="pin-it-button" count-layout="horizontal">
    <img border="0" src="images/TechnologxShop/pinterest.png" alt="Pinterest" />
</a>
	
<a href="mailto:?subject={$thread['subject']}&amp;body=Check out this post {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"
   title="Share by Email">
  <img src="images/TechnologxShop/email.png">
</a>
	
<a href="javascript:window.print()">
	<img src="images/TechnologxShop/print.png" alt="Print Me!"  />
	</a>

</div>

Download Icon Pack

Demo there you can see them in live action.

If you know anymore social networks that can be added let me know in a reply not a PM the PM's I'll just delete.

If you find this helpful please hit the thumbs up button!

Enjoy!

Dosen't work for me.
Find
Reply
ic_myXMB Away
Posts: 21
Threads: 1
Joined: May 2022
#13
2022-05-21, 01:57 AM
(2022-05-20, 02:40 PM)jklogic Wrote: Dosen't work for me.


Correct, there are a few items that no longer work in the original tutorial, but did you try the updated tutorial version for font awesome 5 instructions found directly posted before your post, said instructions being posted back in 2018 or what not? They work fine.

ie:
(2018-10-13, 09:27 PM)User 6029 Wrote: Modified for Font Awesome 5 and correction made for the stumbleupon.com transition to mix.com

In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after

{$stylesheets}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">


Go to your ACP --> Theme You want to edits templates -->Show Thread Templates -->showthread_ratethread

and add the following to the bottom:

<style>
.sharethread a:link {
 color: #0072BC;
 text-decoration: none;
}
.sharethread a:visited {
 color: #0072BC;
 text-decoration: none;
}
.sharethread a:hover,
.sharethread a:active {
 color: #333;
 text-decoration: none;
}
.sharethread {
     float:left;
     display: inline-block;
     vertical-align: middle;
     margin-left: 6px;
     margin-top: 6px;
}
.sharethreadspan {
     color: #333;
     padding-right: 10px;
     font-weight: bold;
}
</style>
<div class="sharethread">

<span class="sharethreadspan">Share Thread:</span>
    
<a title="Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-facebook" alt="Facebook"></i></a>

<a title="Twitter" href="http://twitter.com/home?status={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-twitter" alt="Twitter"></i></a>

<!--    
<a title="Google+" href="https://plus.google.com/share?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"  target="_blank"><i class="fab fa-google-plus-g" alt="Google+"></i></a>    
-->

<a title="Digg" href="http://digg.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-digg" alt="Digg"></i></a>

<!--
<a title="Delicious" href="http://del.icio.us/post?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fab fa-delicious" alt="Delicious"></i></a>
-->

<a title="Reddit" href="http://reddit.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fab fa-reddit" alt="Reddit"></i></a>

<!--
<a title="StumbleUpon" href="http://www.stumbleupon.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-stumbleupon" alt="StumbleUpon"></i></a>
-->

<a title="Mix" href="http://www.mix.com/mixit?su=submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-mix" alt="Mix"></i></a>
    
<a title="Pinterest" href="http://pinterest.com/pin/create/button/?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fab fa-pinterest" alt="Pinterest"></i></a>   

<a title="Share by Email" href="mailto:?subject={$thread['subject']}&amp;body=Check out this post {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"><i class="fas fa-envelope" alt="Email This!"></i></a>

<a title="Print" href="javascript:window.print()"><i class="fas fa-print" alt="Print Me!"></i></a>

</div>

* note only thing you might desire to correct in that older set of instructions is bring the font awesome 5 version to the latest font awesome 5 version

ie:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

Note on any items commented out like so:
<!--
-->
These are discontinued/closed services...



and here is simply that very same set of instructions, but, simply modified for font awesome 6 usage:

ie:

Modified for Font Awesome 6

In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after

{$stylesheets}


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">



Go to your ACP --> Theme You want to edits templates -->Show Thread Templates -->showthread_ratethread

and add the following to the bottom:

<style>
.sharethread a:link {
 color: #0072BC;
 text-decoration: none;
}
.sharethread a:visited {
 color: #0072BC;
 text-decoration: none;
}
.sharethread a:hover,
.sharethread a:active {
 color: #333;
 text-decoration: none;
}
.sharethread {
     float:left;
     display: inline-block;
     vertical-align: middle;
     margin-left: 6px;
     margin-top: 6px;
}
.sharethreadspan {
     color: #333;
     padding-right: 10px;
     font-weight: bold;
}
</style>
<div class="sharethread">

<span class="sharethreadspan">Share Thread:</span>
    
<a title="Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fa-brands fa-facebook" alt="Facebook"></i></a>

<a title="Twitter" href="http://twitter.com/home?status={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fa-brands fa-twitter" alt="Twitter"></i></a>

<!--    
<a title="Google+" href="https://plus.google.com/share?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"  target="_blank"><i class="fa-brands fa-google-plus-g" alt="Google+"></i></a>    
-->

<a title="Digg" href="http://digg.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fa-brands fa-digg" alt="Digg"></i></a>

<!--
<a title="Delicious" href="http://del.icio.us/post?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fa-brands fa-delicious" alt="Delicious"></i></a>
-->

<a title="Reddit" href="http://reddit.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fa-brands fa-reddit" alt="Reddit"></i></a>

<!--
<a title="StumbleUpon" href="http://www.stumbleupon.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fa-brands fa-stumbleupon" alt="StumbleUpon"></i></a>
-->

<a title="Mix" href="http://www.mix.com/mixit?su=submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fa-brands fa-mix" alt="Mix"></i></a>
    
<a title="Pinterest" href="http://pinterest.com/pin/create/button/?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fa-brands fa-pinterest" alt="Pinterest"></i></a>   

<a title="Share by Email" href="mailto:?subject={$thread['subject']}&amp;body=Check out this post {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"><i class="fas fa-envelope" alt="Email This!"></i></a>

<a title="Print" href="javascript:window.print()"><i class="fas fa-print" alt="Print Me!"></i></a>

</div>

Note on any items commented out like so:
<!--
-->
These are discontinued/closed services...


Both of those instructions should work and if font awesome usage decides to not be what you desire, I am sure you could modify either of the functioning instruction suggested to use png images easily instead just like the original instructions if so desired. Best of luck.



Now, if your desire is to only use the original tutorial "as is" and noticed that the supplied icon pack is gone and the image paths in the tutorial are incorrect also, then you could simply modify the image paths in the original tutorial and then use an iconfinder like:  http://iconfinder.com to download icons and go from there. For example:

Icon pack download:

[attachment=45156]

extract dir = /socialshare/ and such would be uploaded to your theme directory.

Visual example:
[attachment=45157]

Below is the existing original tutorial code "as is" but with image paths corrected to direct to "theme directory" & encompassed socialshare icon pack icons..

ie:
{$theme['imgdir']}/socialshare/

Go to your ACP --> Theme You want to edits templates -->Show Thread Templates -->showthread_ratethread

and add the following to the bottom:

<strong style="float: left; padding-right: 10px;">Share Post:</strong>
 
<a title="Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="{$theme['imgdir']}/socialshare/facebook.png" alt="Facebook" /></a>

<a title="Twitter" href="http://twitter.com/home?status={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="{$theme['imgdir']}/socialshare/twitter.png" alt="Twitter" /></a>

<!--
<a title="Google+" href="https://plus.google.com/share?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank" count-layout="horizontal"><img border="0" src="{$theme['imgdir']}/socialshare/google+.png" alt="Google+" /></a> 
-->

<a title="Digg" href="http://digg.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="{$theme['imgdir']}/socialshare/digg.png" alt="Digg" /></a>

<!--
<a title="Delicious" href="http://del.icio.us/post?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><img src="{$theme['imgdir']}/socialshare/delicious.png" alt="Delicious" /></a>
-->

<a title="Reddit" href="http://reddit.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><img src="{$theme['imgdir']}/socialshare/reddit.png" alt="Reddit" /></a>

<!--
<a title="StumbleUpon" href="http://www.stumbleupon.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="{$theme['imgdir']}/socialshare/stumbleupon.png" alt="StumbleUpon" /></a>
-->

<a title="Mix" href="http://www.mix.com/mixit?su=submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><img src="{$theme['imgdir']}/socialshare/mix.png" alt="Mix" /></a> 

<a title="Pinterest" href="http://pinterest.com/pin/create/button/?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank" class="pin-it-button" count-layout="horizontal"><img border="0" src="{$theme['imgdir']}/socialshare/pinterest.png" alt="Pinterest" /></a>
 
<a title="Share by Email" href="mailto:?subject={$thread['subject']}&amp;body=Check out this post {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"><img src="{$theme['imgdir']}/socialshare/email.png"></a>
 
<a title="Print" href="javascript:window.print()"><img src="{$theme['imgdir']}/socialshare/print.png" alt="Print Me!"  /></a>

</div>

Note on any items commented out like so:
<!--
-->
These are discontinued/closed services...

Again, best of luck.
Website Find
Reply
CombativeRebel82 Offline
Posts: 26
Threads: 4
Joined: May 2023
Reputation: 0
#14
2023-05-09, 06:41 PM
(2018-10-13, 09:27 PM)User 6029 Wrote: Modified for Font Awesome 5 and correction made for the stumbleupon.com transition to mix.com

In your Templates section of the MyBB ACP, find the Ungrouped Templates -> headerinclude template. Add the following after

{$stylesheets}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">


 Go to your ACP --> Theme You want to edits templates -->Show Thread Templates -->showthread_ratethread

and add the following to the bottom:

<style>
.sharethread a:link {
	color: #0072BC;
	text-decoration: none;
}
.sharethread a:visited {
	color: #0072BC;
	text-decoration: none;
}
.sharethread a:hover,
.sharethread a:active {
	color: #333;
	text-decoration: none;
}
.sharethread {
     float:left;
     display: inline-block;
     vertical-align: middle;
     margin-left: 6px;
     margin-top: 6px;
}
.sharethreadspan {
     color: #333;
     padding-right: 10px;
     font-weight: bold;
}
</style>
<div class="sharethread">

<span class="sharethreadspan">Share Thread:</span>
    
<a title="Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-facebook" alt="Facebook"></i></a>

<a title="Twitter" href="http://twitter.com/home?status={$thread['subject']} - {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-twitter" alt="Twitter"></i></a>
    
<a href="https://plus.google.com/share?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}"  target="_blank">
    <i class="fab fa-google-plus-g" alt="Google+"></i>
</a>    

<a title="Digg" href="http://digg.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-digg" alt="Digg"></i></a>

<a title="Delicious" href="http://del.icio.us/post?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fab fa-delicious" alt="Delicious"></i></a>

<a title="Reddit" href="http://reddit.com/submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank"><i class="fab fa-reddit" alt="Reddit"></i></a>

<a title="Mix" href="http://www.mix.com/mixit?su=submit?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank"><i class="fab fa-mix" alt="Mix"></i></a>
    
<a title="Pinterest" href="http://pinterest.com/pin/create/button/?url={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" target="_blank">
    <i class="fab fa-pinterest" alt="Pinterest"></i>
</a>   

<a href="mailto:?subject={$thread['subject']}&amp;body=Check out this post {$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}&title={$thread['subject']}" title="Share by Email">
  <i class="fas fa-envelope" alt="Email This!"></i>
</a>

<a href="javascript:window.print()">
    <i class="fas fa-print" alt="Print Me!"></i>
    </a>

</div>

Thank you for this. Works perfectly.
Find
Reply
judel Offline
Posts: 2,569
Threads: 97
Joined: Apr 2006
Reputation: 7
#15
2023-05-10, 05:00 AM
A few of the links don't tend to work, they just take you to that site. Twitter is a big one that doesn't seem to work, so I looked at another site with sharing:

in the code where it has:
<a title="Twitter" href="http://twitter.com/home?status=
use the following instead:
<a title="Twitter" href="http://twitter.com/intent/tweet?text=
I tested it, and it works.

Jude




Find
Reply
CombativeRebel82 Offline
Posts: 26
Threads: 4
Joined: May 2023
Reputation: 0
#16
2023-05-10, 02:19 PM
(2023-05-10, 05:00 AM)judel Wrote: A few of the links don't tend to work, they just take you to that site.  Twitter is a big one that doesn't seem to work, so I looked at another site with sharing:

in the code where it has:
<a title="Twitter" href="http://twitter.com/home?status=
use the following instead:
<a title="Twitter" href="http://twitter.com/intent/tweet?text=
I tested it, and it works.

Thank you for this!
Find
Reply
Joey_Pham423 Offline
Posts: 224
Threads: 33
Joined: May 2009
Reputation: 11
#17
2023-11-10, 09:32 AM (This post was last modified: 2023-11-10, 09:32 AM by Joey_Pham423.)
(2023-05-10, 05:00 AM)judel Wrote: A few of the links don't tend to work, they just take you to that site. Twitter is a big one that doesn't seem to work, so I looked at another site with sharing:

in the code where it has:
<a title="Twitter" href="http://twitter.com/home?status=
use the following instead:
<a title="Twitter" href="http://twitter.com/intent/tweet?text=
I tested it, and it works.

If you're sharing a link from your forum, you can also use this, too:
<a title="Twitter" href="https://twitter.com/share?url=
add target="_blank at the end to open a new tab
Vietnamese MyBB Community
Website Find
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)