Twitter - Tweet Button in SHOWTHREAD
 

This mod is now outdated and as a result support for new installs will be limited, if any.

-July 7, 2011-

Please instead use my new mod which offers Twitter and many more share options for VB 4.x without template edits.

WARNING - It appears vBulletin has changed the location of the Facebook Like button in version 4.1.2. As a result it is likely the code changes below will be different in 4.1.2 and beyond, I will not be able to support installs beginning with version 4.1.2 since my license stops at 4.0.8.


Twitter released their new TWEET button.

Live Demo: http://www.juot.net/forums/showthread.php?t=41185
(Note my Live Board is VB 3.8, but I have tested this on 4.0.4 and 4.0.6)
(Update I have for the time being replaced the Tweet button with the Add This share button on my live forum. See the screen shots instead.)

I have tested this in latest versions of IE / Firefox / Chrome / Safari / Opera and it should work in all.

This will show you how to add this simple code to your SHOWTHREAD template above the page navigation bar, if visible.

If you DO NOT use the built-in Facebook Like button do the following:

Go to the Admin CP -> Styles & Templates -> Style Manager
Edit your SHOWTHREAD Template

Find: (The first instance of)
Above this add:
Change the X, Y, Z in the first line to the forumid's of any private forums you may have. If a guest can't view a forum there is no reason to link a tweet to it. You can add as many or as few forumid's here as you need, just separate each with a comma.
Valid Examples:
<vb:if condition="!in_array($GLOBALS[forumid], array(2, 5, 9))">
<vb:if condition="!in_array($GLOBALS[forumid], array(7))">
<vb:if condition="!in_array($GLOBALS[forumid], array(2, 3, 4, 5, 6, 7, 8))">
If none of your forums are private or you want to enable this in every forum you can remove the lines:
Replace "YOUR_TWITTER_USERNAME" with your twitter username, it will be referenced in the tweet- but the tweet will not be from YOU, it will be from whoever hits the tweet button.

If you DO USE the built-in Facebook Like button do the following:

Find:
Replace it with:
Replace "YOUR_TWITTER_USERNAME" with your twitter username, it will be referenced in the tweet- but the tweet will not be from YOU, it will be from whoever hits the tweet button.

The Tweet button will now show up next to the Facebook Like button in anytime the Facebook Like button is displayed in a thread.

----

When you hit the Tweet button you will be given a box to type a message if you're logged in. If you're not logged in you will be asked to login or join, all within the pop-up window.

This button code will count the number of tweets people have made using it. For other options including the button with no counter visit: http://twitter.com/goodies/tweetbutton

The screen shots show the Tweet button both with and without the page navigation bar, and with the Facebook Like button.

Please click Install if you use this. :)

Download the .txt file for a copy of the install instructions. :up:

----

Known Issues- a few people have reported a 'slash' is missing in the URL submitted to Twitter on some boards. Other people have said URL's with non-english characters cause a URL error. The solution for both of these issues is in post #143 in this thread.

Also Twitter appears to be having widespread issues with the counter not working. Some sites it works, some it don't, sometimes it stops working, sometimes it starts working for no reason. If you find your count isn't working try the solution in post #147. If that doesn't work than disable your counter completely if you want by changing the word "horizontal" to "none" in the twitter code.

Cheers for this.... i saw this on DP today.. looks like a handy little addon, i just want to use on the main page so i guess i just need to add the divs without the conditionals ?

Thanks

If you want to add it to only your main forum page you'd edit the FORUMHOME template instead. I'd recommend finding the code:

And Below this adding:
So you would not need the conditionals, correct.

Note- if you have the VB4 Suite and want to add it to your main page of the suite you'd have to edit some other template- I don't have the Suite so I can't help you with that.

Thanks bud for a quick reply... i worked it out.... See Here: http://battlefield3forums.com/content/

I added it to the start of the breadcrumb div and wrapped it in my own custom div to style it a little better... because the facebook like text color can not be changed it's kinda hard to see i will keep playing around with it.

Thanks for this, just hope people still click these buttons, now that every site seems to have them numbers have dropped alot, hopefully the tweet button gets people clicking it.

Cheers again for posting this

Looks Good.

installed

but there is problem

it send this

http://www.baghdad4ever.netshowthread.php/299978

instead of this url

http://www.baghdad4ever.net/vb/showthread.php/299978

how to fix that?

If you go to vbulletin options -> Site Name / URL / Contact Details
are your forum URL and Homepage URL correct?
It looks like your forum url should be: http://www.baghdad4ever.net/vb/

hi

yes my friend i used http://www.baghdad4ever.net/vb

but i dont know why this problem occur

is there any modification to the code in order to enforce the button to take the forum url?

i used this code


is that ok?

It's OK if it works! :)

Another option is I see you have a facebook tag in the header/header include...
<meta property="og:url" content="YOUR CODE HERE" />
You could add the following line under that:
<link rel="canonical" href="YOUR CODE HERE" />

Use the same code you use for your facebook og:url tag in the canonical tag and that will override the URL the tweet button sends.

I went to your page, it looks like whatever you're doing is working. :)

thank u very much:D

Hi,

1. Could you explain what is "header/header include" ?

2. is there anyway to put automativ trailing slash on your mod?

nice mode btw, thanks for sharing.

Zurrie

I guess Showthread has changed in 4.0.6 as your edits do not work.

I've tried it above and below where you have said to enter it and do not get the desired affect.

Also on your site if you click on the number next to the tweet it finds nothing on Twitter, however I checked on DP and theirs works ok?

See attachment for location problems.

This is looks in 4.0.5.

update!

i change the height into 50px resolve the space in 4.0.5.

Regards,

Zurrie

The "header" or "header include" templates, accessible by Admin CP -> Styles & Templates -> Style Manager -> (Your Style) -> All Style Options... These will be the first two boxes you see. The code is probably in the second one, "header include."

When you say automatic trailing slash, do you mean to the URL sent to Twitter? I suppose it could be done if you use the canonical link tag I mentioned and typed a "/" at the end.

Honestly I don't have Facebook integration installed on mine so that might be what is causing the problem... however zurrie reported changing the div height to 50 seemed to fix this problem.

The sites I've seen it working on has it next to the facebook like button which looks far better than having it on top.

Okay, what i mean is the "result URL" to twitter which is show at "short url" when you click it the result on browser will show as http://www.domain-name.comshowthread.php/XXXX

no trailing slash.

i try to remove my facebook integration but still the same twitter show no trailing slash result.

btw, reminds me which vB you are using sir?

Regards,

Zurrie

I'm on 4.0.4 at the moment, will be upgrading to 4.0.6 shortly.

Can you give me a link to your forum so I can see what's going on?
PM me if you don't want it public.

Could you make a identical facebook one right next to the twitter one? It would be greatly appreciated

Doesn't VB4 have facebook integration built in already? You just go to the admin cp -> vbulletin options -> Facebook Options to set it up...

If you are using VB3.x then I recommend this mod, it's what I use in my 3.8 board:
https://vborg.vbsupport.ru/showthread.php?t=243319

For the most part it would work on VB4 if it had to, just put the code in SHOWTHREAD so you don't need those conditionals.

I clicked your tweet button as im a member of your forum :)

Thanks

It does work but it bloats the display too much as it goes above the FB and page 123 select.

Look forward to you having 4.0.6 installed and turning on the fb as it will be a lovely addition to my site!

Thanks!

Here is what I did to fix the sizing issues for 4.0.6:

1. Find the following code in SHOWTHREAD:

2. After that line insert your Twitter button code:

3. Make sure you replace the correct variables, per the original instructions (I also added the 'data-related' option for it to recommend more than one Twitter account). Notice, the height is set to '15px;'.

If you do that, it should look like the attached image:

thanks for that is there anyway to get it next to the fb like button?

Nice MOD but i have also Facebook enabled and causing some Overlap with pages display.

http://img3.imageshack.us/img3/8664/clip25.png

UPDATE....

Fixed by Changing Possition of code.....

1. Find the following code in SHOWTHREAD:

2. After that line insert your Twitter button code:


http://img96.imageshack.us/img96/6833/clip26.png

Unfortunately that doesn't fix it properly, the pagination is not correct as the " Results 1 to 10 of 17" should be next to the pagination and now it is under the facebook connect.

Also it looks a little odd as it doesn't line up (twit button) should be a couple of pixels higher or ultimately it would look better next to the fb icon I think...

Have a look at the attachments to see what I mean.

Why for me is Just fine ?

https://vborg.vbsupport.ru/

Maybe you don't place it at the right place.
Place the code after the first </div>, NOT the second....

I agree the tweet button would look better a couple pixels higher but haven't figured that put yet,

I will give it another try would be be very difficult to get it onto the same line as the fb connect?! as then you would have the 2 social networking sites next to one another?!

Thanks

OK, I have figured out the best place to use this if you also use the Facebook Like button which I guess most do. I have updated the first post with new instructions.

Screen Shot of new location below:

https://vborg.vbsupport.ru/attachmen...1&d=1282396257

Works great however the Twitter box with the number of tweets is cut off on the right so if you change the entry from 90px width to 92px it fixes it.

Is there an easy way of flipping them around to the Twitter button is on the left of the FB button!?

Thanks I will update the instructions...

I haven't tested this but I'd imagine putting the {vb:raw fblikebutton} code before the twitter code instead of after it, it may work... such as:

EDIT- I did test it and it does work, however the width should be even longer, 95px works nicely.

Doesn't work with 4.06 and FB Connect enabled, gives me this error:

URL required

'url' parameter does not contain a valid URL.

Hmmm... it's definitely working for me... where are you getting this error, in the pop-up window? Is there anything else?

Can you give a link to your forum?

Thanks works nicely but sods law the icons/buttons are different heights.

Would it be difficult to be able to add the twitter button 1 or 2 pixels lower?

Thanks and marked installed.

Yeah good call... if you add the code: padding-top:2px; to the style attribute of the <div> tag it perfectly centers the tweet button with the facebook button. I have updated the code in the top post to reflect this change.

thanks works perfectly!