Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] Facebook Google+ Twitter share Button on Each Post w/o plugin (FontAwesome)
#1
add font awesome in header include templete 

Code:
<link rel="stylesheet" href="https://use.fontawesome.com/b57b7189ce.css">


add this code in Posbit template and postbit classic templete after {$post['subject_extra']}

For Facebook
PHP Code:
    <a href="https://www.facebook.com/sharer/sharer.php?u={$mybb->settings['bburl']}/{$post['postlink']}class="fb-share-button" onclick="javascript:window.open(this.href,  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><class="fa fa-facebook-square" style="font-size:18px;color:#3B5998"></i></a
for google + add after above code 

into postbit classic and posbit 

PHP Code:
<a href="https://plus.google.com/share?url={$mybb->settings['bburl']}/{$post['postlink']}onclick="javascript:window.open(this.href,
  '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
><span class="g-share-button"><class="fa fa-google-plus-square" style="font-size:18px;color:#d34836"></i></span></a

for twitter 

PHP Code:
<a href="https://twitter.com/intent/tweet?text={$thread['subject']} &url={$mybb->settings['bburl']}/{$post['postlink']}"onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class= "t-share-btn"><class="fa fa-twitter-square" style="font-size:18px;color:#0084b4"></i></span></a>  

add this code to global.css

PHP Code:
.fb-share-button {
    
float:right;
    
margin-right:10px;


Google+ sharing button css
PHP Code:
.g-share-button {
    
float:right;
    
margin-right:5px;


for twitter 

PHP Code:
.t-share-btn {
float:right;
    
margin-right:5px;} 

preview

[Image: QVvZ9cg.png]

BR
Mujeeb
Reply
#2
(01-08-2017, 12:29 PM)mujeebdgk Wrote: add this code in header include template


PHP Code:
<div id="fb-root"></div>
<
script>(function(dsid) {
 
 var jsfjs d.getElementsByTagName(s)[0];
 
 if (d.getElementById(id)) return;
 
 js d.createElement(s); js.id id;
 
 js.src "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
 
 fjs.parentNode.insertBefore(jsfjs);
}(
document'script''facebook-jssdk'));</script

................

I guess you have to paste this code part into showthread template after the <body> tag
Greetings Sven (ps: Sorry for my bad english!!)

My plugins - [email protected]
Reply
#3
(01-08-2017, 03:05 PM)SvePu Wrote:
(01-08-2017, 12:29 PM)mujeebdgk Wrote: add this code in header include template


PHP Code:
<div id="fb-root"></div>
<
script>(function(dsid) {
 
 var jsfjs d.getElementsByTagName(s)[0];
 
 if (d.getElementById(id)) return;
 
 js d.createElement(s); js.id id;
 
 js.src "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
 
 fjs.parentNode.insertBefore(jsfjs);
}(
document'script''facebook-jssdk'));</script

................

I guess you have to paste this code part into showthread template after the <body> tag

after stylesheet codes
Reply
#4
Instruction from Facebook developer page:
Quote:Step 2: Include the JavaScript SDK on your page once, ideally right after the opening <body> tag
.....
Greetings Sven (ps: Sorry for my bad english!!)

My plugins - [email protected]
Reply
#5
soon i ll try and will update post

thanks for suggestion , i update tutorial
Reply
#6
Works like a charm, thanks!
Reply
#7
Good job! What about Twitter? Is possible to make a sahre popup window for Facebook (same as Google+ has)?
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#8
(01-15-2017, 01:55 PM)Eldenroot Wrote: Good job! What about Twitter? Is possible to make a sahre popup window for Facebook (same as Google+ has)?

Facebook also have popup , but it loads slowly you have to wait until Facebook scripts load completely will try to improve this and soon i ll add twitter :Smile may be tonight
Reply
#9
No, facebook is opened in new tab (there is target="_blank")
[MyBB 1.8 Czech translation] [MyBB 1.8 plugins]: Prune old PMs + optimize DB plugin --- Thank you/like system
Reply
#10
Very nice tutorial please add google icon square as facebook .
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)