How to customize the soket social networking event plug

Who is this for?

People responsible for maintaining the design of a business's web site where the business has a paid subscription to soket social networking services. These people will need to have an understanding of HTML and Style Sheets (CSS). Business itself will need an active social networking voice within soket to supply the social networking events to be displayed by the plug.

Note that this article's focus is on how to customize the socket social networking event plug. To understand how to add an event plug to your social networking voice in soket, please review the article about How to create a social event web site plug for your social event voice in soket. in the developer forum.

 

Customization of the soket social network event web site plug

soket allows for the social event network web site plug to be customized using soket tags (Data, Widgets, Interactive), styles sheets and HTML to better match the web site where it is to be displayed. This allows a business to maintain the look and feel of there web site while benefiting from direct display of their social networking events that are housed in soket.

 

How is the event plug edited for customization?

soket social event networking plug is edited within the Plug Settings page.

1. Login into the soket web application

2. Select the social networking voice you wish to maintain.

3. Click on the Manage text at the top of the page to reveal the drop down options and click on "Plugs".

soket social networking show events on website plug manager

 

4. Click on Edit for the plug you wish to customize and this will take you to the Plug Settings page.

soket social networking show events on website custom HTML and CSS styles

 

What can I customize using the Plug Settings page?

soket Plug Settings page has two types of customization.

1 - HTML and CSS code that allows you adjust in detail how the event content is displayed on your web site.

2 - Number of social networking events that are to be displayed.

 

How do I limit the number of events shown on my web page?

soket by default will show the next (based on time and date) social networking events that are to happen on initial web page load. If you have many events setup in soket, you may not want them all to appear on your web page at once. soket allows for this by giving you the option to specify how many events should be shown. Note: if you reduce the maximum number of events on a page below the number of events you can have in one day, those other events will not be shown.

You can limit the number of social networking events shown by three methods using the Plug Settings page (just remember to click on Save after any changes):

1 - You can specify a maximum number of events to be shown by entering a numeric  value in the "Up to maximum of events per page" text box and checking the radio button.

2 - You can limit how far out in the future soket displays events for by entering a numeric value in the "Events occurring in the next days" text box and checking the radio button.

3 - You can limit the events shown to either recurring events or non-recurring events by selecting one from the drop down list instead of All.

soket social networking limit number of events shown by events plug

 

Where do I customize the CSS for my plug?

Within the Plug Settings page, click on Edit Master CSS in the right navigation. This will then take you to a page where you can change the cascading style sheet for the plug.

modify CSS for soket social networking event plug to match your web site stylesheet

edit CSS for soket social networking event plug to match your web site stylesheet

 

Where do I modify what content is displayed?

soket social networking event plug breaks the content displayed by the plug into 3 groups:

1 - Master Data. Content that is displayed at the top (Master Header) and bottom (Master Footer) of the plug's content such as a special header or footer to say what kind of events are being listed on the web page.

2 - List Event Data. Content that is used to display a list of Events (List Events Summary (repeats)). Further refinement also allows for a specific header (List Events Header) and footer (List Events Footer) to be applied to the list content.

3 - Event Details. SIngle view of data content for an event. Used where the list event data is displayed in abbreviated form to use up less screen space so when a reader of the web page wants more details they can click on a plug link (behavior tag) and be presented with more details of the event.

Settings for content display is managed from the Plug Settings page. Just click on the data group you wish to modify.

 

Edit how social networking events are displayed to match web site

 

What are the soket data tags that I can use to show content?

soket event plug allows you to pick and choose which data tags you wish to display. These data tags would be placed in either the List Events Summary (repeats) and/or Event Details. Examples are provided in the table below of the HTML code that would be used to get a value to display.

  Data Tag   Description
 @eventstartenddaterange("dddd, MMM dd, yyyy")

Used if events can run over multiple days and the desire is to see this information on one line. Will show start and end date for an event. Will not show an end date if the end date is the same as the start date.

dddd – Day of the week

MMM – Month of the year (you can add another M to make MMMM which will give the full name of the month)

dd – date

yyyy - year

Example:

Date: <strong>@eventstartenddaterange("dddd, MMM dd, yyyy")</strong>

 @eventstartdatetime("dddd, MMM dd, yyyy")

Start date for an individual event.

dddd – Day of the week

MMM – Month of the year (you can add another M to make MMMM which will give the full name of the month)

dd – date

yyyy - year

Example:

 Date: <strong>@eventstartdatetime("dddd, MMM dd, yyyy")</strong>

 @eventstartdatetime("h:mm tt")

Start time for an individual event.

Note: arguments are case sensitive, use lowercase mm is minute an MM is month.

h – hour

mm – minute

tt – AM or PM

Example:

When: <strong>@eventstartdatetime("h:mm tt")</strong>

 @eventenddatetime("dddd, MMM dd, yyyy")

End date for an individual event. Used when event can go over multiple days.

dddd – Day of the week

MMM – Month of the year (you can add another M to make MMMM which will give the full name of the month)

dd – date

yyyy - year

Example:

to <strong>@eventenddatetime("dddd, MMM dd, yyyy")</strong>

 @eventenddatetime("h:mm tt")

End time for an individual event.

h – hour

mm – minute

tt – AM or PM

Example:

to <strong>@eventenddatetime("h:mm tt")</strong><br />

 @eventtitle

Title of an individual event.

Example:

title: @eventtitle()

 @eventdescription

Description of individual event.

Example:

<p>@eventdescription()</p>

 @eventaddress1

Address Line 1 of event – if address associated with the event.

Example:

address1: @eventaddress1()

 @eventaddress2

Address Line 2 of event – if address associated with the event.

Example:

address2: @eventaddress2()

 @eventcity

Address City of event – if address associated with the event.

Example:

city: @eventcity

 @eventstate

Address State of event – if address associated with the event.

Example:

state: @eventstate

 @eventzipcode

Address Zipcode of event – if address associated with the event.

Example:

zip: @eventzipcode

 @eventimageurl

URL of image associated with event – if an image has been attached to the event. Image size can also be specified so an image is created at the size desired.

('normal') - displays a HQ image

('thumbnail') - displays a small thumbnail image

height - sets height of image

width - sets width of image

mode - defines what happens if image does not meet size requirements

mode=pad - puts white space where the image does not fit to height and width specified

mode=crop - crops the image so that if fills the width and height specified

mode=stretch - stretches image to fit width and height specified

 

Example:

This example shows the HQ image with it being constrained to a width / height of 200px with any space being filled with white background.

 <img src="@eventimageurl('normal')?width=200&height=200&mode=pad" class="soket-details-image soket-round5" onError="this.style.display = 'none';" alt="" />

 

 @eventtypename

Type of Event.

Example:

Type: <strong>@eventtypename()</strong><br />

 @eventlocationname

 Name of location of event.

Example:

Location: <strong>@eventlocationname()</strong><br />

 

There are also interactive tags that work with the data tags

Interactive Tag   Description
@GroupEventHeader() Groups Events that have the same start date under the same date header. Coded into the List Events Summary.

Example:

<div @GroupEventHeader() class="soket-result-date-range soket-round5">@eventstartdatetime("dddd, MMM dd, yyyy")</div>

 @eventdetailclick()

Click event that will cause a refresh of the web page  to just show a single event. Allows the event list page to be more compact as the viewer can obtain additional information by viewing the single event detail. Coded into the List Events Summary.

See also - @backtoeventlistclick

Example:

 <a href="#" onclick="@eventdetailClick()" class="more-detail-event">

 @eventdetailurl()

URL link that will open up the plug host page with just a single event shown. Allows the event list page to be more compact as the viewer can obtain additional information by viewing the single event detail. Coded into the List Events Summary.

See also - @backtoeventlistclick

Example:

<a href="@eventdetailurl()" class="soket-btn light-grey" title="View full details of this event.">View Details</a><BR/>

 @backtoeventlistclick

Returns the user to the list of events after viewing an individual event in detail. Coded into the Event Details.

Example:

<a href="#" onClick="@backtoeventlistclick()" class="soket-btn light-grey soket-pull-left;" title="Go back to list of events.">Back to Events</a>

 

Can the viewers of my events web page share an event of interest with their other social networking apps when viewing it?

Yes, they will be able to share the event to multiple destinations by having the following widget "@sharewidget()" placed in either the List Events Summary and / or Event Details. When the contents of the plug is displayed, an icon for the widget will also be displayed which the user can select to share the event.

Widget   Description
@sharewidget Widget that allows viewers of a specific event to share via Facebook, Twitter etc.

Example:

@sharewidget()

share social networking events with other social networking applications such as FaceBook and Twitter

 

Can the viewers of my events web page get a map to an event?

 Yes, if the Event has been associated with an address by having the following widget "@mapthiswidget()" placed in either the List Events Summary and / or Event Details. When the contents of the plug is displayed, link text Map for the widget will also be displayed which the user can click to open up a map of the location of the event.

Widget   Description
@mapthiswidget Widget for viewing the location of a specific Event on a Google Map. Adds the word “Map” as a hyperlink that takes user to Google Map of event location.

Example:

@mapthiswidget()

 

Can the viewers of my events web page automatically copy an event to their calendars?

 Yes, by having the following widget "@addtocalendarclick()" placed in either the List Events Summary and / or Event Details. When the contents of the plug is displayed, an icon for the widget will also be displayed which the user can click to open up a pop up where the user can copy the event to their iCal / Outlook / Google calendars.

Widget   Description
@addtocalendarclick Widget that allows viewers of the event to add the event to a calendar of their chosing such as iCal, Outlook, Google Calendar.

Example:

<a href="#" onClick="@addtocalendarclick()" class="" style="padding:4px;" title="Save event to calendar."><img src="http://plugengine.soket.com/Content/images/btn-add-to-calendar.png"  /></a>
 

readers automatically add a social networking event to their calendar

 

How do viewers of my events web page select different dates to see events for those dates?

You can provide viewers of your social media events with two ways to do this.

Use the calendar navigation widget "@eventnavcalendar()" and a viewer can click on a date for any calendar month. This will give them a view of the events happening on that date and / or the next nearest future dates from the one selected.

Use the Next Page and Previous Page urls. They allow a viewer to page through your list of events.

These widgets are placed in either the List Events Header or List Events Footer as it only needs to appear once.

Widget   Description
@eventnavcalendar Stand alone function that allows users to select a start date on a GUI Calendar from which the list of events will be generated from.

Example:

@eventnavcalendar()

select different days to view social networking events for

 

@previouspageurl()

@nextpageurl()

Allows the user to page forward or backward through your site's social media event list.

NOTE: They will not be able to page back any further than current date.

Example:

<div class="soket-pagingcontrol soket-pull-left">
  <a href="@previouspageurl()"> « Previous</a>
</div>
<div class="soket-pagingcontrol soket-pull-right">
<a href="@nextpageurl()"> Next »</a>
</div>

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk