Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Enhanced Social Share buttons Tutorial without plugins

envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,207.30Points
Post: #1
Heart Enhanced Social Share buttons Tutorial without plugins

Hello guys,
Its been a long time since i have posted any tut,
Here is one for you.

As said in the title, i present you enhanced social share buttons in Show Thread/post/topic without a plugin.

So lets start with :

1. Editing the Global.css :
Go to your theme > global.css > advanced mode
Add the following code at bottom of your global.css

Code:
.socialshare {
padding: 5px;
border-radius: 2px;
margin-top: -11px;
}

.sst {
background: #51CDF6;
border: 1px solid #4DB9D5;
padding: 5px;
text-align: center;
vertical-align: top;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
float: left;
margin-right: 5px;
}

.ssg {
background: #D4503F;
border: 1px solid #CE0E0E;
padding: 5px;
text-align: center;
vertical-align: top;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
float: left;
margin-right: 5px;
}

.ssf {
background: #4A65A1;
border: 1px solid #1D59A5;
padding: 5px;
text-align: center;
vertical-align: top;
-webkit-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
float: left;
margin-right: 5px;
}

2. Editing the Templates :
Go to your theme templates > Showthread templates > showthread template.

Find :
Code:
<body>
{$header}
{$pollbox}


Add this code just after that

Code:
<div style="float: left" class="socialshare">
<span class="sst"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="en" >Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
<span class="ssg"><script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'en'}
</script>
<g:plusone size="medium" href="{$mybb->settings['bburl']}/showthread.php?tid={$tid}"></g:plusone></span>
<span class="ssf"><iframe src="//www.facebook.com/plugins/like.php?href={$mybb->settings['bburl']}/showthread.php?tid={$tid}&amp;send=false&amp;layout=button_count&amp;width=130&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=20" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:20px;" allowTransparency="true"></iframe></span>
<span class="ssf"><a title="Share On Facebook" href="http://www.facebook.com/share.php?u={$mybb->settings['bburl']}/showthread.php?tid={$thread['tid']}" target="_blank" style="color: #FFF;"><img src="images/fb.png" alt="Facebook" style="padding-right: 5px;padding-bottom: 2px;vertical-align: middle;"/> <b>Share</b></a></span>
</div>
<br />

here is a preview of what you do : link

You can see a live demo just above this post Smile

Hope you guys like it Smile
P.S: Please give credits to me, if you post it on any other site.
Regards,

[Image: lt79ucY.png]
(This post was last modified: 01-18-2013 08:20 AM by envira.)
01-18-2013 08:09 AM
Find
2
Quote




sandeep Offline
Junior Member
**

Posts: 1
Joined: Mar 2013
Likes Received : 0

Nationality:

Mood: None

Points: 0.00Points
Post: #2
Question RE: Enhanced Social Share buttons Tutorial without plugins

there is a problem with share button kindly help me out with it
[Image: gaCqes6.png?1]
03-15-2013 03:24 AM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,207.30Points
Post: #3
RE: Enhanced Social Share buttons Tutorial without plugins

(03-15-2013 03:24 AM)sandeep Wrote:  there is a problem with share button kindly help me out with it
[Image: gaCqes6.png?1]

What is your URL ???

[Image: lt79ucY.png]
03-18-2013 08:43 AM
Find
0
Quote




fedidaido Offline
Junior Member
**

Posts: 2
Joined: Apr 2013
Likes Received : 0

Nationality:

Mood: None

Points: 0.00Points
Post: #4
RE: Enhanced Social Share buttons Tutorial without plugins

Thanks this worked great!
04-10-2013 12:26 PM
Find
0
Quote




Jason Offline
Customer
****

Posts: 62
Joined: Oct 2012
Likes Received : 9

Nationality: India

Mood: None

Points: 982.56Points
Post: #5
RE: Enhanced Social Share buttons Tutorial without plugins

I will surely add this to my blog without the credits Big Grin

Just kidding i will do it with the credits
04-15-2013 08:49 PM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,207.30Points
Post: #6
RE: Enhanced Social Share buttons Tutorial without plugins

(04-15-2013 08:49 PM)Jason Wrote:  I will surely add this to my blog without the credits Big Grin

Just kidding i will do it with the credits

Thanks Smile

[Image: lt79ucY.png]
04-20-2013 05:38 PM
Find
0
Quote




valor Offline
Junior Member
**

Posts: 12
Joined: Aug 2013
Likes Received : 0

Nationality:

Mood: None

Points: 95.96Points
Post: #7
RE: Enhanced Social Share buttons Tutorial without plugins

sweet I'm going to do this on my forums once I get a theme
12-08-2013 02:50 AM
Find
0
Quote




VetFalco Offline
Junior Member
**

Posts: 14
Joined: Jul 2014
Likes Received : 0

Nationality: Italy

Mood: None

Points: 6.64Points
Post: #8
RE: Enhanced Social Share buttons Tutorial without plugins

i will use this Big Grin
07-20-2014 06:48 PM
Find
0
Quote




Boule Offline
Junior Member
**

Posts: 2
Joined: Sep 2014
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: 2.68Points
Post: #9
RE: Enhanced Social Share buttons Tutorial without plugins

Thanks
I will try it in order to use less plugin.
09-07-2014 10:01 PM
Find
0
Quote




Mujeeb Offline
Junior Member
**

Posts: 3
Joined: Oct 2014
Likes Received : 0

Nationality: Pakistan

Mood: None

Points: 134.00Points
Post: #10
RE: Enhanced Social Share buttons Tutorial without plugins

First Of All , i am very thankful to you for such great tutorial , and it make my day today Smile

for testing i was testing it on my local wamp server , and i am getting this error
   

as per my guess you gave a path of an image , " img src="images/fb.png " that image is not available in the path that is why we are getting this error , can you please add that picture in tutorial so users can have such great tutorial without any problem Smile

after adding pic

.png  Share Link Image.png (Size: 5.46 KB / Downloads: 78)
bug free tutorial Wink
BR
Mujeeb
(This post was last modified: 10-07-2014 03:26 AM by Mujeeb.)
10-07-2014 03:17 AM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Information Add Social Links to Your MyBB Forum envira 3 3,759 09-25-2016 03:59 AM
Last Post: smash
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 12 6,377 09-05-2016 10:18 PM
Last Post: Petrmix
Smile Tutorial to make 4 column footer for MyBB envira 9 4,986 07-20-2014 06:43 PM
Last Post: VetFalco
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery envira 33 12,757 07-20-2014 06:18 PM
Last Post: VetFalco
Thumbs Up Style your forum buttons with css : with multiquote working envira 12 5,445 03-04-2014 10:02 PM
Last Post: Tarek Fouad
Heart css3 hover effects a tutorial myskins 10 3,925 02-14-2014 04:18 AM
Last Post: Elvenpath
  Adding Collapse Buttons to Any Table effone 1 1,336 03-30-2013 12:06 AM
Last Post: envira
Lightbulb css3 hover effects a tutorial : Part II : Hover an image myskins 0 1,577 08-31-2012 04:10 PM
Last Post: myskins

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.