Forums

[resolved] wpbook page layout (22 posts)

  1. martoccia
    Member
    Posted 9 months ago #

    Hi,
    I just installed this great plugin. Everything is fine, but I'd like to customize the page on facebook. Editing the index.php in the plugin / theme folder I changed the content to the_exerpt, and looks better. But does anyone know how to put the first image of every post in the exerpt, and how to show only posts from specific categories?
    If you wanna chek my page out is here http://apps.facebook.com/sportbrain/

    ciao!

    M.

  2. gappiah
    Member
    Posted 9 months ago #

    I'm not a coder, so I can only point you to a plugin that I use:

    Thumbnail For Exerpt: searches the post for the first image.
    http://wordpress.org/extend/plugins/thumbnail-for-excerpts/

    NOTE: Only caveat with this plugin is that the image must be local. There is another plugin that works with external images as well, but I can't find it right now.

    Hope that helps.

    ==
    George Appiah

  3. martoccia
    Member
    Posted 9 months ago #

    Thank you for your answer, I took a look on that plugin and it seems to add the image everywere there is an exerpt... but I would like to add the images only on the exerpts on facebook page. I don't know why but I don't find any discussions about costumization of this plugin...I've been searching the web all day!

  4. BandonRandon
    Member
    Posted 9 months ago #

    Hello Martoccia,

    I'm one of the Developers of WPBook. This is still a relatively new plugin we just released version 1.0 about a month ago. Also, this post is in instillation instead of plugins/hacks i just happen to see it by random.

    I'm assuming that the plugin adds a hook to the post to get the image. The easiest way to do what you'r`e trying to do is wrap a "if facebook" tag around the file. Try this, add:

    if (isset($_SERVER["HTTP_USER_AGENT"])) {
    
    		$is_facebook = "false";
    
    	}
    
    	if (isset($_GET['fb_sig_in_iframe']) || isset($_GET['fb_force_mode'])) {  // this just checks a simple thing
    
    		$is_facebook= "true";
    
    	}
    
    if ($is_facebook == "true") {

    to the top of the plugin then add a closing } at the end of the plugin.

    Let me know if that works for your.

    Brandon

  5. martoccia
    Member
    Posted 8 months ago #

    I Bandon, thank you for your answer. Where should I put that code, in the plugin file? I facing many problem customizing the layout, for example of the square "most recent posts" in the profile page because of I have to wait a lot to see my changes...facebook cache is very slow to update!

  6. martoccia
    Member
    Posted 8 months ago #

    Ah... I have done a translation in italian of the plugin, if you wanna check it out look here http://apps.facebook.com/sportbrain/ , if could be usefull to someone I can post it!

  7. martoccia
    Member
    Posted 8 months ago #

    ok... I tried the way you told me and works good after adding the code you posted.
    I'm trying to get a better layout in the "recent_posts.php, for example put a little icon instead of the bullets (is a bullet list). Any idea about how to get it? In the default way is not very appealing... I need to get the user's attencion!
    ;) M.

  8. BandonRandon
    Member
    Posted 8 months ago #

    Glad that worked! Can you do me a favor and mark this thread resolved? this will help others find the answer if they have a similar question.

    With regards to the translation. Did you just manually translate in the theme? I'm thinking about re-working the plugin to contain "labels" for the phrases such as "invite" and "view post on" then having a languages folder under themes. If this is something we decide to do I may ask you to take on the Italian translation.

    With regards to your question about the recent post list styling. You'll find inside the theme folder the "recent_post.php" inside this you will find

    <ul>
    <?php echo wp_recent_posts(5); ?>
    </ul>

    i would suggest you give the
    <ul> a css class or whatever and then in the css style the
    <li> or even the
    <ul> to whatever you want. You can google css list styling and this will give you instructions on how to ad images as li. Here is a basic page on li styling http://www.echoecho.com/csslists.htm

    As a quick aside the best place to get help for our plugin is the google group. The group can be found at http://groups.google.com/group/scholarpress-dev Feel free to post there instead of here. You are also welcome to check here i just know myself for one checks the google group more often.

    Brandon

  9. martoccia
    Member
    Posted 8 months ago #

    Thank you Badon,
    yes I just translated inside the code... I would be glad to be usefull to you!

    For the image in the bulleted list in recent_post.php... I'm very very bad in css styling... so could you help me to figure out how to do it? I know that is very easy...but I'm trying since hours and I don't get it!

    Anyway thank you very much... I will mark this post as resolved later!

    M.

  10. BandonRandon
    Member
    Posted 8 months ago #

    What do you want to do with the "recent post" list? Add an image bullet? at a different style of bullet? what you are trying to do very much determines the solution.

    Brandon

  11. martoccia
    Member
    Posted 8 months ago #

    Yes I want to replace the bullets with a little image gif (a red apple) to make it more appealing! I'm sorry but I tried very hard and I don't get it!

  12. martoccia
    Member
    Posted 8 months ago #

    Ah, and maybe you should think about giving the possibility to show only posts from a specific category (or categories)... ;)

  13. martoccia
    Member
    Posted 8 months ago #

    Ok one more thing... (eheh), the add to profile button in the top of the app page, is bad shown, in my app comes in italian "Aggoingi al tuo profilo" and comes in two lines, but the second line is only partially shown... do you know how to fix it?

    M.

  14. martoccia
    Member
    Posted 8 months ago #

    If I change my language in facebook settings from Italian to English, The button "Add to Profile" is shown ok, but if my settings are in italian the test is "Aggiungi al tuo profilo", and goes in 2 lines and doesn't show correctly....

  15. martoccia
    Member
    Posted 8 months ago #

    Hey Brandon! ;) I don0t wanna boring you!

  16. BandonRandon
    Member
    Posted 8 months ago #

    Martoccia,

    Although I do donate a lot of time and energy into wpbook and wordpress I do have other obligations therefore if I don't respond right away it's not because your questions not important. Please remember that support on here is free and I'm willing to help but please be patient.

    To answer your bullet questions you'll need to add a bit of styling to your css. I added the following to wpbook/themes/default/style.css:

    ul.apple {
    list-style-image: url(CircleBullet.gif);
    list-style-type: none;
    }

    where CircleBullet.gif is this is the name of your image which for simplicity I placed inside of the default folder.

    Next add the class of apples to the <ul> that is started before the recent post. This will be either in themes recent_post.php (wpbook prior to 1.2) or in index.php (v 1.2 on) that would make that bit of code look like this:

    <ul class="apple">
    <?php wp_recent_posts(10); ?>
    </ul>

    you can name the class anything you like but it should be a unique name I choose apple for example purpose.

    We are currently working on adding categories and tags to wpbook for now you can style them just like in any other theme by using the Template_Tags for wordpress (http://codex.wordpress.org/Template_Tags)

    The "Add to Profile" button can't be customized and is set by the users facebook language. This is a feature of Facebook and uses FBML look at the facebook resource here for more info on this tag: http://wiki.developers.facebook.com/index.php/Fb:add-section-button

    Hope this helps.

  17. martoccia
    Member
    Posted 8 months ago #

    Thank you Brandon, you're very gently. I know is not a must to answer and I really thank you for that.
    I'll try with your new tips, the only thing is not very clear is if I must type all the path to the image here (list-style-image: url(all url here or just image name???); ) or just the image name and put it in the folder wpbook/theme/default

    You are doing a great job!

  18. martoccia
    Member
    Posted 8 months ago #

    Ok, I tried your tips and works perfect in the app page. In the profile box not, I tried also steping back to the 1.1.1 version, but still have the doths bullets, maybe I think in recent-posts.php the stylesheet is not recalled... I put this in that file:

    <?php
    
    // need wordpress context to get 5 recent posts
    
    include_once('../../../../wp-blog-header.php');
    
    // also need some config here
    
    $wpbookOptions = get_option('wpbookAdminOptions');
    
    if (!empty($wpbookOptions)) {
    
    	foreach ($wpbookOptions as $key => $option)
    
    	$wpbookAdminOptions[$key] = $option;
    
    }
    
    $app_url = $wpbookAdminOptions['fb_app_url'];
    
    $app_name = $wpbookAdminOptions['fb_app_name']; 
    
      // get the application name from the wpbook settings. 
    
    ?>	
    
    <h3><a href="http://www.sportbrain.it/"><img border="0" img class="alignleft size-full wp-image-382" title="SportBrain.it" src="http://www.sportbrain.it/wp-content/plugins/wpbook/theme/sportbrain_piccolo.gif" alt="SportBrain.it" /></a></h3>
    
    <div class="wpbook_recent_posts">
    
    <ul class="apple">
    
    <?php echo wp_recent_posts(5); ?>
    
    </ul>
    
    </div>

    If you have any suggestion... I'll be keen! (and obviously patience!!;)

  19. BandonRandon
    Member
    Posted 8 months ago #

    Martoccia,

    One of the other developers handles the code for the profile box so I may ask him to take a look at styling the profile box. I believe this was handled by calling the "recent_post.php" file in versions prior to 1.2. However, with the 1.2 release it was moved to the config.php file that is contained inside the themes folder. I'm not sure if you can use custom styles in the profile box but you can try to call the stylesheet in the profile box then add the class of "apple" to the ul just like you did in the theme index.php file.

    You're question about image location. I just told you to put in in the default folder for simplicity. The url path in the css need to be a RELATIVE path to the image. You may want to use a full url if you wish to style the profile box.

    Sorry I couldn't be much help this just isn't something that is commonly done.

  20. martoccia
    Member
    Posted 8 months ago #

    Thank you very Much brandon, for your work on the plugin and for your help!
    I'll close this post to makeit usefull to the others!

    Ciao!

  21. tuviere
    Member
    Posted 1 month ago #

    I read this post and am having the following problems customizing and finding the required files:

    1.First how do I add google ads to the app?

    2. martoccia said he edited the index.php file in plugin/theme (is this under 'root/wp-content/plugins/wpbook/theme/index.php?

    if so, what line am I inserting 'the_exerpt,' so the app can show eccepts instead of the full article in the main page.

    3. Putting the first image of every post in the exerpt; which file and which line should I paste the code from BandonRandon?

    4. How do I increase the number of post that shows on the recent post area?

  22. johneckman
    Member
    Posted 4 weeks ago #

    @tuviere-

    1. The theme supplied with the plugin, which is used whenever the blog is viewed inside facebook, does not "out of the box" support google adwords, but you can add the required javascript wherever you link in the index.php inside /wp-content/plugins/wpbook/theme/

    2. Sounds good.

    3. Not sure as I don't use that plugin - you'd need to identify what action or filter it affects and identify why it isn't firing in this context

    4. You can edit the wp-recent-posts() and wp-profile-recent-posts() functions in wpbook.php or you can look through the code for where those functions are called, and change the number passed to the function.

    In a later version, I may make this number user configurable.

Reply

You must log in to post.

About this Topic