Announcement

Collapse
No announcement yet.

How to get Facebook Like and other share buttons in the header like on Sedona Forums

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to get Facebook Like and other share buttons in the header like on Sedona Forums

    This option was first conceived as a way to allow vBCloud users the ability to get Facebook, Twitter, Google+ and other social media sharing buttons on their sites. vBCloud does not allow access to templates or 3rd party modifications for security reasons so using the existing mods were out of the question.

    Despite being created with vBCloud users in mind there is no reason this could not be used by any vBulletin 5 customer, cloud or not.

    The final product will look like this- you will need to choose a custom color for your site, I'm using a sky blue:



    The trick to this is to use the Header's Ad Location template to hold the HTML and JavaScript code needed for the various buttons, and then do some basic styling with inline CSS.

    To start make sure Site Editor is enabled and click on the Header button at the top of VB5.

    Make sure one header ad is selected and click the Edit button as shown below:



    Then click the button to Add New Ad.

    You will now be on the screen below:



    Enter a title like: Share Buttons

    In the larger white box below the title goes the main code. Copy and paste in the following code-

    Code:
    <div align="left" style="background-color: rgb(102, 140, 202); width:100%; text-align:left; height: 25px;">
    <div style="float:left; position:relative; top:2px; left:2px;">
    <div id="fb-root"></div>
    <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&appId=";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
    </div>
    
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div style="float:left; position:relative; top:2px; padding-left:30px;">
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="" date-via="vBulletin" data-lang="en">Tweet</a>
    </div>
    <div style="float:left; position:relative; top:2px; padding-right: 30px;">
    <a href="https://twitter.com/BirdOPrey5" class="twitter-follow-button" data-show-count="false">Follow @BirdOPrey5</a>
    <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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    
    <div style="float:left; position:relative; top:2px;">
    <!-- Place this tag where you want the +1 button to render. -->
    <div class="g-plusone" data-size="medium"></div>
    </div>
    
    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
    </div>
    Please note that the code in red should be customized before you save the ad.

    I will explain what each code is for below-
    • rgb(102, 140, 202) - This is the background color of the entire div- it spans the full width of the document and should be a color that either blends into your header graphic (like mine does) or a perhaps another color used on your page. It is of course up to you.
    • date-via="vBulletin" - This should be Your Twitter Account username. If you don't have a twitter username you can leave vBulletin or just leave it blank. Tweets created using the Tweet button will automatically have the "via" username attached- however the user has the option of deleting this before making the tweet.
    • BirdOPrey5 (2 instances) - These also should be changed to your Twitter Username. A "Follow" button will appear allowing users to easily follow you by clicking on the button. If you prefer to have no follow button you can find the following code:
    Code:
    <div style="float:left; position:relative; top:2px; padding-right: 30px;">
    <a href="https://twitter.com/BirdOPrey5" class="twitter-follow-button" data-show-count="false">Follow @BirdOPrey5</a>
    Then edit just the first line of the above code so it says:
    Code:
    <div style="float:left; position:relative; top:2px; padding-right: 30px; display:none;">
    That will hide the follow button but still allow the Tweet button to work.

    Then that is pretty much it. Save the ad, make sure it is active, and save all changes.

    You will have your own share buttons without the need for any 3rd party mods.

    A Post by Red Rock Admin

  • #2
    Some addition code you can put in the ad location above is -

    Code:
    <div style="display:none;"><img src="http://juotpics.com/pics/images/756ss_sedona_bellrock_flo.jpg" /></div>
    This is a hidden image, no one will see it load but Facebook will know it is there and use it as the image when someone shares your page.

    Change the image URL in Red to the URL of the image you want Facebook to show.

    Important - This image cannot be an attachment on your cloud or any other vBulletin site- this must be a real JPG, PNG, or GIF image and the URL must end in one of those extensions. If you do not have anywhere to host the image you can use a free image host like http://tinypic.com.

    Facebook needs an image at least 200px x 200px in size. The image should be close to or perfectly square. An 800px x 800px or larger image would be ideal.

    You can add multiple lines to give Facebook multiple choices for the image.

    Any other images included on pages (such as in posts) may also get picked up by Facebook. Images in posts must be real images using the [img] bbcode, not attachments.

    A Post by Red Rock Admin

    Comment


    • #3
      thats very nice sharing . I am looking this very long time. I will appyl this to my page. thanks.

      Comment


      • #4
        I don't suppose you know how to add Linkedin to the share header? I got this code from linkedin, but I am not sure where to put it within your code.

        <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
        <script type="IN/Share" data-url="www.yoursite.com" data-counter="right"></script>

        Comment


        • #5
          Try adding the code directly before or after this block of existing code:

          Code:
          <div style="float:left; position:relative; top:2px; padding-right: 30px;">
          <a href="https://twitter.com/BirdOPrey5" class="twitter-follow-button" data-show-count="false">Follow @BirdOPrey5</a>
          <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="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
          </div>
          try this:

          Code:
          <div style="float:left; position:relative; top:2px; padding-right: 30px;">
          <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
          <script type="IN/Share" data-url="www.yoursite.com" data-counter="right"></script>
          </div>
          You may need to play with the 30px and 2x in the first line to make adjustments for lining it up with the rest of the buttons.



          A Post by Red Rock Admin

          Comment

          Related Topics

          Collapse

          • FatGuyInALittleCoat
            Reputation Stars
            by FatGuyInALittleCoat
            Hi Joe,

            You posted a trick on the vB Forum from 2015 about adding stars below the username, similar to your site here. We would love to add...
            10-08-2017, 01:49 PM
          • Craig Scholl
            Wrapper background
            by Craig Scholl
            What is the setting at? it isn't fully transparent, but yet can see the background image coming through.
            11-30-2015, 10:09 PM
          • Red Rock Admin
            The Schnebly Hill Road
            by Red Rock Admin
            Schnebly Hill Road is one of the great scenic drives around Sedona, Arizona. Caution- Schnebly Hill Road is not paved and the surface varies from very muddy to dry dirty/sand to very bumpy hard rocks. A high clearance vesicle is essential and a 4x4 is strongly recommended. Also if you intend to drive the entire road as I suggest from I-17 into Sedona be sure the road is open! There are times of the year and weather/fire conditions that cause the road to be frequently closed.

            You can...
            03-31-2014, 06:41 PM
          • Red Rock Admin
            How to manage a CNAME record at name.com
            by Red Rock Admin
            Log into Name.com

            Go to Your Account -> Domains

            On the list of all your domains choose the one you want to modify.
            ...
            05-07-2015, 04:20 PM
          • Red Rock Admin
            How to manage CNAME record using CPanel
            by Red Rock Admin
            If you already have an existing web host and you want to add a vBCloud forum to an existing site you may well already be using cPanel provided by your...
            02-28-2017, 10:59 AM
          Working...
          X