Poker Affiliate Solutions Forum
  • Register
  • Help

Poker Affiliate News, Tips and Resources Blog

View RSS Feed

Design Team

  1. Add Chat Support to a PAS Site with Zopim

    by
    mark_s
    , 03-28-2011 at 10:45 PM
    Get Zopim Chat Running on your PAS Site
    Zopim is a free Live Chat software which allows you to easily chat with your website visitors. There is no software to install, only a snippet of javascript needs to be pasted on your PAS site template file. You can be up and running within 5 minutes!

    Setup

    1. Signup
    Signup at Zopim



    2. Confirmation Email
    You will receive a confirmation email with login info and a snippet of code to insert on your website

    3. Login to PAS Site
    Login to the PAS Admin, go to “Content > Main CMS”

    4. Open Site Template
    Open “layout > layout.html” file

    5. Paste Zopim Snippet
    Paste the snippet you received in your confirmation email after the opening body tag
    PHP Code:
    </head>
    <    body>
    ZOPIM SNIPPIT HERE 
    6. Login to Zopim Dashboard
    Login at Live Chat Dashboard. Select support status (Online, Away, Appear Offline)

    7. Test Creating a Chat in another browser
    Now that you are logged in, to test you can start a chat using a different browser.



    8. Check Zopim Admin
    After a user starts a chat, it will appear in the right column. Click on it to begin.



    It will take you to the following screen.



    9. Chat
    Give support as needed. Keep an eye on any new pending Chats in the right column.


    To update Email notifications or update Display Name
    1. Login to Zopim, click on “Settings”

    2. Click on “Profile & Email”



    3. You can change the email notification settings as well as update your Display name here.


    To update Chat box positon or toggle whether Chat box is displayed when offline
    1. Login to Zopim, click on “Settings”

    2. Click on “Customize Widget”.



    3. Make changes as needed

    4. Click “Save Widget Settings”
    Categories
    ‎ Tech Team , ‎ Design Team , ‎ Marketing Services , ‎ Support Team
    Comments 3 Comments

  2. "Fan Only" content on your Facebook Page

    by
    mark_s
    , 02-21-2011 at 02:26 PM
    Last time I did a tutorial on how to create a Facebook page there was a question in the comments about how to display content based on “Like” status. It turns out it’s fairly easy if you know what to look out for. Here’s how:

    Example page here

    1. Create a Custom Tab, as instructed on my post “How to Create a Facebook Fan Page”.



    Note: if you already created one, open it and click “Add another FBML box”. This will create another page with identical content. It may seem like a page hasn’t been created but most likely it has.

    2. Enter some code to test. The most basic code you’ll need is this:
    PHP Code:
    <div style="width:520px; margin:0 ; padding:0; position:relative;">
    <    fb:visible-to-connection>
    This is for users who have “Liked” the page.
    <    fb:else>
    <    div style="width:520px;position:absolute; top:0; left:0;">
    This is for users who have NOT “Liked” your page.
    </    div>
    </    fb:else>
    </    fb:visible-to-connection>
    </    div> 
    Notes on above code:
    - Use the div structure. It contains a hack for a bug in Facebook which pushes down content for visitors who haven’t like your page yet. This code uses absolute positioning to bring everything to the top. Additional code can be added as needed within these divs.
    - Note the logic tags and be sure not to delete while editing content

    If you want to use the same code used in the example as here is that code:
    PHP Code:
    <div style="width:520px; margin:0 ; padding:0; position:relative;">
    <    fb:visible-to-connection>
    <    img src="http://www.pokeraffiliatesolutions.com/forum/mark/facebook/facebook-liked.jpg"/>
    <    p>This is the exclusive content. Isn't it amazing?</p>
    <p>Suspendisse placerat pretium blandit. Nullam aliquam sodales dolor, eu aliquet lectus gravida nec. Nulla in orci fringilla quam scelerisque feugiat. Morbi lacinia libero nec ligula ornare egestas. Nulla facilisi. Suspendisse nisi enim, rutrum at varius vel, vulputate sit amet lorem. Suspendisse lobortis, ligula at lacinia luctus, tortor lacus semper velit, eu auctor metus quam id dui. Aenean sollicitudin sagittis mi ut sodales. Vivamus eleifend lacinia purus sed ullamcorper. Vivamus dignissim viverra odio ut sollicitudin. Morbi eu vestibulum est. Aenean euismod ullamcorper risus, eget mollis lacus suscipit at. Morbi non tellus tellus. Nullam molestie est nec velit pharetra ut tempor turpis tempus. Aenean quis quam turpis. </p>
    <fb:else>
    <div style="width:520px;position:absolute; top:0; left:0;">
    <p>Click <b>Like</b>, above to view exclusive content. You won'    t regret it.</p>
    <    img src="http://www.pokeraffiliatesolutions.com/forum/mark/facebook/facebook-likeus.jpg"/>
    </    div>
    </    fb:else>
    </    fb:visible-to-connection>
    </    div> 
    IMPORTANT Notes on Testing
    If the Admin views the Fan page, it won’t look right and the logic appears not to work. In order to test your new conditional content properly, you will to do the following.

    1. Create or use a 2nd Facebook personal profile account which is NOT an Admin of the fan page
    2. Use a separate browser (IE, Firefox, Chrome, etc) to login with this 2nd account
    3. Find the fan page with the test account above and “Like”/”Unlike” as needed. “Unlike” is available on each fan page in the lower area of the left column.
    Categories
    ‎ Design Team , ‎ Marketing Services
    Comments 1 Comment

  3. 5 Reasons to use jQuery

    by
    mark_s
    , 12-03-2010 at 06:30 PM

    Currently, the most popular Javascript framework for designers and developers is jQuery. It is used by countless websites (including every PAS publisher site). Here are 5 reasons (part II with 5 MORE reasons here) to use it:

    1. Cross Browser Compatibility

    Supports: IE6+, Firefox 2+, Safari 3+, Chrome, Opera 9+
    With the variety of browsers and their related quirks, Javascript can quickly get frustrating. With jQuery, these inconsistencies are abstracted away and you can focus on the task at hand with a certain amount of confidence that it WILL work across browsers. This is much more rewarding than spending extra time debugging Javascript in Internet Explorer.

    2. Documentation

    Documentation Main Page: here
    It doesn’t matter how great some piece of code is if you have no idea how to use it. The jQuery team addresses this with extensive Documentation. It is packed with useful sections: Tutorials, plugin repository, reference library, active forum and FAQ. Also, they have done a nice job organizing the site. Given the vast amount of information, it is still easy to navigate.

    3. Lightweight Footprint

    Size of 1.2.6 used on PAS sites: 30.3 KB
    On most sites, an additional 30KB will not drastically affect page load. Also, developers have the option of accessing the library via Google:
    PHP Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
    This not only can improve page loads, but reduces server load. Since many sites use this method, users may already have the file cached.

    4. Plug-ins: Extensible & Modular
    Not only are there a LOT of plugins but there are a LOT of EXCELLENT plugins which I use frequently. Whether you need a banner rotator, modal window (for popups) or a dropdown menu, there are a variety of solutions the community has created. Many of these plugins have options you can easily change without hacking the core plugin, very nice indeed.

    The way that these plugins add functionality via modular design is one big reason jQuery is so great. It allows you to load the basic library and progressively add functionality with plugins as needed. This reduces “code bloat” which slows page load times. Use only the code you need and no more.

    5. It’s FREE
    Free as in beer AND the freedom to edit/modify. Need I say more?

    Updated 12-22-2010 at 04:20 PM by TimPAS

    Categories
    ‎ Design Team
    Attached Thumbnails Attached Thumbnails Email Addresses-jquery-logo.jpg  
    Comments 0 Comments

  4. 5 Great Uses for the Web Developer Toolbar

    by
    mark_s
    , 11-15-2010 at 09:13 PM

    In this post I will share some of the ways I use Web Developer Toolbar: an extension/plugin which is available on both Chrome and Firefox. This is a great free tool for any designer/developer.

    1. Preview Changes with Live CSS edits
    CSS > Edit CSS

    Select the tab for the stylesheet you want to edit and start adding/changing/removing styles. Changes will appear live on your site. This is particularly useful when tweaking margins, padding and widths since you instantly can see the effects of your changes.

    example background color change:




    2. Quickly Disable CSS/Images/Javascript
    Disable CSS
    CSS > Disable Styles > All Styles
    Disable Images
    Images > Disable Images > All Images
    Disable Javascript
    Disable > Disable Javascript > All Javascript

    These items are useful to ensure your site 'degrades gracefully'. Does it hold up without your stylesheet? Without Javascript? You never know what device, platform, or random error might be occuring so it's good to keep things bulletproof. It also helps to see a site site the same way a search engine spider does.

    3. Check Alignment
    Miscellaneous > Display Line Guides

    Don't guess if elements are horizontally or vertically aligned; use this tool be 100% certain.




    4. Take Measurements
    Miscellaneous > Display Ruler

    Works well for roughing out general dimensions for new banners, content boxes, etc.




    5. Quickly Disable Browser Cache
    Disable > Disable Cache

    When you're making updates and you want see the latest updates immediately without having to hit F5 multiple times. I leave this option on since hardly an hour goes by where I'm not making an update.
    Categories
    ‎ Design Team
    Comments 0 Comments

  5. Copy/Paste Tutorial: Display Rakeback Offers By Network

    by
    mark_s
    , 10-08-2010 at 05:44 PM
    This week I've got another quick Copy/Paste Tutorial to share with PAS publishers. This time it includes a very new feature which allows offers to be displayed by network.


    Example site here

    Steps:
    1. Upload 2 background image to your rakeback site Images:
    (right click, "Save to Desktop")

    (right click, "Save to Desktop")

    2. Open layout.html, paste the following in the 'leftside' or 'rightside' sidebar:
    &lt;div class="nav_offers sidebox" id="nav_rakeback_offers"&gt;
    &lt;h6&gt;Rakeback Offers&lt;/h6&gt;
    &lt;div class="inner"&gt;

    {% for network in rakeback_offers_by_network %}
    &lt;div class="offer-heading"&gt;{{ network.name }} Network&lt;/div&gt;
    {% for offer in network.offers %}

    &lt;a class="offer" href="{{ offer.review_page }}"&gt;
    &lt;img class="room-icon" src="{{ tld }}/images/icons/icon_{{ offer.image_id }}.gif" alt="icon" /&gt;
    &lt;span class="room_name"&gt;{{ offer.name }}&lt;/span&gt;
    &lt;span class="amount"&gt;{{ offer.reward }}&lt;/span&gt;
    &lt;/a&gt;

    {% endfor %}
    {% endfor %}

    &lt;/div&gt;&lt;!-- end inner --&gt;
    &lt;/div&gt;&lt;!-- end pas_nav_offers --&gt;

    &lt;div class="nav_offers sidebox" id="nav_bonus_offers"&gt;
    &lt;h6&gt;Bonus Offers&lt;/h6&gt;
    &lt;div class="inner"&gt;

    {% for network in bonus_offers_by_network %}
    &lt;div class="offer-heading"&gt;{{ network.name }} Network&lt;/div&gt;
    {% for offer in network.offers %}

    &lt;a class="offer" href="{{ offer.review_page }}"&gt;
    &lt;img class="room-icon" src="{{ tld }}/images/icons/icon_{{ offer.image_id }}.gif" alt="icon" /&gt;
    &lt;span class="room_name"&gt;{{ offer.name }}&lt;/span&gt;
    &lt;span class="amount"&gt;{{ offer.reward }}&lt;/span&gt;
    &lt;/a&gt;

    {% endfor %}
    {% endfor %}
    &lt;/div&gt;&lt;!-- end inner --&gt;
    &lt;/div&gt;&lt;!-- end pas_nav_offers --&gt;
    3. Open theme.css and paste the following:
    /* SIDEBOX - GENERAL */
    .sidebox {
    font-size: 12px;
    text-align: left;
    color: #000;
    border: 1px solid #ccc;
    border-bottom: medium none;
    overflow:hidden;
    width:190px;
    margin: 0 0 15px 0;
    }

    .sidebox h6 {
    color: #147dc0;
    text-align: left;
    text-indent:5px;
    font-weight: bold;
    font-size: 12px;
    background:url({{ image_dir }}/bg-sidebox-heading.jpg) repeat-x 0 0;
    padding: 8px 3px;
    margin:0;
    border-bottom:1px solid #ccc;
    }

    /* SIDEBOX - NAV OFFERS */
    .sidebox .inner {
    overflow:hidden;
    }
    .nav_offers a {
    background:url({{ image_dir }}/bg-sidebox.jpg) repeat-x 0 1px;
    border-bottom:1px solid #ccc;
    color:#000;
    font-weight:bold;
    display:block;
    cursor: pointer;
    text-decoration:none;
    float:left;
    width:190px;
    height:36px;
    line-height:36px;
    }
    .nav_offers a:hover {
    color: #147DC0;
    background: #f0f0f0;
    }
    .nav_offers img {
    width:28px;
    }
    .room-icon {
    float:left;
    padding:4px 6px 0px 4px;
    }
    .room_name {
    float:left;
    width:100px;
    }
    .amount {
    color:#147DC0;
    font-size:14px;
    float:right;
    width:36px;
    font-weight:bold;
    }
    #nav_bonus_offers a {
    line-height:15px;
    }
    #nav_bonus_offers .room_name {
    width:85px;
    padding:5px 0 0 3px;
    }
    #nav_bonus_offers .amount {
    font-size:12px;
    width:110px;
    float:left;
    padding:0 0 0 3px;
    }
    .offer-heading {/** Styles Heading with Network Name **/
    border-top:1px solid #FFFFFF;
    float:left;
    width:187px;
    background:#c9c9c9;
    padding:3px 3px 3px 0;
    color:#222;
    font-weight:bold;
    text-align:right;
    }
    4. It should now appear on your site.

    Notes:
    - Ordering offers within the CMS will still work. Be sure ALL offers within a network are moved to ensure correct positioning.
    - Example is for rakeback offers AND bonus offers
    - CSS is commented to help with any adjustments that may be needed but feel free post questions/issues
    - For more on the new logic/tokens, see Jose's post here
    Categories
    ‎ Design Team
    Comments 0 Comments
Page 1 of 2 12 LastLast