Social Media: Supercharge Your Sites Part 2

Welcome back to “Social Media: Supercharge Your Sites.” This is the second installment of the two part series, which will cover a few ways to integrate Twitter with your website. If you missed part 1, and want to learn how to leverage your Facebook pages/posts within your website, go check it out. Like part 1, we will be implementing these examples using some example Demosphere content. Let’s get started!

Social Media Tip 1: Embedding A Single Tweet (5 mins.)

Tweeted a great photo of your team? Travel? A sunset? Showcasing tweets with engaging imagery on your site is best done by embedding a single tweet (including the photo). Before adding the tweet to your site, consider where you want to place the new content. Tweets are generally short, even if they include a photo or video. A great place to include this kind of content is in a sidebar or narrow container. In our example we will add the tweet to a sidebar.

  1. Find the tweet you want to embed. pic1
    Twitter makes this pretty easy by having a button to choose what you would like to do with a tweet.
  2. Copy the code. pic2
    For this example we want the imagery, so we leave “Include media” checked.
  3. Add the tweet to your site. pic3
    Now that you have the embedded tweet code it’s time to add the content to your site. If you have a Demosphere site, then you can accomplish this easily through the rawcode content type. If you are not on the Demosphere platform, see if you can add the embedded tweet code to your site through your content management system’s editing tools.
  4. View public version pic4
    Congratulations! You just embedded a tweet on your site for the first time.

Social Media Tip 2: Embedding A Single Video (5 mins)

If you have an exciting video of a game winning goal, buzzer-beater, or a message you want to convey to your audience through video, then you can share that content between twitter and your site. The process is very similar to embedding a normal tweet, but video content requires more room than a normal tweet. In this example we will add the video from twitter to the main content container of our page.

  1. Find the video you want to embed from twitter. pic5
  2. Copy the code. pic6
  3. Add the video to your site. pic7
    Videos are not embedded with a title, so you’ll want to add a title that grabs your audience’s attention.
  4. View the public version. pic8

Social Media Tip 3: Embedding A Timeline (10 mins)

If you want to embed your entire Twitter timeline on a section of your site, you’re in luck because Twitter has that feature. You’ll need a Twitter account and will have to sign into Twitter to use this feature. Let’s get started!

  1. Head over to Twitter’s publishing tool https://publish.twitter.com
  2. Add the url to the timeline that you want to embed. This is normally the url of your Twitter page. In this example we will use Demosphere’s Twitter pagepic9
  3. Choose your display template. pic10
    Depending on your Twitter content, your display options will vary. Experiment with various templates at your leisure. In this example we will use the embedded timeline option.
  4. Edit the display options. pic11
    With an embedded timeline your content will cause your page to scroll due to the length of the timeline. We’ll add a height display option to have our content scroll within it’s own section once embedded on our page.
  5. Add the timeline to your site. pic12
    You can do this via rawcode if you are using the Demosphere platform. In our example we will hide the title for our timeline because the embedded timeline includes a title.
  6. View the public version pic13

More On Twitter

Want to see what else Twitter can do? Explore their embedded content APIs here.

What next?

Now you have the knowledge to supercharge your websites! Like many things in life, content curating is an art that has no right or wrong answer. Always remember, “because you can does not always mean you should,” so be conscious if you are overloading your site with too much content from your social media. Have fun and continue learning!

I hope you enjoyed this introduction series to getting your sites integrated with Facebook and Twitter. Leave a comment below and check out Social Media: Supercharge Your Sites Part 1, where we go over how to integrate Facebook with your site.

Social Media: Supercharge Your Sites Part 1

If you manage a website or blog, then it can be challenging to consistently create engaging content through writing articles; however, social media posting has become pretty natural.  Luckily, we can leverage all the work put into your social media channels by embedding that content on your Demosphere website.  This two-part guide will show you all you need to know to integrate your Facebook page and Twitter account with your website. Let’s get started!

Social Media Tip 1: Facebook Pages

You can share all kinds of social media content between Facebook and your website including: timelines, messages, and events. Embedding your Facebook page on your site is an easy way increase your online presence. This section will cover how to connect different pieces of your Facebook page with your site.

1) Navigate to the Facebook Developer Page Plugin page.

social media page plugins

2) Scroll down until you see an input for, “Facebook Page URL,” and enter the url for the page from where you want to use content. In this guide we will be using Demosphere’s Facebook page as an example.

3) Choose the tabs you want to include in the input labeled, “Tabs”. Available options are: timeline, messages, and events. You may include as many tabs as you wish by separating each tab with a comma (example input “timeline, events”). In our example, we’ll use all 3.

social media page plugins

4) Configure the appearance of your page plugin. The nice people at Facebook have made this process very simple by exposing common configurations as checkboxes and text inputs. You can experiment with the look and feel of your plugin by previewing the content underneath the configuration settings. It is best to leave width and height empty, as well as leaving the checkbox for “Adapt to plugin container width” checked to ensure your plugin looks great on all device screens. For the guide’s example we are going to use the settings below:

social media page plugins

5) Get the code. You can get all of the code to put on your site by clicking the “Get Code” button beneath the plugin preview. You will need to copy both snippets of code from the tab “Javascript SDK” and put them on your page in the order they appear. Our example’s code snippets are below:

social media embed code

6) Add the code to your page. Add the snippets to your Demosphere website as “Rawcode” (shown below). If your site is not hosted by Demosphere, then you can add your code snippets to the source code of the page in the order shown above.

social media embed code

7) Check your public page:

social media public

Social Media Tip 2: Showcasing Specific Posts

Sometimes you will want to highlight a specific post from Facebook. You can accomplish this using Facebook’s Embedded Posts Plugin. We’ll walk through how to accomplish that below.

1) Start by logging into Facebook and navigating to the post that you would like everyone to see. In this example, we will use one of the posts from Demosphere’s Facebook page. Click the arrow at the top right of the post and choose the “Embed” option, then “Advanced Settings”.

social media post embed

2) Configure the post plugin. Facebook Embedded Post Plugin page should look familiar to the Facebook Page Plugin page. Set the pixel width option to “auto” as shown below.

social media embed post

3) Get the code. Click the button “Get Code”. If you’re following along from the last section and are not using the Demosphere platform, then you don’t need to copy the first snippet.

social media embed code

4) Add the code to your page. Like the previous section, you can add the code to a Demosphere page using “Rawcode”. If you are not using the Demosphere platform, then you can add the code snippets to your page’s source code.

5) Check your public page

social media public

What Next?

If you’ve been following along, then you have successfully integrated different elements from your organization’s Facebook page. Take some time to experiment with what you have learned in Part 1 of this guide and explore the various plugins that Facebook has to offer. Most of them can be implemented by simply embedding the code they provide into your site.

Having trouble? Did you setup an awesome social media steam? Leave a comment below and be on the lookout for Social Media: Supercharge Your Sites Part 2, where we will go over how to integrate Twitter with your site.

 

Communication Is Crucial: 8 Steps to Improve

Good communication is one of the most important ingredients of running a successful organization and Demosphere has several tools to help you master the gift of gab!

Demosphere’s fully integrated Club and League solution provides many important tools for streamlining communication; from professionally designed websites, robust online registration features, league scheduling tools and our latest addition, the Demosphere Team Communication app.

Check out our 8-Step Guide for improving communication within your organization:

Step 1: Update Your Website’s Homepage

First, create an enticing welcome message front and center on your website encouraging members to join your organization.

register nowShare a list of member benefits, along with important info they will need to join; such as program options, fees and dates.

Demosphere also recommends including a Register Now button that is easily visible on your website to allow members to start the registration process within one click of your home page.

Looking for a customized Register Now image? Demosphere can help!

Step 2: Registration Season Setup

unnamedBe sure to set up a registration outgoing email address within registration settings that is regularly monitored to help parents to stay connected with your organization. Keep in mind, this address can be an alias that forwards to multiple people within your organization. This will ensure your members can quickly reach you with any questions about their registrations, fees, team placement and other instructions.

If you’re setting up a program for youth registrations, you will want the parents to be involved in team communication, so make sure you set “collect parent information” ON within your season settings. By default this setting is ON, but if you were setting up an adult program, or do not want to collect parents’ information, you can always turn it OFF. Just one example of many customizations you can make within the Demosphere solution!

Step 3: Spread the Word!

This is a crucial step to ensure a successful registration season. Be sure to communicate registration instructions via various channels.communication

Notify your members via email and text message. Demosphere’s Club and League solution includes both broadcast email and SMS tools within the Communication Center. You can also opt to use email marketing solutions like Constant Contact or Mailchimp.

Don’t forget to update your facebook, twitter and other social media feeds to ensure your members receive your updates, no matter their channel of choice.

If you are not yet using Demosphere’s integrated broadcast communication tools, now’s your chance to try them out! With robust filtering and custom distribution lists for both email and SMS text messaging, you can easily communicate with specific target audiences.

Step 4: Data Integrity

Protecting-Data-and-Privacy-in-the-CloudWhen communicating registration information with your members, please remind your members to use their existing Demosphere login if they’ve previously signed up! Demosphere has a universal login system that helps users maintain one login for the many organizations who are using the Demosphere platform. When a user doesn’t remember their password, post clear instructions about resetting their password following the “forgot my password” link.

We understand it is not always that simple; that is why we have data merge tools for you to tidy things up later.

Members should first create the unique login details for their own account, using their email address, then they will register their child. Instruct your members to then enter BOTH parents’ email addresses during the registration process, where applicable. This will ensure both members receive important updates from your organization. Step-by-step instructions for navigating the public registration process can be found and shared via this link.

Step 5: Building Balanced Teams

Every communication is very important for the team and its players. Even before registration finishes it is important to keep families informed so that they can be assured as the registration closing date approaches. Once registration comes to a close, you may access Demosphere’s registrationteam roster management area to review registration data, participant and volunteer counts, and build teams and rosters within the system.

Everything you need to build your teams can be found on one screen – toggle between player and volunteer data, edit registration form data, search/sort/filter on all of your registration data to view the data set with which you want to work (including the ability to sort by player rating, zip code, city, school, age group, or any other custom data field you add). From there you may drag and drop players on to teams to build those team rosters, while viewing participant counts to ensure teams are formed evenly.

Step 6: Team Staff Assignment

coach volunteerOnce you have finished building the player rosters for each team, you will also want to ensure Volunteers/Team Staff members are added to each team. As soon as your rosters are complete, you can sync the teams over to the Demosphere Team Communication app (available in iTunes and Google Play) to send email requests to all team members, including parents, to join the team!

All members with Coach, Assistant Coach and Manager roles will receive administrative permission for team communication and calendar management purposes.

Step 7: Send Teams to Demosphere’s Team Communication App

Demosphere TeamEverything looks good, you have followed all the checklist items mentioned above, so go ahead click that button to sync your teams to Demosphere’s Team App at any level (all teams in the season, teams within a single grouping or just an individual team). You’ll first see a summary of how many teams, staff and players will be synced to the app. All team members, parents (if collected), along with team staff and game schedules (if applicable) will be created within the Demosphere Team App.

Is that all? Not quite. Do you want to view the teams you have synced to the Demosphere Team App? After the initial sync, click the Update Team icon again for any team and you’ll see a link to “view the team”. All Club Administrators with registration management permissions will be able to view every team that’s been synced to the team app.

Don’t forget to close the communication loop with your coaches and other team staff to let them know their teams has been pushed to the Demosphere Team App. Your members will have access to several support documents for frequently asked questions, as well as the ability to send you support emails directly from the app.

Step 8: Create and Post Schedule

schedulingIf you plan to use Demosphere’s powerful tools for scheduling league games, it is time to generate and sync your team schedules.

Because Demosphere’s registration, scheduling and team solutions are fully integrated, your organization’s teams, rosters and schedules will be synced across all tools. Best of all, any schedule changes made on the master schedule will automatically update within the Demosphere Team App. Just another way Demosphere helps organizations streamline communication!

 

If you are interested to learn more about how Demosphere can help improve communication within your organization, contact us today!

Demosphere and Copper Mountain Rec Soccer Expand Partnership

Pictured (left to right): Ted Sonnenburg (CMS), Camille Cheatwood (Demosphere), Racquel Augat (CMS)
Pictured (left to right): Ted Sonnenburg (CMS), Camille Cheatwood (Demosphere), Racquel Augat (CMS)

Demosphere’s Senior Account Manager, Camille Cheatwood, recently made the trip to beautiful Utah to meet with the Copper Mountain Soccer (CMS) team to discuss an expansion of our partnership. Our enhanced solutions will include creation of a new youth soccer website to help in their re-branding efforts to their newly re-envisioned Copper Mountain Rec Soccer name.

While in Utah, Cheatwood met with the CMS team for a working session to review best practices relative to our current partnership which includes online player registration and league scheduling tools. This streamlined solution is vital to the success of their organization, and with the addition of a new and improved website, Demosphere plans to help CMS reach their goal of being a premier, fully integrated, youth soccer club.

Demosphere is proud to support the efforts of Copper Mountain Soccer in achieving their mission to provide a place where all children have an opportunity to learn the sport of soccer and to have fun doing it. Demosphere’s goal is to provide leading-edge, integrated technology solutions to youth sports organizations to allow partners to focus more on what matters most: creating programs that help grow and develop our youth through sport.

If you’re interested to learn more about what Demosphere can do to help your organization #GetIntegrated, contact us today!

Demosphere Unveils a New Look for demosphere.com

Demosphere Youth Sports LogoFalls Church, VA – April 4, 2017 – Demosphere is thrilled to unveil their new website: demosphere.com. The site was launched on Friday, March 31st with some tweaks and maintenance over the weekend prior to the official launch announcement.

“This has been a long time coming.” said Demosphere’s Executive Vice President, Kris Baker. “We wanted our website to speak to our core values and our previous site was just not hitting the mark. Our mission as an organization is based on four core pillars of strength: Experience, Authenticity, Integrity and Community. We want people to think of these values when they think of Demosphere, and this new site is a huge step in the right direction for us.”

“I’m excited that we’ve brought our website back in house.” continues Kris. “For many years, blog.demosphere.com was hosted externally using the WordPress platform and it was always something that didn’t quite sit right with me.”

Senior Vice President of Product Development, Miles Baker, played a crucial role in the design and development of the new site. “We wanted the new website to reflect not only our core values through content, but also use it to highlight Demosphere’s professional design capabilities. Striking the right balance of clear content delivery with a clean and sophisticated design is what we pride ourselves on. This move helps us showcase one of the many ways we can help our clients do the same.”

Additionally, bringing the website in-house allows Demosphere to take full advantage of their own premier CMS platform features.

“We need to be able to quickly and efficiently update the content of our site to continue sharing the most up-to-date and relevant information with the youth sports community. This was always a challenge for our non-technical staff to manage on our previous WordPress platform,” added Kris.

With user-friendly features such as drag and drop content management, mobile responsive views, SEO-optimization, creation of articles on the fly, a robust calendar tagging system, and much more; all levels of users can poise themselves as web masters for their organization using the Demosphere platform.

Heidi Snead, Director of Project Management, helped spearhead the website re-launch project. “This is great news for our customers because as our own organizational needs grow and evolve, so will the features and usability of the system that’s relied upon by more than a thousand organizations every day.”

If you’re ready to upgrade your website to a design that is personalized, focused on content delivery, and professional, check out Demosphere’s integrated solutions today.

About Demosphere:

Demosphere International, Inc. is an Information Technology company based in Northern Virginia that has catered to the technology needs of youth sports organizations for over 26 years. Demosphere strives to provide authentic industry-leading technology solutions for organized sports, accommodating the needs of all levels of organizations and all levels of users, with an ethical approach to how they impact the greater community. For more information on Demosphere, visit the company’s website at demosphere.com.