Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
Add Popular Share Buttons (Facebook/Twitter/Etc...) to VB5 without Mods or Templates
BirdOPrey5
Join Date: Jun 2008
Posts: 10,601

The details of my life are quite inconsequential.

New York
by BirdOPrey5 BirdOPrey5 is offline 03 Mar 2014
Rating: (2 votes - 5.00 average)

Note: You must be logged in as a licensed customer to vBulletin.org to see the code & full size screenshots below.

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:

You can see the live demo at http://sedona.vbulletin.net.



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-


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Then edit just the first line of the above code so it says:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.
Attached Images
File Type: jpg vb5-share-buttons-no-mods-article.jpg (54.2 KB, 558 views)
File Type: jpg vb5-share-buttons-howto1.jpg (55.9 KB, 554 views)
File Type: jpg vb5-share-buttons-howto2.jpg (65.8 KB, 546 views)

Last edited by BirdOPrey5; 04 Mar 2014 at 10:32..
Views: 4933
Reply With Quote
Comments
  #2  
Old 09 Sep 2014, 18:33
classicrv classicrv is offline
 
Join Date: Mar 2014
Real name: Josh
Working well on 5.1.4. This is a great add on!! Thank you!!

www.classicrv.net

Last edited by classicrv; 11 Feb 2015 at 16:23.
Reply With Quote
Reply

Similar Article
Article Author Type Replies Last Post
Miscellaneous Hacks More Share Options TNG by BOP5 (Facebook, Twitter, Google +1, AddThis) Share Buttons BirdOPrey5 vBulletin 4.x Add-ons 977 02 Nov 2018 03:00
Show Thread Enhancements Google+1 / Facebook / Linkedin / Twitter Share Buttons Winter Sonata vBulletin 4.x Template Modifications 70 30 Oct 2015 12:28
Miscellaneous Hacks Share Buttons Bar by BOP5 (Facebook Like, Twitter, Google+1, and more share options) BirdOPrey5 vBulletin 3.8 Add-ons 97 06 Nov 2013 07:31



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 18:57.

Layout Options | Width: Wide Color: