Lions SMiLE Social Media for Lions by Lions

Right sizing – great looking

Home » Website

Right sizing – great looking

A new style to your club website or social media page?!

Changing banner image occasionally helps keep your site interesting . It is also a good way to align with the current main activity of the club or the centenary theme of lions.

Once you have chosen your preferred picture , the hard part begins …

SMiLE blog post: Right sizing - great looking

The challenge

How to …

  • avoid a distorted image?
  • keep all main image parts in view, once uploaded?
  • judge, whether the image will fit for Twitter too?
  • get a perfect look?

At this point it is very helpful to know, which image dimensions each service uses for all the different images supported: Profile image, banner image, event image, post image, etc.

But wait a minute … every once in a while social media channels like Facebook, Twitter, Instagram, etc. change these dimensions a bit – leading to the above outlined “problems” and challenges.

SMiLE is your friend …

SMiLE team members have the same challenges and questions while maintaining our sites or the sites each of us maintains for our clubs or districts.

So we share some resources with you, which really help to stay up to date with all the image dimensions. This way, you do not have to scribble them down or memorize them. Just bookmark this SMiLE blog post 🙂

You will find tons of web pages on the internet, which talk about this topic. Here are the sources we find most helpful:

A great big infographic covering all major social media channels:

Original web page: http://blog.hubspot.com/marketing/ultimate-guide-social-media-image-dimensions-infographic#sm.000jdcj9r65mcol11ag2ki26ivgew

Infographic itself (Image): https://socialmediaweek.org/wp-content/blogs.dir/1/files/hubspot-social-image-size-guide.jpg

Repeated here, with some Photoshop templates: http://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/

Second infographic about social media image sizes, slightly different approach: http://www.mainstreethost.com/blog/social-media-image-size-cheat-sheet/

About Facebook Event Cover images:

This seems to be a bit of a secret, but finally we found information about that as well … Two resources reported this dimension: 784 px wide by 295 px tall (http://webmarketingtherapy.com/blog/social-media-cover-photo-sizes-for-2016/)

Here you find some extra Facebook image dimensions, typically not mentioned in other sources! http://www.dreamgrow.com/facebook-cheat-sheet-sizes-and-dimensions/

Equipped with these cheat sheets, social media admins’ life gets much easier 🙂

But we have one more great thing to share with you …

 

Tools to create perfect sized social media banners

To speed up the work to compose a perfectly fitting social media banner or post image, using the right tool can help a lot!

One of the internet resources listed above provides Photoshop templates for various social media platforms. For those of you, who work a lot with Photoshop, that might be a good way for you.

In case you like it easy yet powerful and good looking, the SMiLE team recommends Canva, a tool we use quite a lot for this task.

Canva is an online service (www.canva.com) you can use simply with your browser, or you use the nice Canva iPad App! We highly recommend it.

 

Related SMiLE blog posts

To get a first impression about Canva, have a look on the SMiLE blog post, where we introduce Canva to you. Another valuable reading is our post about improving your Facebook club/district page in general. A click on the blog post title takes you right to it:

Team-Up Your Sites With Facebook Badges!

You know that from your experience as a Lion – once you established a working team with fellow Lions, your service activity runs like a charm 🙂 The same is true about your internet and social media sites. SMiLE seminars at LCIcon 2015 in Honolulu and LCI webinars featuring SMiLE talked about this in the recent past.

This blog post shows  a nice hands-on example how you can integrate your sites. Are you ready?! Buckle up and follow SMiLE into the world of social media integration – Team-Up your sites with Facebook Badges!

Link your website to your facebook page

 

Facebook “Social Plugins”

One way of teaming up your website with your facebook page is the use of the “well-known” facebook “follow”, “share” and “like” icons, which are technically called “social plugins”. They allow your website visitors to share your great website content on their facebook feed or tell their facebook friends, that they Like what you are doing. SMiLE will write another blog post about this some time in the near future. You can see those icons around this blog post as well 😉

Facebook “Badges”

But there is more to discover – facebook offers “facebook badges”, a nice way to link your website with either

  • your club’s facebook page
  • your photo albums on facebook
  • your personal facebook profile
  • your favorite pages
SMiLE facebook page badge

What’s nice and convenient for you as the administrator of your club or district facebook page?

The badge administration page lists all the pages you are responsible for and let you pick what you need – badge preview included. Plus you receive the little code snippet required to put the badge on your (blog) website ready to go! Even better, there is a configuration option attached, so you can choose, what information the badge will show.

 

Your first facebook page badge

First, you go to the facebook admin page for badges (do not forget to login to facebook!):
www.facebook.com/badges

Steps on facebook

Then, choose “Page Badge” and exercise below steps to prepare your badge:

  • scroll to the facebook page you want the page badge for
  • click on “Edit this badge”
  • make your adjustments and click “save”
  • Have a look at the preview to check whether you like your settings
  • click on “other” to display the code snippet
  • copy the snippet code (i.e. use the copy and paste function of your operating system).
    Make sure, you copy (and later paste) everything between the start and end markers:
    <!– Facebook Badge START –> …<!– Facebook Badge END –>

Steps on your website

Now it is time for the part on your website

Goto to your website

  • Enter the webpage you want to put the badge on
  • switch that page in edit mode if required
  • paste the snippet code according to the edit procedures of your website
  • Save your work

Perform a little test yourself before you proudly share the news on your facebook page 🙂

Example: e-clubhouse web site

In case your club uses e-clubhouse to host your club’s website, here is an example for you, how to actual get the badge into your web page:

  • Goto Lions e-clubhouse: http://e-clubhouse.org/
  • Login with your known credentials as Administrator of the web pages
  • Click on “Manage Pages” in the left navigation column and select the page you want the badge on
  • Once you are in edit mode for that page, add some text pattern where you want to place the badge
  • Click on “Source” in the icon toolbar of the edit window
  • Locate the text pattern entered before and paste the facebook badge snippet code right behind.
  • Again, click on “Source” in the edit toolbar to switch back to normal edit mode
  • review the result
  • make adjustments as required
  • Click on Preview and then Publish to get your changes online!

 

As we talk about Lions e-Clubhouse … this is a great service LCI offers for clubs, who have not yet establish their own web site and want to start simple and easy. It’s free for Lions clubs and districts, give it a try: http://e-clubhouse.org/
Have a look at the e-clubhouse website of Lions Club Rüsselsheim – it already has the Facebook Badge integrated: http://e-clubhouse.org/sites/russelsheim

Other facebook badges

As said in the introduction, there are in total four badges facebook currently offers. Take your time and discover them one by one. Use your own judgement on how to make use of them. In particular it is worth to play around with various settings each badge type offers.

SMiLE wishes you lots of fun and success while teaming up your sites!

Pin It on Pinterest