Show Thread Enhancements - 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)

		<vb:if condition="$pagenav">
			{vb:raw pagenav}
		</vb:if>

Above this add:

<vb:if condition="!in_array($GLOBALS[forumid], array(X, Y, Z))">
<div id="mytweetbutton" align="right" style="height:27px;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YOUR_TWITTER_USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</vb:if>

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:

<vb:if condition="!in_array($GLOBALS[forumid], array(X, Y, Z))">
and 
</vb:if>

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:

		{vb:raw fblikebutton}

Replace it with:

<div id="fb_likeframe" style="border: none; overflow: hidden; height: 27px; width: 95px; vertical-align: text-bottom; padding-top:1px;"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YOUR_TWITTER_USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>{vb:raw fblikebutton}

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.

[nick-harper]

Try This:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTERNAME" data-url="{vb:raw vboptions.bburl}/{vb:link thread, {vb:raw thread}, {vb:raw pageinfo_newpost}, 'threadid', 'threadtitle'}">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

[BirdOPrey5]

Originally Posted by nick-harper

In 4.1.2 there is a template called "facebook_likebutton"

Just add it to the end of that template

Great Idea :up:

Originally Posted by nick-harper

Try This:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTERNAME" data-url="{vb:raw vboptions.bburl}/{vb:link thread, {vb:raw thread}, {vb:raw pageinfo_newpost}, 'threadid', 'threadtitle'}">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

That should work, my concerns are it will use the page number and the thread title. On many forums people's page numbers vary... For instance this is page 4 for me, it may be page 10 for someone else or page 2 for yet someone else. Therefore if you tweet the url with the page number the person following the link could very well end up on a different page.

For this reason I prefer to tweet the first page only no matter what page someone hits the tweet button on. Not to mention each page would have it's own tweet counter (so if someone tweets page 2, page 1 would be zero still).

For the same reason I don't like using the full title in the URL because if the title is edited the count will reset as well.

[Eruantien]

Anyone know why the tweet count resets to 0 when you refresh the page?

[TWood]

I used the code from Post 143 here and it works nicely to fix the dropped slash problem. Thank you!

How would that code be modified to Tweet a link to a single post? I'd add the button to the post header bar, next to the permalink. I assume it would use the permalink, but don't know how to code that.

Similarly, how would the code for the Facebook 'Like' button be modified to 'Like' a single post instead of the entire thread?

Thanx

(I'm using 4.1.3)

[BirdOPrey5]

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="YOUR_TWITTER_USERNAME" data-url="{vb:raw vboptions.bburl}/showthread.php?p={vb:raw post.postid}#post{vb:raw post.postid}">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

That should work per post anywhere in the postbit templates.

In facebook or anything else use this URL per post:

{vb:raw vboptions.bburl}/showthread.php?p={vb:raw post.postid}#post{vb:raw post.postid}

[andycaps]

I installed this ok and it sends the thread out to my twitter page but the URL on the tweet does not take the reader back to the forum thread?

Its: Tweet to Twitter test http://t.co/vzi8yBF

Does anyone know why its creating the wrong link, what do i need to do to the code to correct this and auto post the correct URL back to the forum thread?

thanks guys
Andy

[BirdOPrey5]

There is so much wrong with the URL you pasted I don't know where to begin...

Exactly what code are you using for the twitter buttong- post it here.

Also post the URL to a thread that has the twitter button on your forum.

[TWood]

Thanks BoP -

BTW, I placed a bug report at Twitter regarding the missing / after the .com and they acknowledge the bug:

http://code.google.com/p/twitter-api...detail?id=2231

Looking at your source code you have the following line in your <head> element:
<link rel="canonical" href="showthread.php?37-Welcome-to-78759-and-Surrounding-Areas">

Your canonical URL is relative and it looks like the concatenation of base url + canonical url is missing the joining '/'.

Letting the team know so they can look into it. Updating the title from:
Tweet button removes slash in vBulletin URL and breaks the hyperlink


Summary: forward slash is missing when a relative rel="canonical" is concatenated to the domain
Status: Acknowledged

[BirdOPrey5]

Cool. :up:

[TWood]

Heh,

I also submitted this as a bug report to vBulletin and they acknowledged the bug but downgraded it from my "Major" rating to "Minor". Not being able to let your Twitter users with a large number of followers share a link to your forum is minor?