Integrate Facebook Save Button to your wordpress posts without a plugin

Yes, of course there are plugins that can do this for you. But if you are like me, you certainly prefer to avoid plugins as much as possible? Why? Although plugins are very helpful, especially if your programming skills aren’t the best, if you can do something simple without a plugin, better do it by coding it yourself. Installing many plugins can slow the loading speed of your site significantly, not to mention that you increase the possibilities of getting hacked because the plugin isn’t coded correctly or it hasn’t been updated for long… And the best reason is the fact that it feels soooo much better when you manage to do things by yourself ;).

So, to integrate a facebook save button to your wordpress site is pretty easy. A facebook save button is actually something a bookmark button which stores website pages that you visit in your facebook profile. In case you want to revisit that specific super hot page that you found once, facebook save button is your friend.

Now, in order to set it up, you first need to paste this code

<span id="fb-root"></span>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

just right after the opening of the <body> tag of your theme. Most commonly you can find it in the header.php template file. Yes, you don’t need to change anything in this code, just copy and paste it like that.

Then you just have to paste this code

<div class="fb-save" data-uri="<?php the_permalink(); ?>" data-size="large"></div>

wherever you want the facebook save button to appear. It can be just below or above your posts content (use the corresponding template file like content.php for example) or wherever you need it. You can change the large to small if you prefer a thinner button. The php code within the data-uri attribute gets dynanically the correct url of the displayed post.

There you are! With just these simple steps you can completely avoid an extra plugin and go enjoy a nice cold beer for making it :).

Time for a redesign

As new trends in design come, old ones go, new features become available, old ones are deemed … well… old… so, it was time for a redesign. I think I am sattisified with the result, I know, it is not everyone’s cup of tea. My wife told me that the bottom part of the homepage, where the most recent posts and the contact form wait for someone to notice them, seems chaotic in her eyes. Most probably she is right, but… I don’t know… I like it. As a nice oldie say “It’s my party and I’ll cry if I like to…”, so, it is my website and I will do with it whatever I want :D.

If I come up with a different idea about that part I will change it, but for now… I am happy with it. I hope you like it as well!!

Assigning a “current” class in wordpress main menu links for single page websites

Single page websites look really cool. Ok, they are not always helpful, especially for sites with lots of content, but if the scope of the site is to present simple information about a person, a product or a small company, then single page websites are a great choice.

What if you want to avoid purchasing a theme and try to make one modifying let’s say twenty twelve theme (my favorite since the last year). You create the layout, insert the content make the site look stunning. You also create the menu links which point to anchor links within the single page (for example “about”, “portfolio”, “contact” etc…

Ups, here comes the problem. How do I assign a custom “current” class in the menu link when

  1. it is clicked and the page scrolls to the corresponding section
  2. the user scrolls manually and when each section appears in the viewport, the corresponding menu link becomes highlighted.

Of course we are talking about fixed positioned menus, either on the top, on the side or at the bottom of the website that remains always visible regardless the scrolling.

WordPress assigns automatically such a class (at least for themes such as twenty eleven or twelve) in the menu items but only if the pages are different. When you create custom links that point to anchor points within your single page website, no such luck….

Luckily there is a solution and it is based on a great plugin developed by Trevor Davis. It is based on jquery, the scrollTo plugin and his own plugin jquery.nav.js.

You load these scripts from the footer of your site (before the closing body tag within the footer.php file). Jquery script is loaded by default from wordpress.

<script src="jquery.scrollTo.js"></script>
<script src="jquery.nav.min.js"></script>

Just after these lines you call the script

$(document).ready(function() {
$('#menu-mainmenu').onePageNav();
});

Notice the bold id that you target when you call the script. You can find the correct id name for your menu if you see the generated code of your site from your browser debugger (chrome and firefox have great debugging tools). It is the id of the ul list that contains the links you created for your menu from inside the dashboard. For more information and options check Trevor Davis.

Now that you assigned a “current” class in your menu of your one page site, you can style create wonders for the selected menu items. The plugin works perfectly!!

Advanced post slider for wordpress and read more link to excerpts

Advanced post slider is a wonderful plugin that allows you to display not only excerpts from posts but also from pages as a slideshow wherever you want through shortcodes (perfect for homepage for example).

Everything is nice and customizable but it bugged me that there was no option to insert a “Read more” link or button below the excerpt. The title of the displayed post or page is clickable and links nicely to the corresponding content but…. come on, we need a “read more” button there….

So, after a quick search in the web I found a nice and easy solution. I wanted to post this solution in two topics within the wordpress forums about this specific problem for this plugin, but the topics were closed, unanswered, so here comes the answer in my blog.

Open your functions.php file and paste these lines of code:

function new_excerpt_more($more) {
global $post;
return '… <a class="readpost" href="'. get_permalink($post-&gt;ID) . '">' . 'Read More »' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

This will replace the […] after the excerpt with a read more link. I have added an extra “readpost” class for the link so that you can style it easily through css.

Add HTML code to widget titles

Sometimes the seemingly easy things aren’t that easy after all. Someone would think that adding simple html code to a widget title (for example to create a link out of it or to break it in two lines) would work out of the box, but nope, wordpress goes and strips away all of your nice html code that you place within your widget title…

Workaround? Luckily it exists. Thanks to thewebprincess.com (such a beautiful address btw) I found this helpful code that you can also place within your functions.php file of your child theme

add_filter( ‘widget_title’, ‘your_html_widget_title’ );
/**
* html_widget_title function.
*
* @access public
* @param mixed $title
* @return void
*/
function your_html_widget_title( $title ) { //HTML tag opening/closing brackets
$title = str_replace( ‘[‘, ‘<‘, $title );
$title = str_replace( ‘[/’, ‘</’, $title );
$title = str_replace( ‘]’, ‘>’, $title );
return $title;
}

Now go and insert your beautiful html code in the title such as a nice <br/>  to brake the title in two lines. Doesn’t work? Heh, didn’t do the trick for me either. BUUUT don’t go away.

I looked at the above code more closely and I saw that it replaces the with <. So, I thought with whatever little remained from my brain after a long day’s work to write my code like that. [br/] instead of <br/>. 

Same trick if you want to wrap your title in <a> tags. Use [a href=….]Your title [/a]. And it works.

Show posts from Google+, Facebook, Twitter and Instagram in your WordPress blog

There are various tutorials on how to connect your WordPress blog with social media, so that a blog post is automatically posted in your facebook, google plus, etc… accounts. But what happens if you want to do the opposite? That is, whenever you write something in facebook or other social platforms, these posts display themselves automatically to your wordpress blog? Again! Various plugins available, nothing new here…

The reason for this post was a special requrest of a client of mine. She wanted to show in a widget area a list of the most recent posts from these 3 social platforms (fb, twitter and google plus). The number of posts shown should always be 5 (the most recent ones) regardless from the source. So if the most recent posts all came from facebook, then in the widget area we will show only facebook posts. If among these 5, we have 2 facebook posts, 2 google plus posts and one twitter post, then respectively we will show these posts accordingly.

WordPress comes by default with a show most recent posts widget that can also limit the number of posts (title of posts) shown, so this is the one we will use. Now we must find a way to import the posts from the social media and convert them to wordpress posts. In this way, the widget will be able to always show the most recent posts regardless from their source as they will have been converted to wordpress posts…

How to do that? The plugin FeedWordPress is our friend. What does it do? It reads rss feeds and converts the feeds to posts. There is an option to link the created posts to their original source (the corresponding social media platform in our case) or to keep them purely as wordpress posts. Other optios such as automatic update of the imported posts and other nice things are also available (the scope of this article is not FeedWordPress plugin).

So, now what remains is to find the rss url for each of the social media accounts…

 

RSS for Facebook

https://www.facebook.com/feeds/page.php?id=XXXXXXXXXXXXXXX&format=rss20

Replaxe your id with the id of your facebook page.

 

RSS for Twitter

http://blog.fogcat.co.uk/2013/01/17/creating-an-rss-feed-for-your-twitter-home-page/

Use this link, and follow the guidelines. You will need ftp access to your site to upload the necessary files and it is not so straightforward as with fetching rss for facebook, but it is a very stable system and worth your time. There are other sites such as http://twitrss.me/ but for some reason FeedWordPress site doesn’t like the resulting feed and displays errors :S.

 

RSS for Google +

Not so straightforward as well (again the FeedWordPress plugin is very picky with the rss feed it is going to use…). What I did for Google+ was first to create an rss feed with Magenta River. It has a totally free plan which you can use. Unfortunately, the rss feed it produces doesn’t work with the plugin in wordpress. The solution is to take the resulting rss url that Magenta River creates and use it to create a new rss feed with Google Feedburner. Use the rss url of Magenta with Google Feedburner and you are set. For Google + there is also this one http://gplusrss.com/ but my experience with it wasn’t the best. The resulting rss was working for one day and then it was throwing errors. As I am writing this article their site is down so I don’t know… if you want to try it go for it (the resulting rss feed url from it was working directly without any conversions, but it stopped for me…). Maybe you have more luck or they upgraded their system.

The final step of course is to use the final rss urls for each social platform with the FeedWordPress plugin.  While I was searching for the correct way to create rss feeds for the social platforms I found out that 2-3 years back it was far easier to get an rss from facebook, google+ etc.. It seems like that the trend is to keep the visitors within their own platforms and make it difficult to export the posts to other platforms (such as wordpress).

 

RSS for Instagram

http://widget.websta.me/rss/n/username

Use this link, and replace the “username” with your own instagram name. Copy this url and paste it like for RSS for Google+ in the Google Feedburner. The resulting rss url is the one you want to use with FeedWordPress plugin.

S2members registration form and custom fields not saving

Today I was trying to customize the registration form of S2members plugin for wordpress and add some extra custom fields in it as my client requested. Why should this be easy? It should… theoretically, but it wasn’t. No matter what kind of custom field I wanted to add, when I clicked on “save”, the page was not reacting. If I clicked on “save” again, I was getting a notification that “another field with the same unique name, is already added”.

What now?

Luckily, there is a solution to this issue (or else I wouldn’t make this post). Fire up your ftp and locate the root folder of the s2members plugin. There you will find its own .htaccess file. Download it and open it with a text editor. Inside it, comment each line of it (should be arounf 4 lines). To comment out, put infront of the first word of each line a hashtag (#). Without a gap between the # and the word. Save and re-upload the htaccess where you found it.

And problem solved!

My theme doesn’t work as it should after wordpress update or jquery easing issue in Chrome

I noticed that since a couple of weeks some wordpress sites I developed in the past or some I am working on now started to have some problems. Continue reading “My theme doesn’t work as it should after wordpress update or jquery easing issue in Chrome”