Show Thread Enhancements - Social Buttons with Short Share URL

Description:
This Modification will help you to add social buttons in thread conversation toolbar

• using your site short urls e.g. http://example.com/node/xxxx
• using original social buttons code
• only one template modification
• supporting vb5 responsive style
• supporting LTR and RTL style
• supporting style variables

Screenshots:







Instructions:

• Open your site [Admin CP]
• Go to [Styles & Templates] > [Search Templates]
• Select your style from [Search in Style]. Put the following code in [Search for Text] and press [Find] button
  

  <vb:if condition="!empty($showSubscriberFilter)">

• Select the template named [conversation_toolbar]
• Find the above line in the [conversation_toolbar] template code as shown bellow
  

  ... ... ...
  ... ... ...
        </vb:if>
      </ul>
    </div>
  
    <vb:if condition="!empty($showSubscriberFilter)">
      <vb:comment>
        This form will be hidden and will not be shown at all but this will be programmatically used for paginating and sorting the Subscriber header 'Last Activity' in Subscription widget.
      </vb:comment>
  ... ... ...
  ... ... ...

• Add the the following code above the red line
• Note 1: You must replace "EXAMPLE.COM" with your website naked domain. There are 3 links.
• Note 2: If your vBulletin files installed inside a folder, add the folder. e.g. example.com/vb
  

  <vb:comment>START of Social Buttons Code</vb:comment>
  <vb:if condition="$page['view'] == 'thread'">
  	<style>
  		.share-buttons { float:{vb:stylevar left}; position:relative; padding:8px 10px; height:20px; margin-top:-37px; }
  		.share-buttons.withRB { margin-{vb:stylevar left}:150px; }
  		.share-buttons iframe { float:{vb:stylevar left}; border:none; height:20px; }
  		.share-buttons .facebook { width:135px; }
  		.share-buttons .twitter { width:90px; }
  		.share-buttons #___plusone_0 { width:72px !important; float:{vb:stylevar left} !important; }
  		@media only screen and (max-width:767px) { .share-buttons.withRB { margin-{vb:stylevar left}: 100px; } }
  		@media only screen and (max-width:636px) { .share-buttons { float: none; border: {vb:stylevar toolbar_border}; background:{vb:stylevar toolbar_background}; margin: 0; } .share-buttons.withRB { margin: 0; } }
  	</style>
  	<div class="share-buttons<vb:if condition="(isset($showReplyBtn) AND $showReplyBtn) OR (isset($showAll) AND $showAll) OR $showVmBtn"> withRB</vb:if>">
  {vb:set starterRoute, {vb:raw conversation.starterroute}}
  {vb:set starterPost.nodeid, {vb:raw conversation.starter}}
  {vb:set threadurl, {vb:url {vb:raw starterRoute}, {vb:raw starterPost}}}
  		<iframe class="facebook" src="//www.facebook.com/plugins/like.php?href=http://EXAMPLE.COM/node/{vb:raw nodeid}&layout=button_count&action=like&show_faces=false&share=true&width=135&height=20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  		<iframe class="twitter" src="//platform.twitter.com/widgets/tweet_button.html?text={vb:raw conversation.title}%0A&url=http://EXAMPLE.COM/node/{vb:raw nodeid}&counturl={vb:raw threadurl}" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
  		<div class="g-plusone" data-size="medium" data-width="68" data-href="http://EXAMPLE.COM/node/{vb:raw nodeid}"></div>
  		<script type="text/javascript">(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = '//apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script>
  	</div>
  </vb:if>
  <vb:comment>END of Social Buttons Code</vb:comment>

Tags: Social, Share, button, buttons, Facebook, Twitter, Google+, Google Plus, Thread, Short, URL, Link

[shimei]

Originally Posted by DemOnstar

Then it would be good to show me the code that you changed in order to make it work don't you think?

Thanks.

I think it would be good for you to show others the code that was changed in order to make it work.

Thanks,
Secret Squirrel

[Hectorsky]

Originally Posted by shimei

I think it would be good for you to show others the code that was changed in order to make it work.

Thanks,
Secret Squirrel

there is not big deal, I just changed a the width a little bit and that's it

[DemOnstar]

Originally Posted by shimei

I think it would be good for you to show others the code that was changed in order to make it work.

Thanks,
Secret Squirrel

What would you say was contained within the attachment here. . .?

[DemOnstar]

I tried this and a couple of others. I am sure it isn't the mod that is at fault but no images are pulled from the database when a link is posted to any of the sites.

I think this is related:

http://www.vbulletin.com/forum/forum...facebook-image

And this:
https://vborg.vbsupport.ru/showthread.php?t=320779

Basically, when an attachment is quoted or when a link is posted, no images are seen.
vB5 issue I am sure. . . Correct me if I am wrong. . .

[bigbear83]

Working fine in 5.2.1

But just a quick question here -- how about if I wanted to have this show up in every post so that one could just use it to tweet a link to each individual post rather than tweet the first post of a thread? I tried tinkering around with this code but failed horribly LOL.

[nakul]

Thank you so much. The website is looks really good with this.

[KimK]

Works good with 5.2.3! I don't suppose anyone knows the code to add Linkedin share? This one I can probably figure out through linkedin but I thought I would ask.

It pulls my logo into the posts, but the logo is too big on facebook and google. Any remedies?

Also, I would love to add this into my articles and blogs as well. Thanks so much, this is great, I needed it.

[KimK]

Nevermind about adding to articles and blogs, @justunboxing posted the code above, and that worked too! Marked as installed.

I found the linkedin code from the developer site, <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/Share" data-url="http://www.agentlinkus.com"></script>

[MokeyII]

Where does it pull the image from on a share to facebook?

as you can see it just shows a plain white image. How would I change this?

[noypiscripter]

Originally Posted by MokeyII

Where does it pull the image from on a share to facebook?

as you can see it just shows a plain white image. How would I change this?

Your site has to implement Open Graph meta tags in order for social media sites to be able to extract the metadata that includes the image thumbnail to use. I have a mod that does this.