m (→Adding a Twitter timeline: simplifying language) |
(+be) Tag: Help |
||
(11 intermediate revisions by 9 users not shown) | |||
Line 1: | Line 1: | ||
{{tocright}} |
{{tocright}} |
||
− | : ''For help connecting to |
+ | : ''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! |
'''Facebook and Twitter pages''' can be a great way to attract new editors to your community and to interact with your users! |
||
Line 13: | Line 13: | ||
* Replace 'getfandom' with the name of the Twitter feed (e.g. 'getfandom', 'BBCNews', 'EmWatson', etc.) |
* 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 [https:// |
+ | Of course, you may wish to tweak the layout and contents: we support many of the parameters listed in [https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference Twitter's documentation]. |
For example, if you wanted to set the "<code>height</code>" as "<code>300</code>" (pixels), you would write: |
For example, if you wanted to set the "<code>height</code>" as "<code>300</code>" (pixels), you would write: |
||
Line 19: | Line 19: | ||
Or you might want to use the dark theme as well: |
Or you might want to use the dark theme as well: |
||
: <code><nowiki><twitter screen-name="getfandom" height="300" theme="dark" /></nowiki></code> |
: <code><nowiki><twitter screen-name="getfandom" height="300" theme="dark" /></nowiki></code> |
||
+ | |||
::''Widgets are no longer supported by Twitter. So if your wiki uses the old <code><nowiki><twitter widget-id></nowiki></code> tag, it should be changed to the <code><nowiki><twitter screen-name></nowiki></code> tag.'' |
::''Widgets are no longer supported by Twitter. So if your wiki uses the old <code><nowiki><twitter widget-id></nowiki></code> tag, it should be changed to the <code><nowiki><twitter screen-name></nowiki></code> tag.'' |
||
== Adding Facebook widgets == |
== Adding Facebook widgets == |
||
− | With the following, you can include '''Facebook widgets''' anywhere on your site! The following examples make use of |
+ | 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. |
=== Page plugin === |
=== Page plugin === |
||
− | The 'Page |
+ | 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: |
The basic code looks like this: |
||
Line 39: | Line 40: | ||
This generates a module that looks like this: |
This generates a module that looks like this: |
||
: <div class="fb-page" data-href="https://www.facebook.com/getfandom" data-small-header="true" data-show-facepile="false" data-show-posts="true"> </div> |
: <div class="fb-page" data-href="https://www.facebook.com/getfandom" data-small-header="true" data-show-facepile="false" data-show-posts="true"> </div> |
||
− | [https://developers.facebook.com/docs/plugins/page-plugin 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" – |
+ | [https://developers.facebook.com/docs/plugins/page-plugin 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! |
=== Like button === |
=== Like button === |
||
− | + | This 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. |
|
: <pre><nowiki><fb:like share="true"></fb:like></nowiki></pre> |
: <pre><nowiki><fb:like share="true"></fb:like></nowiki></pre> |
||
: <fb:like share="true"></fb:like> |
: <fb:like share="true"></fb:like> |
||
Line 54: | Line 55: | ||
'''Parameters''' |
'''Parameters''' |
||
* Use the <code>layout</code> parameter to choose between various types of button. Possible values are "box_count", "button_count", "button", "link", "icon_link", or "icon". |
* Use the <code>layout</code> parameter to choose between various types of button. Possible values are "box_count", "button_count", "button", "link", "icon_link", or "icon". |
||
+ | |||
+ | === Video === |
||
+ | This allows users to embed Facebook videos in articles. There are further ways to customize the size of video displayed. |
||
+ | |||
+ | :<pre><nowiki><div class="fb-video" data-href="https://www.facebook.com/getFANDOM/videos/358865301453749/" data-width="300" data-show-text="false"></div></nowiki></pre> |
||
+ | |||
+ | <div class="fb-video" data-href="https://www.facebook.com/getFANDOM/videos/358865301453749/" data-width="300" data-show-text="false"> </div> |
||
+ | |||
+ | '''Parameters''' |
||
+ | * <code>data-allowfullscreen="true"</code> allows the video to be played in fullscreen mode. |
||
+ | * <code>data-autoplay="false"</code> will stop the video playing automatically when the page loads. |
||
+ | * <code>data-width="300px"</code> adjusts the width of the video container, in this case, <code>300px</code>. |
||
+ | * <code>data-show-text="false"</code> stops displaying the text from the Facebook post associated with the video. |
||
+ | * <code>data-show-captions="true"</code> shows captions (if available) by default. |
||
+ | |||
+ | <div class="tright"><div class="fb-video" data-href="https://www.facebook.com/getFANDOM/videos/358865301453749/" data-width="200" data-show-text="false"> </div><br /><small>Caption here.</small></div> |
||
+ | Replacing <code>class="fb-video"</code> by <code>class="fb-video tright"</code> (''by <code>class="fb-video floatleft"</code>'') gives a right-aligned (''left-aligned'') [[Help:Wikitext#Image_formatting|thumbnail]] embedded in the following paragraph (like here). Adding a caption to the thumb only works with nested tags: |
||
+ | |||
+ | :<pre><nowiki><div class="tright"> <div class="fb-video" data-href=...></div><br><small>Caption here.</small><div></nowiki></pre> |
||
== Best practices == |
== Best practices == |
||
Line 60: | Line 80: | ||
== I still can't work it out! == |
== 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 |
+ | If you are having problems with setting up any of the Twitter or Facebook boxes, feel free to ask for help on our [[w:Special:Forum|Community Forum]] or [[Special:Contact|contact Fandom staff]]. |
== See also == |
== See also == |
||
− | * [[w:Project: |
+ | * [[w:Project:Fandom communities on Twitter|A list of Fandom communities with Twitter accounts]] |
− | * [[w:Project: |
+ | * [[w:Project:Fandom communities on Facebook|A list of Fandom communities with Facebook accounts]] |
− | * [ |
+ | * [https://developers.facebook.com/docs/plugins/ More about Facebook Social Plugins] |
== Further help and feedback == |
== Further help and feedback == |
||
− | {{Help and feedback section}} |
+ | {{Help and feedback section}}[[ca:Ajuda:Afegint Twitter i Facebook a les portades]] |
+ | [[be:Даведка:Фішкі сацыяльных сетак]] |
||
− | |||
− | [[ca:Ajuda:Afegint Twitter i Facebook a les portades]] |
||
[[de:Hilfe:Social Media]] |
[[de:Hilfe:Social Media]] |
||
[[es:Ayuda:Integración de las redes sociales]] |
[[es:Ayuda:Integración de las redes sociales]] |
||
Line 85: | Line 104: | ||
[[zh:Help:社交媒體整合]] |
[[zh:Help:社交媒體整合]] |
||
[[Category:Help]] |
[[Category:Help]] |
||
− | [[Category:Advice from |
+ | [[Category:Advice from Fandom]] |
Revision as of 18:30, 15 September 2019
- 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
Adding a Twitter timeline to a page on your wiki is pretty simple - just follow these steps:
- In source editing mode, 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" />
Or you might want to use the dark theme as well:
<twitter screen-name="getfandom" height="300" theme="dark" />
- Widgets are no longer supported by Twitter. So if your wiki uses the old
<twitter widget-id>
tag, it should be changed to the<twitter screen-name>
tag.
- Widgets are no longer supported by Twitter. So if your wiki uses the old
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.
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:
<div class="fb-page" data-href="https://www.facebook.com/getfandom"></div>
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 pagedata-show-facepile="false"
won't show the viewer's friends' facesdata-small-header="true"
will make the cover image smaller, anddata-hide-cover="true"
will hide the cover image completely.
For example, using some of those parameters:
<div class="fb-page" data-href="https://www.facebook.com/getfandom" data-small-header="true" data-show-facepile="false" data-show-posts="true"></div>
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!
Like button
This 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.
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 href="https://www.facebook.com/getfandom" data-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".
Video
This allows users to embed Facebook videos in articles. There are further ways to customize the size of video displayed.
<div class="fb-video" data-href="https://www.facebook.com/getFANDOM/videos/358865301453749/" data-width="300" data-show-text="false"></div>
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 with nested tags:
<div class="tright"> <div class="fb-video" data-href=...></div><br><small>Caption here.</small><div>
Best practices
- The Muppet Wiki has a box on the top right of their main page, and the page has over 23,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 1,500 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-wiki discussions.
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 Forum or contact Fandom staff.
See also
- A list of Fandom communities with Twitter accounts
- A list of Fandom communities with Facebook accounts
- More about Facebook Social Plugins
Further help and feedback
- Browse and search other help pages at Help:Contents
- Check Fandom Community Central for sources of further help and support
- Check Contacting Fandom for how to report any errors or unclear steps in this article