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!
Now is there any way to make it float right, or center it if needed? It doesn't seem to do that with "includes: snippets." It will float right, but not all the way like it should.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
There you go, now you can set the horizontal positioning of the button to left, right or center. Technically, it is not 'floated', because it is rendered inside a HTML block. Rather, you are defining the text-align property for the button.
BMC Creative | RoaringApps | @brycecammo
Awesome! I'm going to use it now that it's fixed.
CEO of Icon Deposit
Take a look at me via Twitter, Dribbble, and Google +
This is a wonderfull idea and well implemented!
Coingratulations!
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I'll certainly make use of this. Well done.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
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 +
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…
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.
Follow GUS on Facebook
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.
Follow GUS on Facebook
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
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.
Follow GUS on Facebook
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.
Shane Smith ★ Wikidot Freelancer (Hire me!)
— Sites: My Website, Personal Blog
— Projects: STE Editor, Wikimated, Wikidot 101 (Video Tutorials), Wikidot SubReddit
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.
Shane Smith ★ Wikidot Freelancer (Hire me!)
— Sites: My Website, Personal Blog
— Projects: STE Editor, Wikimated, Wikidot 101 (Video Tutorials), Wikidot SubReddit