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.

Coaches: Send Invitations for Recurring Events!

coaches recurring event

Coaches: The moment you’ve been waiting for! We’ve listened to your feedback and we’re happy to announce a new feature for coaches using the Demosphere TeamNet app to communicate with their teams.

Coaches can now send invitations for recurring events. This is a great option for events like regular weekly practices.

Additionally, your members can now update their availability status for all events, including recurring events, on behalf of themselves and their child.

Now, when you are creating or editing a recurring event, you’ll see the familiar “Invitees” field to invite any/all members of the team to the event:

 

Selected invitees will get an invitation email and a push notification on their device upon saving the event. Invited members can then set their availability for all or each individual event from the team view after signing in to Demosphere TeamNet app. Parents can also update the availability for their child from their own dashboard.

NOTE: Remember to update your TeamNet mobile app via the App Store or Google Play to ensure you and your members can take advantage of this new feature!

We value your feedback! Please comment below with any feedback you have about this feature, or any additional features you’d like to see added!

DC SCORES Wins Big at United Expressions Benefit

Demosphere’s Kris Baker proudly attended the United Expressions benefit event this week, gathering for a special evening to bring art and soccer together in support of DC SCORES.

DC SCORES

The DC chapter of America Scores is a non-profit organization which serves kids in need through programs that build confidence and skills to succeed on the playing field, in the classroom, and in life. Through a unique combination of soccer, poetry/spoken word, and service-learning, the organization helps over 2,200 kids in 55 schools develop into healthy teens and young adults.

UNITED EXPRESSIONS

The evening, which took place at the Hyphen Galley in DC, was well attended by members of DC United, DC SCORES, and friends and family of artists John Brendan Guinan and DC United’s Head Coach, Ben Olsen. Both artists graciously donated several pieces of artwork, with proceeds going toward DC SCORES in anticipation of contributing to a meaningful difference in thousands of kids’ lives.

THE ART

Several DC SCORES members performed original poetry for the crowd in between mingling with the artists, DC United players, browsing works of art and enjoying the delicious food donated by Mindful Restaurant Group. It was truly an amazing evening bringing two seemingly uncommon worlds together: Soccer and Art.

COMMUNITY

Demosphere is extremely proud to be a supporter of DC SCORES to help the local community in support of the development of our youth through soccer, poetry, leadership and more. We encourage you to consider contributing to the organization, or to a similar affiliate in your area. If you have a similar organization in your area that you’d like to share, please post your comments below.

Part of Demosphere’s mission involves providing continuous support of the youth sports community, which we have been contributing since our beginning almost 27 years ago. Our goal in this realm is to help build community connections by sharing ideas and investing in the leaders of tomorrow.

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.

 

Miles Baker Celebrates 20 Years at Demosphere!

Sunday, April 30th, 2017, marks the 20th work anniversary of Miles Baker, Senior Vice President of Product Development for Demosphere. Members of the Demosphere team gathered today for a celebratory lunch in honor of this amazing milestone.

Over the years, Miles has been a part of many significant achievements, contributing immensely to the success of Demosphere. One of his most memorable experiences in the early years was his involvement with the FIFA technology task force during World Cup ’98 in France. Miles and team were responsible for attending World Cup matches and updating fifa.com with scores and media articles – what an amazing opportunity!

In those early years, Miles also worked on the design for the first Manchester United website and helped to take the Washington Soccer Net newspaper from print to online – one of the pioneering sources for soccer news in the U.S.!

Continuing into the next two decades, Miles contributed countless revolutionary ideas to the evolution of Demosphere’s products and services, which have been benefiting thousands of youth sports organizations for the last 20 years and counting. Initially responsible for creating all client website designs, Miles crafted beautiful graphics for many first-ever organizational websites, from internationally-known U.S. Soccer to local clubs like Arundel Soccer.

His initial work on Demosphere’s WebWriter® product delivered one of the first online content management systems available, providing an easy way for users to update their own site content on the web – something previously handled via fax requests and static content updates!

Baker also designed “elements”, the strategy and framework behind Demosphere’s integrated League and Tournament management solution that has been used by many organizations over the years including U.S. Soccer Development Academy, Elite Clubs National League, United Soccer League, and handfuls of other national and regional soccer leagues across the country.

However, when asked about his greatest accomplishment, Miles shared, “I’m most proud of what our team has created with our new platform. Building a visionary solution based on decades of experience and user feedback has been tremendously rewarding. I am very fortunate to work with such a pioneering team as we continue to broaden our extensive platform, and maintain our position as a provider of leading-edge solutions for youth sports organizations around the globe.”

The entire Demosphere team expresses thanks and congratulations to Miles Baker for his many accomplishments over the years, and we most certainly look forward to many, many more!