Wikia

Tron Wiki

Help:Putting Twitter and Facebook feeds on mainpages

Create Talk0
For help connecting to Wikia using your Facebook account, see Help:Facebook Connect

Facebook and Twitter pages can be a great way to attract new editors to the wikia and to interact with your users. Whether you want to discuss a new episode, talk about a recent game update or just want to socialize, having a Facebook or Twitter account for your wikia is a great idea. Though creating the page isn't the hard part, it is often far more difficult to share your pages with the world. But what better way than to advertise it on the main page with a Facebook or Twitter box?

If the subject of your wikia has its own Facebook or Twitter pages, you can feature those on your main page.

Adding a Twitter Timeline

  • Adding a Twitter Timeline is somewhat complex, but it should be a piece of cake if you follow these steps. Keep in mind that these steps require admin privileges on the wikia.
    1. Sign in to twitter.com and visit the widgets section of your settings page.
    2. Click the "Create new" button.
    3. Configure your settings on the left. Your username should be added automatically.
    4. Click the blue "Create widget" button. Twitter should create the code for you in the bottom right. It should look similar to this:
      <a class="twitter-timeline" href="https://twitter.com/TwitterName" data-widget-id="TwitterID">Tweets by @TwitterName</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    5. Create a page in the MediaWiki namespace named "TwitterWidget". To do this, visit Special:CreatePage on your wikia, and use "MediaWiki:TwitterWidget" as the pagename.
    6. Copy and paste the code Twitter created for you into this page and publish the change. Important note: If your pasted code appears on two lines, remove the line break between the </a> and the <script> so that the code is all on one line. You may not be able to publish the page without removing the line break.
    7. Next, visit the page in which you want to display the Twitter feed (typically the Main Page of your wikia) and add following code:
      <verbatim>TwitterWidget</verbatim>
    8. And voilà, the Twitter widget should now appear once the page is saved.

Tips

  • The Twitter box can be customized, but the customization is limited. Within Twitter's widget setup, you can change the height, theme colors, and link colors. The rest would have to be changed via local CSS on the wikia.
  • Twitter's widget creator doesn't honor the width value on the left when creating the code. If you wish to add a width or height value, you can do so by adding it to the link manually like:
    <a class="twitter-timeline" height="500px" width="250px" href="https://twitter.com/TwitterName" data-widget-id="TwitterID">Tweets by @TwitterName</a>

Adding Facebook widgets

This is a list of wikitext tags you can use to include Facebook widgets anywhere on your site.

Page Plugin

The Page plugin is a versatile widget that can allow viewers to like a Facebook page, see which of their friends already like it, and view recent posts from the page. This widget should meet most of your needs around showcasing a Facebook page on your wikia!

These examples use Wikia's Facebook page, https://www.facebook.com/wikia, but should use your wikia's Facebook page, or the Facebook page for your wikia's topic.

The basic code looks like this:

<div class="fb-page" data-href="https://www.facebook.com/wikia"></div>

And will generate a module that looks like this:

 

You can add the following parameters to the code to change additional elements:

  • data-show-posts="true" will show recent posts from the page
  • data-show-facepile="false" won't show the viewer's friends' faces
  • data-small-header="true" will make the cover image smaller, and data-hide-cover="true" will hide the cover image completely.

This code, using some of those parameters:

<div class="fb-page" data-href="https://www.facebook.com/wikia" data-small-header="true" data-show-facepile="false" data-show-posts="true"></div>

generates a module that looks like this:

 

Additional parameters and information

  • Facebook's documentation page allows you to experiment with other layout options and generate a block of code that you can copy/paste onto your wikia. Select your options and click the "Get Code" button. You don't need to worry about the first step about using the "JavaScript SDK" – Wikia's taken care of that part. Just grab the code from step two and you'll be all set!


Like Button

Adds a Like button that allows users to like the current page. You can also optionally add a Share button next to the Like button.

<fb:like share="true"></fb:like>

Parameters

  • Add share="true" to also show a Share button.


Share Button

The Share button lets users share a link on their timeline, in groups, or to their friends via a Facebook Message. Additional text can be added to the post or message.

<fb:share-button layout="button_count"></fb:share-button>

Parameters

  • Use the layout parameter to choose between various types of button. Possible values are "box_count", "button_count", "button", "link", "icon_link", or "icon".


Follow Button

The Follow button allows users to subscribe to the public updates of your wikia's Facebook page (if you have created one). Use the href parameter to link the widget to your wikia's Facebook page.

This examples use Wikia's Facebook page, https://www.facebook.com/wikia, but should use your wikia's Facebook page, or the Facebook page for your wikia's topic.

<fb:follow href="https://www.facebook.com/wikia"></fb:follow>


Deprecated widgets

In June 2015, Facebook ended support for three older widgets that were supported on Wikia:

  • Like Box (tag was <fb:like>)
  • Facepile (tag was <fb:facepile>)
  • Recommendations Feed (tags was <fb:recommendations>)

The Page plugin is the best replacement for these!

Best practices

  • The Muppet Wiki has a box on the top right of their main page, and the page has over 13,000 likes! They share photos of their favorite characters, news about the Muppets and ask fans to comment on posts.
  • The Sims Wiki also has a very active Facebook community, with over 1500 likes. Like the Muppet Wiki, the box is on the top right of the page so the box will be one of the first things new visitors see. The Sims Wiki actively uses their Facebook page to share news articles, but also informs their users of important on-wikia discussions.

I still can't work it out!

If you are having problems setting up any of the Twitter or Facebook boxes, feel free to ask the community for help on our Forum, or contact Wikia staff.

See also

Further Help & Feedback

Around Wikia's network

Random Wiki