MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > Updated How to add social sharing buttons to threads
Full Version: Updated How to add social sharing buttons to threads
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2

User 6029

2018-10-13, 09:27 PM
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>

jklogic

2022-05-20, 02:40 PM
(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.

ic_myXMB

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.

CombativeRebel82

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.

judel

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.

CombativeRebel82

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!

Joey_Pham423

2023-11-10, 09:32 AM
(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
Pages: 1 2
MyBB Community Forums > Resources > Tutorials > Updated How to add social sharing buttons to threads