Monat: März 2012

Plugin: Facebook Posts in WordPress Blog intregrieren

19. März 2012 - wordpress

Wer zusätzlich zu seinem WordPress Blog Posts auf Facebook veröffentlicht und die doppelte Schreibarbeit scheut, findet hier ein WordPress Plugin im ShortCode Stil.

English Summary for „Plugin: Facebook Posts in WordPress Blog intregrieren“

For those who publish in Facebook and WordPress, here is a WordPress Plugin that integrates the most recent Facebook posts in your wordpress articles.

WordPress Streamreader mit  SimplePie

Der einfachste Weg zu den Facebook Posts führt über den WordPress Streamreader feed.php, der auf SimplePie aufgebaut ist.

Wir brauchen dazu die Newsfeed URL von Facebook:
http://www.facebook.com/feeds/page.php?id=… Facebook ID ….&format=atom10

Hier ist der Plugincode:

function facebook_posts_ausgeben_handler ($atts, $conten=null) {
include_once(ABSPATH . WPINC . '/feed.php');
extract(shortcode_atts(
array('fbid'   => '','nr_of_posts' => 1),$atts));
if ($fbid==false) return;
// Get a SimplePie feed object from the specified feed source.
$rss = fetch_feed("http://www.facebook.com/feeds/page.php?id=" . $fbid . "&format=atom10");
if (!is_wp_error( $rss ) ) : // Checks that the object is created correctly
// Figure out how many total items there are. Limited by: nr_of_posts
$maxitems = $rss->get_item_quantity($nr_of_posts);

// Build an array of all the items, starting with element 0 (first element).
$rss_items = $rss->get_items(0, $maxitems);
endif;
$fb_text='';
$fb_text .="<ul style='list-style-type:none;'>";
if ($maxitems == 0) $fb_text.= '<li>No items.</li>';
else {
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) :
$fb_text .="<li>";
$ww0=esc_url( $item->get_permalink() );
$ww1=$item->get_date('j F Y | g:i a');
$ww2=esc_html( $item->get_title() );
$ww3= $item->get_description() ;
$fb_text .= "<h3><a href='".$ww0."'";
$fb_text .= "title='"."Posted ".$ww1."'>";
$fb_text .= $ww2."</a></h3>";
$fb_text .= "<p>".$ww3."</p>";
$fb_text .= "</li>";
endforeach;
$fb_text .="<ul>";
}
return $fb_text;
}
}
// Start this plugin once all other plugins are fully loaded
add_action( 'plugins_loaded', create_function( '', 'global $ShortcodeFacebook; $ShortcodeFacebook = new ShortcodeFacebook();' ) );

Gestartet wird das Plugin auf der Seite/ im Artikel so:
[ fb_posts fbid=123456789012345 nr_of_posts=5 ]
ohne die Leerzeichen nach bzw. vor den eckigen Klammern.

Die Anzahl der Posts, die angezeigt werden sollen, ist optional, default ist 1 Post.

Download shortcode_facebook

In der hier vorliegenden Form ist das Plugin nur dazu geeignet, Posts von vertrauenswürdigen Sites (vorzugesweise der eigenen) zu laden, da die Posttexte und Bilder „unentschärft“ 1:1 übernommen werden.

Und so sollte es dann aussehen:

  • No items.

Internet Explorer, display:none, image width = 0

1. März 2012 - HTML, IE, JavaScript

Wenn ihr ein Element (hier ein <div> mit einem img) auf eine Webseite stellt und es mit display: none versteckt, um es im Browser dynamisch anzupassen, kann es sein, dass ihr über einen kleinen feinen Unterschied zwischen dem IE und dem Rest der Browserwelt stolpert.

 

English Summary for „Internet Explorer, display:none, image width = 0“:

If it comes to hidden elements (display: none) on your website, your software may step over  some subtle differences between Internet Explorer and for example FireFox. FireFox and IE implement  „display:none“ elements in different ways that affect their width and height values.

IE und Firefox implementieren display:none unterschiedlich

Ich hatte per Plugin ein paar Zeilen in meine Seite eingefügt:

echo '<div id="bgimage" style="display: none; z-index: 0; overflow: hidden; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;">'
echo '<img src="'. plugins_url().'/hintergrundbild/images/'.$akt_image. '" alt="" width="'.$image_dims[0].'" height="'.$image_dims[1].'" style="z-index:1 ;" />';
echo '</div>';

Das Bild wollte ich im Browser per jQuery anpassen

...
var viewportWidth,viewportHeight,width_aspect_ratio,height_aspect_ratio,factor;
var bgimage=jQuery('#bgimage');
var imageWidth;
var imageHeight;
imageWidth=bgimage.find('img').attr("width");
imageHeight=bgimage.find('img').attr("height");
viewportWidth= jQuery(window).width();
viewportHeight= jQuery(window).height();
...

Das klappte auch beim FF ohne Probleme, aber der IE zeigte die Bilder nicht an.

Ursache war das „display:none“

Firefox baut das <div> so ein:

Internet Explorer ( Versionen 7-9) aber so:

Im ersten Fall waren die Bilddimensionen vorhanden, im zweiten Fall nicht.

Bilder nicht mit display: none verstecken

Also: in diesem Fall ist es besser, die Finger von display: none zu lassen und mit top:-32767 zu arbeiten.