[Template] Social Network Share Buttons At Top Of Thread

[Tim Camara]

A note for anyone else who runs across this, do not use the above code. Unless your forum already looks like Tunescool's forum, it will break your thread view. Instead, do the following:

1. Find your Thread template
2. Starting on about line 10, you should see this div:

<div class="controls">
$[action_menu]
</div>
3. Make that div look like this (basically add the social media buttons code in right before the action_menu variable):

<div class="controls">
           <div style="float: left;">
               <div class="g-plusone" data-size="medium"></div>
               <script type="text/javascript">
                   (function() {
                       var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                       po.src = 'https://apis.google.com/js/plusone.js';
                       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                   })();
               </script>
               
               <a href="https://twitter.com/share" class="twitter-share-button" data-text="M3L" data-related="m3leagues">Tweet</a>
               
               <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
               <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
               <script>
                   (function(d, s, id) {
                       var js, fjs = d.getElementsByTagName(s)[0];
                       if (d.getElementById(id)) return;
                       js = d.createElement(s); js.id = id;
                       js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                       fjs.parentNode.insertBefore(js, fjs);
                   }(document, 'script', 'facebook-jssdk'));
               </script>
               <fb:like send="false" layout="button_count" width="10" show_faces="false"></fb:like>
           </div>
$[action_menu]
</div>(The spacing is kinda messed up here, but you can just copy/paste it into your template and it should look alright)

4. Profit!

[SailorEffinMoon]

What about adding "Pinterest"? I've been reading through the template on how I could do it myself but I really don't want to mess up the code and have to start from scratch.

[solarbronco]

I have installed this code as instructed but the Facebook button is messed up. My site is at LINK

The button is offset from the other buttons and when you click the FB button, the pop up screen is too far to the right and is cut off. Any suggestions?

[solarbronco]

Anyone have any ideas?

[SailorEffinMoon]

You can try using AddThis instead.

[dontdentmycar]

Tim Camara, thank you, it works reasonably well.

To help others, just replace item 2 (noted in Tim's outline) with item 3 and not in addition to...

The Facebook doesn't show and just says 'log in' (see attached image).  Is there a way to fix this?

While all this shows up in the Actions drop down, there's nothing better than having a clickable button that even shows how many times it was shared to encourage sharing and thus get more people to discover the forum, and show them how great proboards really is .

Edit: added second attachment of what happens in really long threads.  Is there a way to fix this (besides making the browser window wider)?

Attachments:

[underachieved4now]

bump

[underachieved4now]

I am using the following for twitter and stocktwits on the post list.

   <div class="controls">
           <div style="float: left;"><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
               
               
<a href="http://stocktwits.com/widgets/share" id="stocktwits-share-button" data-text=" "><img src="https://stocktwits.com/assets/widget/stocktwits_share.png" alt="Share on StockTwits"/></a>
<script src="http://stocktwits.com/addon/button/share.min.js"></script>

When used for thread  the code will capture the subject line and include the url of the thread along with short desc and hastag.

Now that I want to use this for the post list I am not sure which part of the code needs changed so that twitter will pick up the same information but from the post on the post list.

Any ideas?

Thanks in advance.