Community Central
Register
Community Central
For help connecting to Fandom using your Facebook or Google account, see Help:Connecting social accounts.

Facebook and Twitter pages can be a great way to attract new editors to your community 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 community is a great idea. Though creating the social account isn't the hard part, it is often far more difficult to get the news out about those pages. But what better way than to advertise it on the main page with a Facebook or Twitter widget?

Adding a Twitter timeline[]

Help-Twitter

A Twitter timeline

While Fandom doesn't support Twitter widgets, adding a Twitter timeline to a page on your wiki is pretty simple. Just follow these steps:

  • In source editor, write this:
    <twitter screen-name="getfandom" />
  • Replace "getfandom" with the name of the Twitter feed (e.g. "getfandom", "BBCNews", "EmWatson", etc.)

Of course, you may wish to tweak the layout and contents: we support many of the parameters listed in Twitter's documentation.

For example, if you wanted to set the "height" as "300" (pixels), you would write:

<twitter screen-name="getfandom" height="300" />

Note: due to Twitter's rapidly evolving policies around who can view tweets, this widget may not show content for some viewers.

Adding Facebook widgets[]

With the following, you can include Facebook widgets anywhere on your site! The following examples make use of Fandom's Facebook page, https://www.facebook.com/getfandom, but you should use your community's Facebook page, or the Facebook page of your community's topic.

Video[]

This allows users to embed Facebook videos in articles. There are further ways to customize the size of video displayed.

<span class="fb-video" data-href="https://www.facebook.com/getFANDOM/videos/358865301453749/" data-width="300" data-show-text="false"></span>

Parameters

  • data-allowfullscreen="true" allows the video to be played in fullscreen mode.
  • data-autoplay="false" will stop the video playing automatically when the page loads.
  • data-width="300px" adjusts the width of the video container, in this case, 300px.
  • data-show-text="false" stops displaying the text from the Facebook post associated with the video.
  • data-show-captions="true" shows captions (if available) by default.

Caption here.

Replacing class="fb-video" by class="fb-video tright" (by class="fb-video floatleft") gives a right-aligned (left-aligned) thumbnail embedded in the following paragraph (like here). Adding a caption to the thumb only works by grafting them on in nested tags:

<div class="tright"><span class="fb-video" data-href="https://www.facebook.com/getFANDOM/videos/358865301453749/"></span><br><small>Caption here.</small></div>

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 wiki!

The basic code looks like this:

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

This will generate a module that looks like this:

You can add 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.

For example, using some of those parameters:

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

This generates a module that looks like this:

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 wiki. Select your options and click the "Get Code" button. You don't need to worry about the first step about using the "JavaScript SDK" – Fandom's taken care of that part. Just grab the code from step two and you'll be all set!

I still can't work it out![]

If you are having problems with setting up any of the Twitter or Facebook boxes, feel free to ask for help on our Community Discussions or contact Fandom Staff.

Note: Firefox may block the Facebook widgets from loading, via its Facebook Container feature.

See also[]

Further help and feedback[]