By bcammo
Description
This snippet will add the official Twitter tweet button to your wikidot page. This allows visitors to tweet about the page they are on by displaying a popup window, meaning they don't need to leave your site.
Attributes
The snippet uses the following attributes, most of which are required for the button to work properly.| Attribute | Required | Allowed values | Default value | Description |
|---|---|---|---|---|
| url | yes | any valid URL, including %%link%% | The URL of the page you want to share. | |
| text | yes | any text | The text that people will include in their Tweet when they share from your website. | |
| via | yes | any twitter username | The username you want @-mentioned in the tweet (probably your own). | |
| count | yes | vertical, horizontal, none | Controls the display of the tweet count. | |
| align | no | left, right, center | left | Sets the horizontal positioning of the button. |
Please note: the float variable has been changed to align, as it better describes the function of the property. Please adjust your includes accordingly.
Code
You can add the tweet button to your page with the following code:
[[include :snippets:tweet-button
|url=http://example.com
|text=Check out this awesome page on @wikidot
|via=twitter-username
|count=vertical
]]
You can also use the button in a live template. Such a use might use the code below.
[[include :snippets:tweet-button
|url=%%link%%
|text=%%title%%
|via=twitter-username
|count=horizontal
]]
In action
See the button below for a real-life working solution. Go on, you know you want to press that button…
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by bcammo
Chatbox - 26 Mar 2012 11:07
Google +1 Button - 19 Mar 2012 19:40
Rate this solution
If you think this solution is useful — rate it up!
Hi, I am using this snippet a lot.
When enabling SSL encryption it doesn't work anymore though as:
- the link to the twitter share button uses http://twitter.com/share &
- <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
Just using
https://twitter.com/share & <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script>
instead makes it work again.
Could you modify the snippet in this way? So I don't have to define a new snippet and change it across my wikis?
Thanks a lot in advance!
Jan Goossenaerts
@collaboratewiki
I can't get this button and the G+ button to float to the left properly. I've tried style="float:left", style="display:inline-block" and class="pull-left" in Bootstrap. In all three cases, the elements have enormouse amounts of whitespace, both vertical and horizontal. See http://bienv.com/sandbox-xref for an illustration. I want to remove all of the whitespace. Can anyone help me with this?
Jay Bienvenu | Hilinqwo: A constructed language
This was a great snippet but I don't know if everybody realizes that the basic tweet button will work fine now in a live template..there is no need to put in the url of make a button for every page. Unless you want to…
Hey this has been very useful and I do not want to be a pain. But I've noticed that the tweet counts are not always accurate. This is a minor concern but is there any easy solution to this? I know I read something Twitter explanation about increasing the accuracy of the counts…
I just thought I'd mention it but it is not a big deal of course. The counts are close enough.
When I use the %%title%% in my live template it gives this as a results: "Check out this page… %%title%% http://t.co/mwkPtS8 via @wikiwealth"
The title doesn't render. When I use the %%link%%, it gives an error.
Has anyone else gotten this to work in a live template?
This is the example page: http://www.wikiwealth.com/etf-fund-research:ltl
This is the Live template: http://www.wikiwealth.com/include:middle-etf
Thank you,
WikiWealth.com - Stock, Fund, Commodity & Currency Research | SWOT Analysis, WACC
What source code are you using for the following two pages?
Being able to see the source code should help to identify the problem.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
I think you solved it anyways. Live template versus an include. That's the problem. Thank you Shane.
WikiWealth.com - Stock, Fund, Commodity & Currency Research | SWOT Analysis, WACC
You can keep the code in the include if you want, but all that means is that you should add this to the etf-fund-research:_template page:
Even though the variables are on the include page, they are going through the live template.
Edit: At least, I think you can do it that way. Am only guessing what your source code is ;-) Glad to help out.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Awesome, you rock. That fixed the problem. Thanks for the straight forward explanation. I was using a table for those social buttons like this:
So as you can see I just put the dimensions in the cell containing the include. It's perfect now. This will help me in the future as well, I bet. Thanks again, Bryce. And sorry I didn't mean to go on and on about things that were probably obvious to you. I just wanted to make sure I was describing the problem properly.
One problem I'm having is that the button takes up a lot of space. Seems like over 300 px. So if I try to include it next to other social buttons I get a big space between. Is the button set to a certain width and is their any way to include the option to control the width as needed? I guess the problem is with twitter's javascript but is there any way around it?
I know that the actual dimensions of the tweet button with horizontal count, according to twitter is: 110 pixels wide and 20 pixels high. The 110 pixel width is made up from 55 pixels for the button, 3 pixels for the space separating the count from the button and 52 pixels for the count itself.
However, it takes up a space of about 285 pixels.
Here is an example:
http://www.gustrength.com/admin:social
The first two versions I want to float to the far right but there is no way to get away from that extra space. This seems to go back to what MDesign said it not floating right like it should..even though you've changed the align function.
The third version is using a button made from twitter's "make your own button" code, just used between html tags as an example. Same problem.
This next version is using an iframe version which solves the problem of the extra space and puts the elements where I want them:
http://www.gustrength.com/admin:social2
You can see the same problem here: http://snippets.wikidot.com/code:new-wikidot-twitter-widget-css3-style
The twitter button is supposed to be floated to the right and it isn't really.
Yep, this is because of the way HTML blocks are rendered with very convoluted markup - you end up with iframes inside body elements inside a paragraph - it all gets very confusing. The best way to overcome this is to wrap the include in a div with the dimensions you want - that way everything is wrapped up in a neat little bundle that you can position however you like.
The reason the button isn't aligned properly on the twitter widget snippet page you linked to is because it hasn't been updated to use the new align property.
The other pages you linked to are private so I cannot see your examples. If you have any other questions I'll be only too happy to answer them.
Cheers,
Bryce
BMC Creative | RoaringApps | @brycecammo
This has helped me a lot. I would definitely to be able to do the facebook like button in the same way, like MDesign mentioned, to be used in a live template. I've found the like buttons very useful. Anyway, great job on this.
Hi bcammoi,
ist it not a good idea to "block" the codes from changing by any visitor or by yourself by accident ( forcing a new variable version nu,er to make a new version wiothot disturbing the pold ones…)
or - are the editing rights as I hope - onl yfor the author itself?
That's something for the administrators of the site to decide on.
BMC Creative | RoaringApps | @brycecammo
You are right - I had a look - only the Authors and admins can change a snippet code…
Now for a Facebook "Like" button/counter. You can achieve this the same way as the twitter button.
Edit: Or better yet, an "Add This" share button/counter. It's still in beta mode but I'm sure it will work too.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +