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.

 

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.

Browse & Set Templates In The New Template Manager

A new name isn’t the only update to the Page Templates section in the WebWriter® Dashboard!

The newly titled Template Manager section displays a split-screen window that houses Template Listings and Template Settings.

The dual-purpose section not only displays all templates available to the site, it also allows Administrators to set their Template Settings for all three design levels (Home, Department, and Default).

Template-Manager

If you have any questions please contact Demosphere’s Support Team at support@blog.demosphere.com.

Every Site Is Easy-To-Navigate With WebWriter!

Primary Website Goal: help website visitors find the content they’re looking for as quickly as possible.

Something as simple as placing your navigational menu in a common location on the site – either horizontally across the top or vertically down the side – can save your visitors significant search time.

Using obvious labels that describe what will be found on each page can help keep visitors on the appropriate page for longer periods of time.

Having too many items in your navigation bar can be overwhelming to users. Narrowing down the options to seven (or fewer) assures each page receives ample attention from visitors in their decision making process.

Does your site’s current navigation follow the above best practices?

Make sure your website is user-friendly and easy to navigate by constructing intuitive navigation menus of your own.

navigation-item

Start From Scratch

An often overlooked yet effective way to build your navigation menu from scratch begins with the Site Map.

Demosphere suggests constructing your site’s departments in the Site Map section before creating the navigation menu on your page for two main reasons:

  • Building the Site Map can give a clear description of the site’s layout in one visual and an idea of how your site will flow. Drag-and-drop to rearrange departments and subdepartments to solidify the infrastructure before adding menus.
  • Creating your Site Map before setting up your navigation can facilitate the process when adding menu items. Menu items can be drawn directly from a completed Site Map rather than manually added.

Site Map

Manage Design Templates

Once your Site Map has been set up, begin building your navigation menu within the Page Templates section.

After the navigation has been created in one of the templates it can be cloned in the remaining templates. You will not have to rebuild the navigation menu for each.

page-templates

Select one of the templates to work with and locate the top horizontal navigation menu. If a menu already exists within the navigation bar, click the blue edit button in the righthand corner to make changes to the existing options.

If no menu exists, create a brand new menu by clicking the green Add Content button and select the Navigation Module option.

A Menu Display Preview dialog will appear, allowing you to set your menu items, publish options, and clone instances.

Build With Item Types

Menu items can be built directly in this window with three different Item Types.

edit-navigation

Menus can be built using Links or grouping pages in SubMenus. Adding pages as links on the menu bar will redirect visitors to that page when the item is clicked. Submenus will display dropdown menus when a visitor hovers over the item.

Links appear next to a blue link symbol in the Menu Builder, while SubMenus appear next to a folder image with green dropdown arrows.

However, if you have already created your Site Map, selecting the Copy from Site Map option can cut down the time spent creating menus.

copy-from-sitemap

When using the Copy from Site Map item type, you are able to Select a Department from your pre-made Site Map. Selecting one of the departments will automatically add the department, as well as links and subdepartments associated with that department.

choose-from-sitemap

For example, copying the Travel department from the Site Map will also add the Boys and Girls subdepartments along with their corresponding links.

Copy each department from the Site Map to the navigation menu options to save time manually adding link URLs and duplicating the Site Map structure.

Once the navigation menu has been saved, menu items will appear on your page as links and dropdowns according to the specifications that have been set in your Menu Builder.

finished-navigation

For more information on your website’s navigation and menu items contact Demosphere Support at support @ blog.demosphere.com!