Skip to content

Added social share options and open graph tags #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from

Conversation

yemisi-o
Copy link
Contributor

@yemisi-o yemisi-o commented Dec 1, 2019

Added social share options to the blog post page and also open graph tags to ensure shared posts and URLs are displayed properly on social media sites

Desktop view
image

Mobile view
image

Modified the default admin credentials to match what is stated in the
Readme
This adds social sharing options to blog post pages and also includes
graph meta tags to ensure posts are shared properly. Specifically:

- Added social media icons (Facebook, Twitter, Linkedin)
- Implemented proper sharing to each platform (Share url and meta tags)
- Split blog base from website base so it is easier to add blog specific SEO tags
- Added open graph tags to main website base by extension

This PR closes #23
Merge branch 'develop' into feature/yo/23-social-share-options
@mazma1 mazma1 temporarily deployed to sca-blog-feature-yo-23-xokquvr December 24, 2019 18:06 Inactive
Copy link
Collaborator

@mazma1 mazma1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work Yemisi, and I apologize for the very late review.

One observation, the circle border of the icons look a bit skewed. I added a couple of styles and got something smoother, you can try them out.

  • Gave social-share-icon a uniform height to make it a square:
    .social-share-icon { height: 50px; }

  • Threw in a little padding to the icon:
    .fa { padding-top: 15px; }

  • The result I got:

Screenshot 2019-12-24 at 12 12 27 PM

Copy link
Collaborator

@mazma1 mazma1 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Another thing we can add is a custom message that forms the body of what we want to share instead of just having the article's title.

Eg:

"Recommended read on She Code Africa Blog: 'Awesome Article Title'"

@yemisi-o
Copy link
Contributor Author

Thank you for the suggestions @mazma1, I will try them out and update the PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants