Webscripts

[WEBSCRIPTS CODE]

LIKE BUTTONS

If you're a visitor to our support blog, you'll have no doubt noticed that our share button, that allows you to quickly re-post an article link to your followers.

We have now released the like button code for third-party websites.

Why should I use this on my website?

Tea & Busquets is intended to be used as a hub for Football Manager discussion. If your website focuses on this topic or a topic that would be of interest to this large group of people, then it is well worth using this button. This extends the reach of your work to a more relevant audience, potentially increasing visitors to your website.

What information will the button show on Tea & Busquets?

The button will display the URL of your website, the page title and the meta description (using Open Graph markup) for that page. To view more detail the user will be required to click the link to be taken to your contents page. We won't show any content from your website in it's entirety.

Can I style the like button to suit my website?

We offer a number of settings for your button, which allows you to align it left or right, choose a colour scheme and show a counter or more detailed information on who likes your content. You will find a list of all configurable settings in the table below.

What happens if my member is not logged in to/does not have a Tea & Busquets account?

When a member or visitor of your website clicks the button they will be redirected to our website where they can register or log in to their account. When they have successfully entered their details the button will work as intended.

How do I get this on my website?

To make the share button show on your page, consult the table below (Note: you can have multiple options in each button) :

Default Button <tabFM:share></tabFM:share>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Light Scheme <tabFM:share annotation="inline"></tabFM:share>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Right Align <tabFM:share annotation="inline" align="right"></tabFM:share>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Small Counter <tabFM:share annotation="inline" count="true"></tabFM:share>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Forced Page URL <tabFM:share annotation="inline" href="http://site.com/mypage"></tabFM:share>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Forced Page Title <tabFM:share annotation="inline" title="My Article Title"></tabFM:share>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

T&B User Handle <tabFM:share annotation="inline" author="@MyName"></tabFM:share>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

TIMELINES

Tea & Busquets gives you the ability to show user timelines on your website, which are dynamically linked to T&B itself, keeping things such as number of replies, likes & shares up to date.

How do I get this on my website?

It's simple. All you need to do is add this line of code on your webpage where you want the timeline to display (where user is the link to the post you want displayed):

<tabFM:timeline user="@Cleon"></tabFM:timeline>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Which would display, like so:


By default, the width is set to 400px & the height is set to 250px, and can be changed by adding a width attribute:

<tabFM:timeline group="+TheNorthman" width="500px" height="600px" ></tabFM:timeline>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>


You can also specify a custom CSS file by appending the URL with "&css=" and the url encoded link to your CSS file and remove the box frame of the timeline by appending the url with "&frame=0".

EVENTS
Tea & Busquets gives you the ability to show upcoming Football Manager events on your website through the use of a couple of lines of code.

How do I get this on my website?

It's simple. All you need to do is add this line of code anywhere you want events shown:

<tabFM:events></tabFM:events>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Which would display, like so:


Members of the Yes2 Hub will see additional options on the events list, allowing them to like & share as well as indicate if they will be attending.

By default, the width of the posts in this list is set to 525px, and can be changed by adding a width attribute:

<tabFM:events width="300px" ></tabFM:events>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

You can also limit the number of results that are returned (maximum of 10) and use your own stylesheet to make sure the events display to match the look and feel of your website:

<tabFM:events limit="6" css="http://site.com/path/to/stylesheet.css"></tabFM:events>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

FUNDRAISERS
Tea & Busquets gives you the ability to show group fundraisers from the app, JustGiving and Indiegogo on your website through the use of a couple of lines of code.

How do I get this on my website?

It's simple. All you need to do is add this line of code anywhere you want fundraisers shown:

<tabFM:fundraisers></tabFM:fundraisers>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Which would display, like so:


Members of the site will see additional options on the fundraisers list, allowing them to like & share. Tapping the "£" symbol will take you to the page on the site where tapping it again will allow you to donate.

By default, the width of the posts in this list is set to 525px, and can be changed by adding a width attribute:

<tabFM:fundraisers width="300px" ></tabFM:fundraisers>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

You can also limit the number of results that are returned (maximum of 10) and use your own stylesheet to make sure the fundraisers display to match the look and feel of your website:

<tabFM:fundraisers limit="6" css="http://site.com/path/to/stylesheet.css"></tabFM:fundraisers>
<script async src="//tabFM.com/share/embed.js" charset="utf-8"></script>

INDIVIDUAL POSTS
Tea & Busquets gives you the ability to show individual posts on your website, which are dynamically linked to the site itself, keeping things such as number of replies, likes & shares up to date.

How do I get this on my website?

It's simple. All you need to do is add this line of code anywhere you want the post to be shown:

<tabFM:embed href="https://teaandbusquets.com/@Cleon/status/45378"></tabFM:embed>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>

Where "href" is the link to the post on the site. This would display like so:


By default, the width is set to 525px, and can be changed by adding a width attribute:

<tabFM:embed href="https://teaandbusquets.com/@Cleon/status/45378" width="300px" ></tabFM:embed>
<script async src="//teaandbusquets.com/share/embed.js" charset="utf-8"></script>


You can quickly get this code on any post on the site by clicking the options arrow on the top right of a post, selecting "Share Post" and clicking on the embed "<>" icon to copy the code to your clipboard. Then simply paste onto your webpage to display it.