Advanced Website Customization

Advanced Website Customization

Adding a Facebook Feed to your Home Page

If you want to add a Facebook Feed to your website home page, first check your Facebook Privacy Settings to verify:
  1. it is set up as a public account
  2. you don't have any Country Restrictions set. Go to Settings at the top of your FB page, then General / Country Restrictions. Edit the setting to make the page visible to everyone.
Then, follow these steps:

Step 1 - Open 3 browser tabs




Tab A - You will add code to your site structure.
  1. Go to your Membership Toolkit account - ex. mypta.membershiptoolkit.com
  2. Go to Website / Structure / Edit Page Templates / Active Template: Dallas 
  3. Select "edit design"






Tab B - You will get the code you need. 
  1. Go to https://developers.facebook.com/docs/plugins/page-plugin
  2. Put your facebook link in the Facebook Page URL field
  3. Adjust the settings to your liking
  4. Select “Get Code”





Tab C - You will hook your “Facebook Feed page” up to your home page. 
  1. Again…go to your Membership Toolkit account - ex. mypta.membershiptoolkit.com
  2. Go to Website / Structure
  3. Find the Region "Content” and select “add block"
  4. Select "Facebook Page" from the drop down and click "add block"

If you want your Facebook Feed to be part of your Left Rail instead:
  1. Find the Region "Primary Rail" and select "add block"
  2. Select "Facebook Page" from the drop down and click "add block"



Step 2 - 

  1. Fill in the fields on the Block Settings tab.
  2. Be sure you copy/paste the URL for the Facebook page directly from your browser.
  3. If you are adding the feed to your left or right rail, it is recommended to use a smaller header.


Step 3 - 

  1. Copy the first half of the code (the code labeled JavaScript SDK) in Tab B
  2. Paste it in Tab A, (below the other code)
  3. Click “save”
  4. Click and drag the block to place it in the order you'd like it to present within the Region. Be sure to "save" again at the bottom of the page if you move the block around.


*To download a more detailed copy of this  article, see attachment.



*Due to Facebook security settings, the feed can only be seen by people who also have access to the Facebook page. If a user does not have access to view the Facebook page, the Facebook Feed will just be blank (it won't show up). They also have to be using the same browser to view your site that they are logged into Facebook with. (For example, if you are logged into Facebook in Internet Explorer, but your website in Chrome, you won't be able to see the Feed.)



Facebook Metadata

Facebook Metadata refers to how your website is portrayed on Facebook when your website is shared on Facebook (or your website is referred to in a post in Facebook).

If you don’t specify these items in your website code, Facebook will try to figure out what to use by grabbing the first image it can find on the web page you are referencing.  It will also try to determine the title and description by items on your webpage.  These images and items are typically not what you would expect and not what you want to show on a Facebook post.
 
You can place the Facebook metadata into the HTML Head Content portion of the site template.
  1. Go to Website / Structure / Edit Page Templates [button] / Edit Design [button, at the top]. 
  2. Paste the metadata HTML (see below - change for your information) into the "HTML Head Content" box (below anything that may be there). 
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your Description" />
<meta property="og:url"content="http://www.yoururl.com/" />
<meta property="og:image" content="https://yourimagelocation/" />






For the og:image, upload an image to your files.  You may have to play with the image size to get it right.  You can get a preview of what it will look like by going to the Facebook Debugger website at https://developers.facebook.com/tools/debug/ and entering your website domain as the url (the one you own, not the membershiptoolkit.com website).
 
Here is an example from the Facebook Debugger site using the website www.giftedmindsprosper.com:




Note: You can also add an image for any specific content page that will display on Facebook when that page is linked to.
  1. Go to Website / Content / select a page.
  2. Add/Edit the Story Image.

The resulting image displayed when linking to your site may vary as the image pulled depends on many factors (is the Metadata set up properly, is a story image defined, does the page require the user to be logged in, etc). You may also need to delete the cache on your browser if you're not getting the results you're expecting.

Meta Tags


Meta Tags are HTML elements that provide information about a webpage for search engines and website visitors. There are two elements that must be placed as tags in the <head> section of a HTML document.

1. Title Tags
  1. These are used to tell search engines and website visitors what any given page on your site is about in the most concise and accurate way possible.
  2. This title will then appear in various places around the web, including the tab in your web browser:
  3. The title will also likely be pulled in as the anchor text when sharing on other websites and social media channels

2. Meta Description
  1. This is the short paragraph of text placed in the HTML of a webpage that describes its content.
  2. The meta description will then appear under your page’s URL in the search results.
  3. This is also known as a snippet.



Membership Toolkit only offers meta tag ability in the page templates, so they will be the same meta tag data for all pages using that template (we don't offer a way to do this at the page level).

To change the meta tags for the templates:
  1. Go to Website / Structure / Edit Page Templates.
  2. Pick the template you want to change (or apply your changes to all of them). The template with a check mark beside it is your default template.
  3. Click the "edit page" button.


  1. In the HTML Head Content section, include something like the following:  <meta name="description" content="Here is a precise description of my awesome webpage.">


Adding a Twitter Timeline to a Website Page or Structure Block

If you want to add a Twitter Timeline to a Website Content Page or a Block in your Website Structure, follow these steps:

Step 1 - Get the HTML code for your Twitter Timeline

Open a browser window and go to the Twitter support page that explains how to get the HTML code for your Twitter Timeline at https://support.twitter.com/articles/20170071. The directions should look something like the image below. Leave this window open so you can copy the code later.



  1. Or, you can just try replacing "Your Twitter Name" in this HTML code (in blue).  This is NOT customized for width, height, etc.:
<p><a class="twitter-timeline" href="https://twitter.com/YOURTWITTERNAME" data-tweet-limit="5">Tweets by Your Twitter Name</a></p>
<script src="//platform.twitter.com/widgets.js"></script>
<p> </p>

Step 2 - Add the HTML code to your Website Content Page or Structure Block


To add this HTML code to a web page - In a different browser window, go to Website / Pages and select the page you want to add the Twitter Timeline to. Open this page for editing.
  1. In the Content Editor, click on the source code button that looks like <>.



  1. Copy/paste the HTML code from the Twitter Timeline browser window into the source code in the spot at which you want it to show up.



  1. Click "OK" to return to the Content Editor. NOTE: You will not see the actual Twitter Timeline in the Content Editor. You will need to open the page on your website to check if the Twitter Timeline code is working properly.
  2. Click Save at the bottom of the page.
  3. Go to your Website Page to check the Twitter Timeline.

To add this HTML code to a Structure Block - Go to Website / Structure, and then go to the Region where you want to add the timeline.
  1. Select "add block" and then select "Twitter Timeline" from the drop down.
  2. Click "add block"
  3. Fill in the fields on the Block Settings tab.
  4. Be sure you copy/paste the URL for the Twitter Timeline directly from your browser.

Embedding a Flickr Album or Slideshow

To Embed a Flickr Album:

1. Log in to Flickr.
2. Go to your Albums.  Hover over the album you want to embed and click on the arrow for “Share this album”.



3. Go to the “embed” tab. Copy the entire line of HTML code.





4. Go to your Membership Toolkit website.

5. Open and edit the Content Page where you want to add the album.

6. Click on the Source Code button in Content Body, and paste that entire line of HTML code into the Source Code.

7. Click "OK" to exit the source code window.

8. Save the page changes.


To Embed a Flickr Slideshow:


1. Log into Flickr.

2. Go to Photostream and copy the URL in the URL address box. It will look something like https://www.flickr.com/photos/145307430@N02/.  Note: you must have photos in your Photostream to create the slideshow.  You do this by making photos in your Camera Roll “Public”.


4. Paste the URL you copied from your Photostream (step 2) into the “URL of the user”. 

5. Change the other settings as desired. 

6. Click on the “Create Slideshow” button. You should see an example of your slideshow appear in the “Preview Slideshow” area.

7. Copy the entire HTML code.

8. Go to your MTK website.

9. Open and edit the Content Page where you want to add the album.

10. Click on the Source Code button in Content Body, and paste that entire line of HTML code into the Source Code.


11. Click "OK" to exit the source code window.

12. Save the page changes.

Adding a Slideshow of Pictures (Rotating Images) from the File Cabinet


You can also create a slideshow of rotating pictures from images you already have saved in your File Cabinet.
  1. Go to Website / Structure and find the Region where you want to add the slideshow.
  2. Select "add block" and then select "Image Slider" from the drop down.
  3. Click "add block."
  4. Title your block and add your images on the Block Settings tab.
  5. You will also have the option to add in a URL where users will be directed if they click an image in the slideshow.
  6. Select the type of animation for your slideshow, the arrow style and color, and the speed of the slideshow.
  7. If you want the slideshow to play automatically, you will need to enable the autoplay feature and set the number of seconds.

Adding a Tooltip to a Graphic or Text


A Tooltip is a small "hover box" that pops up when you use your mouse to "hover" over certain text or graphics. This is useful when you don't want the user to leave the page by following the link, but just receive brief additional information.

To add a Tooltip:
  1. On a Content Page, use the "ESC" key on your keyboard to edit the page and go to the Content Body Editor.
  2. Select/highlight the link or graphic where you want to add the Tooltip.  Be sure the selection is set up as a link.
  3. Click the "Insert/edit link" button in the toolbar.
  4. In the "Title" field, add the text you want to "pop up" when the user hovers the link (before clicking on it).



Interactive Buttons

If you want to create your own buttons that are interactive, you will need to edit the source code of the content page.

This is a class on the hyperlink tag in HTML (ex: <a href="www.membershiptoolkit.com">Click Here</a>). You have to add class="read-btn" to the link text. You will add in the <a class="read-btn" before the hyperlink or words and you will add in </a> after the wording for the end of the button.
  1. Example:  <a class="read-btn" href="https://membershiptoolkit.com/Open_Forms">Become a member!</a>

To re-style hyperlinked text to look like a button:
  1. First, go to the Content Editor of the Content Page and add in the text and hyperlink for what will be included in the button.
  2. Then, in the Content Editor, select the Source Code button on the right side of the editor.
  3. Find the hyperlink tag (<a>).
  4. Add the CSS: class="read-btn"
  5. The CSS class "read-btn" styles the hyperlink to look like a button.
Example: <a class="read-btn" href=https://ptaschooldemo.membershiptoolkit.com/Calendar">Full Calendar</a>







Customizing the CSS for Font Families


If you want to change the font family on your site, the following CSS is for all the places you might find the font family.

Please Note: This is in the Custom CSS and NOT the Master CSS. Custom CSS overrides the original instructions programmed for your site. If you do not know what this is, please submit a help ticket and someone from our team will be happy to assist you.

If you want to change the font family on your site, the following CSS is for all the places you might find the font family.
 
IMPORTANT NOTE: This is in the Custom CSS and NOT the Master CSS. Custom CSS overrides the original instructions programmed for your site. If you do not know what this is, please submit a help ticket and someone from our team will be happy to assist you.
 
 
/* change font */
#mtk-pagewrapper *:not(.icon) {
  font-family: 'Questrial', sans-serif !important;
}

CSS to Customize the Text Color on Preview Blocks


You can change the background color of a Preview Block by going to one of two places, depending on which template you are using.
  1. Website / Design Settings / Navigation tab
  2. Website / Design Settings / General tab

If you want to change the color of the text in the Preview Block, add the following to the Custom CSS by going to Website / CSS. (Custom CSS overrides the original instructions programmed for your site.)
  1. Add it to the next line on the bottom.
  2. Change the Color to your desired hex color.
/* Preview Blocks */
.content-box > h4{
  color: #FFFFFF;
  font-size: 1.5em;
  font-weight: bold;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: center;
  margin: 10px 0px;
  background-color: {{block_preview_bg_color}};
  padding: 10px;
  }



    • Related Articles

    • Files, Images, and Documents

      It is VERY beneficial to keep all of your picture and document files organized from the start. We recommend setting up folders to store your images and document files. It's important to note that if you reorganize your images after they've been used ...

    • Content Preview Blocks

      Content Preview Blocks provide a defined way of breaking up content so that you can present a small amount of information and then link to the the full story, similar to a blog. Content Preview Blocks are different than blogs because you are in full ...

    • Customizing Your Website Design

      Customize Your Favicon The favicon is the graphic symbol that shows up in the internet browser tab. Step 1 - Create your Favicon File must be either PNG, GIF or ICO (no JPG) and must be 16x16 or 32x32 at either 8- or 16-bit color depth. Other file ...

    • Website Basics

      Five Things to Do Before You Start on Your Website Membership Toolkit makes it easy to get your website started.  Here are five things you should collect before you get started. 1. Logo - Instantly brand your pages with a logo. 2. Upcoming Events - A ...

    • Customizing Content Pages

      Single vs. Double Line Spacing Using the "return" or "enter" key will give you a double space because the system recognizes it as a paragraph break. For single spacing, use shift+return. Customizing Colors Helpful Links for Choosing Colors in RGB and ...